Cypress E2E тест без использования функции ожидания - PullRequest
Новая
       7

Cypress E2E тест без использования функции ожидания

1 голос
/ 15 января 2020

Я новичок в тестировании e2e с Cypress, и у меня возник вопрос.

Я написал тест и не хочу использовать в нем команду Cypress wait (). 

it('Should modify checkbox state', () => {
        login();
        cy.visit(TabsSettings.SIZE_FORMATS).then(() => {
            cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]', { timeout: 10000 }).click().then(() => {
                expect(
                    cy.xpath('(//input[@type="checkbox"])[1]')
                        .then(checkbox => checkbox).should('be.checked')
                );
            });
            cy.get('span').contains('Change').click().then(() => {
                cy.get('li').contains('Disable').click().then({ timeout: 5000 }, () => {
                    cy.wait(500);
                    cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]').click().then(() => {
                        expect(
                            cy.xpath('(//input[@type="checkbox"])[1]')
                                .then(checkbox => checkbox[0]).should('be.checked')
                        );
                    });
                    cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[18]').click().then(() => {
                        expect(
                            cy.xpath('(//input[@type="checkbox"])[2]')
                                .then(checkbox => checkbox[3]).should('not.checked')
                        );
                    });
                });
                cy.xpath('//span[contains(text(), "Disable Selected")]').click().then(() => {
                    cy.get('li').contains('Enable').click().then(() => {
                        expect(
                            cy.get('input[type=checkbox]')
                                .then(checkbox => checkbox).should('not.checked')
                        );
                    });
                });
                cy.get('input[type=checkbox]').then(el => el[0].click()).then(() => {
                    expect(
                        cy.get('input[type=checkbox]')
                            .then(checkbox => checkbox).should('be.checked')
                    );
                }).then(() => {
                    cy.xpath('//i').then(x => x[1].click());
                    cy.get('input[type=checkbox]').should('not.checked');
                });
                cy.get('div[data-main-select=true]').then(list => list[1].click()).then(() => {
                    cy.xpath('(//li[contains(text(), "50")])[1]').click().then(() => {
                        cy.get('input[type=checkbox]').should(checkboxes => {
                            expect(checkboxes).to.have.length(51);
                        });
                    });
                });
                cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]').click().then(() => {
                    cy.wait(150);
                    expect(
                        cy.get('input[type=checkbox]')
                            .then(checkbox => checkbox).should('be.checked')
                    );
                });
            });
        });
    });

Моя проблема в том, что если я не использую эту команду cy.wait (500), тест не пройден. Я много гуглил, но не могу найти ответ на свою проблему. Проект представляет собой проект React, использующий Hooks. Проблема может быть вызвана тем, что мой компонент рендерится несколько раз после этого события click (). Страница не перезагружается, но основной компонент перерисовывается несколько раз. Если это проблема, как я могу дождаться окончания всех визуализаций и сразу после этого продолжить тест, не используя функцию ожидания?

Ответы [ 2 ]

1 голос
/ 16 января 2020

Глядя на это немного дальше, вы, кажется, без необходимости используете синтаксис в стиле обещания.

Поскольку Cypress имеет автоматические c повторные попытки для (большинства) команд, вы можете просто вызывать команды последовательно, не ожидая результата с конструкциями .then(....

Например, ваш код может Перейдите к следующему: 

it('Should modify checkbox state', () => {
  login();
  cy.visit(TabsSettings.SIZE_FORMATS);
  cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]', {timeout: 10000 }).click();

  // cy.xpath('(//input[@type="checkbox"])[1]').then(checkbox => checkbox).should('be.checked')
  cy.get('input[@type="checkbox"]).eq(0).should('be.checked');  // NB eq() has zero-based indexing.

  cy.get('span').contains('Change').click();
  cy.get('li').contains('Disable').click();
  // OR if you have to wait for the Disable button/link to appear, use this
  cy.contains('li', 'Disable').click();

  cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]').click();
  cy.get('input[@type="checkbox"]).eq(0).should('be.checked');
  ...

Я не знаком с синтаксисом xpath, поэтому перевод - это предположение, но кажется, что команды Cypress немного более читабельны, имеют более плоский макет, ПЛЮС вы получаете встроенную автоматическую повторную попытку, которая устраняет необходимость ждать определенные c периоды.

Если вы хотите добавить к своему вопросу перевод псевдокодов выражений xpath, я дам вам эквивалентные команды Cypress.

1 голос
/ 15 января 2020

Вам не нужно использовать wait со временем, но иногда вам может понадобиться дождаться определенного запроса до конца sh. Я считаю, что это имеет место с некоторыми AJAX запросами. Вы можете заставить его ждать заданный c запрос до конца sh, используя определения маршрута: 

cy.server()
cy.route('activities/*', 'fixture:activities').as('getActivities')
cy.route('messages/*', 'fixture:messages').as('getMessages')

// visit the dashboard, which should make requests that match
// the two routes above
cy.visit('http://localhost:8888/dashboard')

// pass an array of Route Aliases that forces Cypress to wait
// until it sees a response for each request that matches
// each of these aliases
cy.wait(['@getActivities', '@getMessages'])

// these commands will not run until the wait command resolves above
cy.get('h1').should('contain', 'Dashboard')

Подробнее здесь: https://docs.cypress.io/guides/guides/network-requests.html#Waiting

...