Реагируйте с проблемой Cypress при использовании jQuery

Question

Я запускаю следующий тест в Cypress.

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.

Cypress test:

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})
})

Вероятно, реакция еще не отобразила ваш элемент.Команды Cypress, такие как get, упомянутые выше, решают эту проблему для вас.