Cypress：在浏览器中通过的相同测试由于超时而在无头模式下失败

Question

当我vue-cli-service test:e2e --headless在注册请求回调中运行 Cypress 并进行一些测试时失败：

而通常在浏览器 ( vue-cli-service test:e2e) 中运行时，它们会传递：

 it('Submit WITHOUT promo code', () => {
        cy.server();
        cy.route({method: 'POST', url: 'api/register'}).as('register');

        cy.get('.thz-items-loading').should('not.be.visible');
        cy.get('#btn-submit').should('not.be.disabled');

        cy.get('iframe[name^="__privateStripeFrame"]').then(($iframe) => {
            const $body = $iframe.contents().find('body');

            cy.wrap($body).find('input:eq(1)').click({force: true}).clear();
            cy.wrap($body).find('input:eq(1)').type('4000000000009979'); // stolen card
            cy.get('#btn-submit').click(); // SUBMIT FORM

            cy.wait('@register').then(xhr => {
                cy.contains('#card-errors', 'Your card was declined.');
                // cy.get('.thz-items-loading').should('not.be.visible'); // FAILS
                // cy.get('.thz-items-loading').to.have.style('display', 'none'); // FAILS
                cy.get('#btn-submit').should('not.be.disabled'); // FAILS
                (...)
            });

            return null;
        });
(...)

堆栈跟踪：

1) 试用注册表提交，无需促销代码：CypressError: Timed out retrying: E​​xpected <button#btn-submit.thz-button.thz-radius-50.thz-btn-border-2.thz-align-center.thz-ff-g-hind-vadodara-600>not be 'disabled' at Object.cypressErr ( https://localhost:8000/__cypress/runner/cypress_runner.js:82944:11 ) at Object重试时在 Object . throwErrByPath ( https://localhost:8000/__cypress/runner/cypress_runner.js:82936:17 ) 处的 .throwErr ( https://localhost:8000/__cypress/runner/cypress_runner.js:82909:18 ) ( https://localhost:8000/__cypress/runner/cypress_runner.js:76454:16 ) 在https://localhost:8000/__cypress/runner/cypress_runner.js:68529:18 在 tryCatcher ( https://localhost: 8000/__cypress/runner/cypress_runner.js:131381:23 ) 在 Promise._settlePromiseFromHandler ( https://localhost:8000/__cypress/runner/cypress_runner.js:129399:31 ) 在 Promise._settlePromise ( https://localhost: 8000/__cypress/runner/cypress_runner.js:129456:18 ) 在 Promise._settlePromise0 ( https://localhost:8000/__cypress/runner/cypress_runner.js:129501:10 ) 在 Promise._settlePromises ( https://localhost: 8000/__cypress/runner/cypress_runner.js:129576:18 ) 在 Async._drainQueue ( https://localhost:8000/__cypress/runner/cypress_runner.js:126305:16 ) 在 Async._drainQueues ( https://localhost: 8000/__cypress/runner/cypress_runner.js:126315:10 ) 在 Async.drainQueues ( https://localhost:8000/__cypress/runner/cypress_runner.js:126189:14 )

回调中的以下几行cy.wait('@register')应在无头模式下传递：

cy.get('.thz-items-loading').should('not.be.visible');
cy.get('.thz-items-loading').to.have.style('display', 'none');
cy.get('#btn-submit').should('not.be.disabled');

看起来超时发生是因为元素#btn-submit和在回调.thz-items-loading中无法访问@register，即使在这两种情况下它们都存在于 DOM 中，但为什么呢？在提出请求之前就可以联系到他们了。

我正在 Windows 10 上使用 vue-cli 创建的项目中运行 Cypress 3.2.0。测试的应用程序不是该项目的一部分，托管在其他地方，并且是一个静态 html 页面。无头浏览器是 Electron 59。

Answer 1

事实证明，Electron 浏览器在执行像 Promises 这样的新语法时默默地失败了，这就是为什么解析的 Promisethen()回调中的代码应该更改显示属性.thz-items-loading并且#btn-submit从未执行，并且期望更改的测试从未通过。

在测试的APP之前添加babel的polyfillsmain.js修复了这个问题：

<script src="../../node_modules/@babel/polyfill/dist/polyfill.min.js"></script> <!-- or copy to root dir in build process -->
<script src="./main.js"></script>