使用jQuery时与Cypress问题反应

Question

我在赛普拉斯中运行了以下测试。

it('click button', () => {
    cy.visit('localhost:3000');
    let $li = Cypress.$('.myClass');
    cy.wrap($li)
        .click({force:true})
})

，并收到以下错误消息：

  

CypressError：超时重试：预期找到元素：“。myClass”，但从未找到。

我的React代码如下：

<Button className='myClass'>myButton</Button>

能否让我知道问题出在哪里？

Answer 1

您的HTML使用className='myClass'。这不是HTML类，因此选择器.myClass不会针对此元素。

您在这里有两个选择：可以将HTML更改为class='myClass'，也可以将选择器更改为button[className='myClass']，也可以仅更改为[className='myClass']。

下面的代码应该可以解决您的问题-注意HTML中的更改。

赛普拉斯测试：

describe('Test', () => {
    it('Clicks a button', () => {
        cy.visit('localhost:3000');
        cy.get('.myClass').click();
    });
});

HTML：

<button class='myClass'>myButton</button>

Answer 2

尝试一下：

it('click button', () => {
    cy.visit('localhost:3000');

    cy.get('.myClass')
        .click({force:true})
})

可能反应尚未呈现您的元素。上面提到的get这样的赛普拉斯命令可以为您解决此问题。