赛普拉斯：由于超时，在无头模式下传入浏览器的相同测试失败

Question

当我用vue-cli-service test:e2e --headless运行赛普拉斯时，寄存器请求回调中的一些测试失败：

而通常在浏览器（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：超时重试：预期<button#btn-submit.thz-button.thz-radius-50.thz-btn-border-2.thz-align-center.thz-ff-g-hind-vadodara-600>不会在Object.thressErr（https://localhost:8000/__cypress/runner/cypress_runner.js:82944:11）的Object.throwErr（https://localhost:8000/__cypress/runner/cypress_runner.js:82909:18）在Object.throwErrByPath（https://localhost:8000/__cypress/runner/cypress_runner.js:82936:17）重试时被禁用（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._settleFromHandler（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._drainQueue（https://localhost:8000/__cypress/runner/cypress_runner.js:126315:10）at atync._drainQueues（https://localhost:8000/__cypress/runner/cypress_runner.js:126189:14）at at Async.drainQueues（cy.wait('@register')）at

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和then()，即使在这两种情况下它们都存在于DOM中，但为什么呢？在请求之前可以到达它们。

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

Answer 1

事实证明，Electron浏览器在执行像Promises这样的新语法时无声地失败，这就是为什么解决了Promise的.thz-items-loading回调中的代码，它应该改变#btn-submit和main.js的显示属性，但是从未执行过，并且测试期望改变永远不会通过。

在测试APP的

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

之前添加babel的polyfill修复了这个问题：

qazxswpoi