Cypress测试-包括css更改

Question

我目前正在用柏树对简单代码进行测试。除了点击按钮删除禁用链接的类之外，大多数测试都在柏树中进行。测试时似乎没有应用对css的更改。显然，我应该使用一个加载程序，这样柏树就可以读取css，但到目前为止我的尝试还没有奏效。所以我的问题是，是否有人可以推荐一个加载程序或其他方式，以便测试工作。

我的代码：

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>

这是我的柏木测试

it('submit new headline', () => {
cy.visit('http://localhost:8080/')

cy.get('input[name="text"]').type('hahahahhahhhhhhhhhhhhhhhh');
cy.get('.button').click();
cy.get('#login').click();})

Answer 1

如果css是作为页面的一部分加载的，那么测试应该按原样运行。我不确定它在哪里，所以很难对此提出建议，但如果你只是在练习测试，你可以把它包括在html中，如下所示：

<style>
.disabled {
pointer-events: none;
cursor: default;
text-decoration: none;
color: lightgrey;
}
</style>

此外，您还可以测试类是否正在添加

describe("empty spec", () => {
it("submit new headline", () => {
cy.visit("http://localhost:8080/");
cy.get('input[name="text"]').type("hahahahhahhhhhhhhhhhhhhhh");
cy.get("#login").should("have.class", "disabled"); // is disabled?
cy.get(".button").click();
cy.get("#login").should("not.have.class", "disabled"); // is enabled?
cy.get("#login").click();
});
});

但是，很明显，这是检查类是否被添加，而不是检查链接是否真的被禁用