我目前正在用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();})

推荐答案

如果将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();
  });
});

但是,显然,这是判断是否添加了类,而不是判断链接是否实际上被禁用

Javascript相关问答推荐

Vue.js使用特定索引值的数据更新html

为什么新的Promises会在不需要的情况下被用来等待?

使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

在shiny 模块中实现JavaScript

如何制作删除按钮以从列表中删除该项目所属的项目?

Fastify错误:CORS策略已阻止从起源api-dev.example.com上的MLhttp请求

使用redux-toolet DelivercThunks刷新访问令牌

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

如何找出摆线表面上y与x相交的地方?

当作为表达式调用时,如何解析方法decorator 的签名?

如何让npx在windows中运行js脚本?

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

使用ThreeJ渲染的形状具有抖动/模糊的边缘

为什么可选参数的顺序会导致问题?

如何确保预订系统跨不同时区的日期时间处理一致?

传递方法VS泛型对象VS事件特定对象

如果NetSuite中为空,则限制筛选

如何在FiRestore中的事务中使用getCountFromServer

select 2-删除js插入的项目将其保留为选项