我目前正在用Cypress 练习简单的代码测试.大多数测试都是在Cypress中进行的,除了按钮单击会移除禁用链接的类.似乎,在测试时不会应用对css的更改. 显然,我应该使用加载器,这样Cypress 就可以阅读css,但到目前为止,我的try 还没有奏效.所以我的问题是,如果有人能推荐一种装载机或其他方法,这样测试就能正常进行.
我的代码是:
class Headline {
constructor(rootElement) {
this.rootElement = rootElement;
this.headline = this.rootElement.querySelectorAll('.headline');
this.toggler = this.rootElement.querySelectorAll('.button');
this.init();
}
init(){
this.toggler[0].addEventListener("click", () => {
let newHeadline = document.getElementById('text').value;
console.log(this.link)
if(newHeadline.length === 0){
alert("fehlender Input")
}else{
this.headline[0].innerHTML = newHeadline;
console.log(document.getElementById('login').classList.remove('disabled'));
}
});
}
}
document.querySelectorAll('.test').forEach((head) => {
const input = new Headline(head);
});
.disabled {
pointer-events: none;
cursor: default;
text-decoration: none;
color: lightgrey;
}
<div class="test">
<h1 class="headline">Hallo</h1>
<label for="text">New Headline:</label>
<input type="text" id="text" name ="text" class="input_text" placeholder="newHeadline">
<button class="button">Submit</button>
</div>
<a href="/page/login.html" id="login" class="disabled">Login</a>
这是我的 cypress 测试
it('submit new headline', () => {
cy.visit('http://localhost:8080/')
cy.get('input[name="text"]').type('hahahahhahhhhhhhhhhhhhhhh');
cy.get('.button').click();
cy.get('#login').click();})