时间戳

首页 > 解决方案 > 赛普拉斯 e2e 测试不使用等待功能

reactjs - 赛普拉斯 e2e 测试不使用等待功能

问题描述

我是赛普拉斯 e2e 测试的新手，我有一个问题。

我写了一个测试，我不想在其中使用 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() 事件之后多次呈现。页面不会重新加载，但主要组件会重新渲染几次。如果这是问题所在，我怎么能等待完成所有渲染，然后继续测试，而不使用等待功能？

标签： reactjstestingwaitcypress

解决方案

您不需要使用waittime，但有时您可能需要等待某个请求完成。我发现一些 AJAX 请求就是这种情况。您可以使用路由定义让它等待特定请求完成：

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

推荐阅读