javascript - Cypress: same tests that pass in browser fail in headless mode due to timeout
问题描述
When I run Cypress with vue-cli-service test:e2e --headless
some tests inside a register request callback fail:
whereas normally when run in browser (vue-cli-service test:e2e
) they pass:
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;
});
(...)
Stack trace:
1) Trial registration form Submit WITHOUT promo code: CypressError: Timed out retrying: expected
<button#btn-submit.thz-button.thz-radius-50.thz-btn-border-2.thz-align-center.thz-ff-g-hind-vadodara-600>
not to be 'disabled' at Object.cypressErr (https://localhost:8000/__cypress/runner/cypress_runner.js:82944:11) at Object.throwErr (https://localhost:8000/__cypress/runner/cypress_runner.js:82909:18) at Object.throwErrByPath (https://localhost:8000/__cypress/runner/cypress_runner.js:82936:17) at retry (https://localhost:8000/__cypress/runner/cypress_runner.js:76454:16) at https://localhost:8000/__cypress/runner/cypress_runner.js:68529:18 at tryCatcher (https://localhost:8000/__cypress/runner/cypress_runner.js:131381:23) at Promise._settlePromiseFromHandler (https://localhost:8000/__cypress/runner/cypress_runner.js:129399:31) at Promise._settlePromise (https://localhost:8000/__cypress/runner/cypress_runner.js:129456:18) at Promise._settlePromise0 (https://localhost:8000/__cypress/runner/cypress_runner.js:129501:10) at Promise._settlePromises (https://localhost:8000/__cypress/runner/cypress_runner.js:129576:18) at Async._drainQueue (https://localhost:8000/__cypress/runner/cypress_runner.js:126305:16) at Async._drainQueues (https://localhost:8000/__cypress/runner/cypress_runner.js:126315:10) at Async.drainQueues (https://localhost:8000/__cypress/runner/cypress_runner.js:126189:14) at
Following lines inside cy.wait('@register')
callback should pass in headless mode:
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');
Looks like the timeout happens because elements #btn-submit
and .thz-items-loading
are not reachable in @register
callback, even though in both cases they exist in DOM, but why? They are reachable before the request just fine.
I'm running Cypress 3.2.0 from a project created with vue-cli on Windows 10. Tested app is not a part of the project, is hosted elsewhere and is a static html page. Headless browser is Electron 59.
解决方案
It turns out that Electron browser silently fails at executing newer syntax like Promises, that's why code in resolved Promise's then()
callback which was supposed to change display property of .thz-items-loading
and #btn-submit
was never executed and tests expecting that change never passed.
Adding babel's polyfills before main.js
of tested APP fixed this issue:
<script src="../../node_modules/@babel/polyfill/dist/polyfill.min.js"></script> <!-- or copy to root dir in build process -->
<script src="./main.js"></script>
推荐阅读
- python - 在 Python 中并行处理一组 XML 文件
- javascript - Checkbox不想勾选或点击后取消勾选
- cluster-computing - 在 Torque 资源管理器下获取节点的状态?
- sql - 使用 SQL 根据指定的要求将值组合在一起?
- javascript - 从源代码中的 Highchart 图中获取工具提示值
- flutter - Flutter:布局卡
- php - 如何自定义dokan可下载产品文件上传循环?
- c - C中的if结构会影响变量的值吗?
- bash - 将 Shell 脚本与文件扩展名关联
- ios - UITableView ScrollToRow 函数动画奇怪