Question

我是赛普拉斯进行端到端测试的新手，我有一个问题。

我编写了一个测试，但不想在其中使用赛普拉斯的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）命令，测试将失败。我在Google上搜索了很多，但是找不到我的问题的答案。该项目是一个使用Hooks的React项目。可能引起问题的原因是，在click（）事件之后，我的组件多次渲染。该页面不会重新加载，但是主要组件会重新渲染几次。如果这是问题所在，我该如何等待所有渲染完成，然后在不使用wait函数的情况下继续测试？

Answer 1

您不必花时间使用const promises = array.map((item) => { const promise = s3.getSignedUrlPromise('getObject', { Bucket: process.env.S3_BUCKET, Key: key, //filename Expires: 604800, //time to expire in seconds (optional) ResponseContentType: 'binary/octet-stream' }); return promise; }); const links = await Promise.all(promises);，但有时您可能需要等待某个请求完成。我发现某些AJAX请求就是这种情况。您可以使用路由定义让它等待特定的请求完成：

wait

在此处了解更多信息：https://docs.cypress.io/guides/guides/network-requests.html#Waiting

Answer 2

再进一步看一下，您似乎不必要地使用了Promise样式的语法。

因为赛普拉斯可以自动重试（大多数）命令，所以您可以依次调用这些命令，而无需等待.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的命令更具可读性，布局更平坦，而且内置了自动重试功能，因此无需等待特定的时间。

如果您想在问题中添加xpath表达式的伪代码翻译，我将为您提供等效的赛普拉斯命令。

不用等待功能的赛普拉斯e2e测试

2 个答案: