5

我正在尝试创建一些基本测试来试用新的赛普拉斯库。在我的测试中，我cy.visit('http://mywebsite.com');正在加载一个使用 SystemJS 的 AngularJS 应用程序。

如果我正确理解赛普拉斯，我不应该做任何其他事情，它会确保在运行其他任何事情之前加载页面。但是，这似乎不起作用，因为页面已加载，但 SystemJS 仍在加载模块。

如何让赛普拉斯等待所有 SystemJS 模块加载，然后再运行任何测试而不使用cy.wait(5000)？

编辑

感谢 Dwelle，这是适合我的解决方案。我将初始 System.import 包装在一个 Promise 中，一旦 AngularJS 应用程序启动，该 Promise 就会得到解决。

window.APP_READY = new Promise(function(resolve, reject) {
    System.import('app').then(function(app) {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['app']);
            resolve();
        });
    });
});

然后在测试中

cy.visit('http://mywebsite.com').its('APP_READY');
4

2 回答 2

4

不熟悉 SystemJS 或您的应用程序，但如果我们假设您正在加载一些异步工作，您可以设置一些全局属性来指示应用程序是否准备好。

// your main.js
let _appReadyResolver;
window.APP_READY = new Promise( resolve => _appReadyResolver = resolve );

// do some async setup
setTimeout(() => {

    _appReadyResolver();
});

然后，在您的测试中：

cy.visit("/")
    // by default will wait 4sec for APP_READY prop to exist on
    //  window object (unfortunately I don't know how to increase timeouts
    //  of `cy.its` command)
    // After that, it will wait indefinitely for your promise to resolve
    .its("APP_READY")

话虽这么说 --- 如果您没有在应用程序中进行任何异步设置，但main.js只是异步加载并且可能需要超过 4 秒的时间，那么我会这样做：

// index.js
<script>
  SystemJS.import('/js/main.js');
  window.APP_READY = new Promise( resolve => {
    let interval = setInterval(() => {
        if ( window.MAIN_READY ) {
            resolve();
            clearTimeout(interval);
        };
  }, 100 );
</script>

// main.js
window.MAIN_READY = true;

您需要APP_READY从生产构建中剥离逻辑。

于 2017-11-15T09:51:08.820 回答
0

理论上，你也可以用纯 Cypress 的方式解决这个问题。

如果您的页面发出任何表明您的应用程序已准备就绪的请求，您可以让赛普拉斯等待它完成，然后再继续。您可能会发现这比 APP_READY 变通方法更干净。不过，这只是一种意见，因为如果没有您可以信任的请求表明您的应用程序已准备就绪，这种方法将失败。

cy.server();
cy.route('**/api/getData').as('getData');
cy.visit('/home');
cy.wait('@getData');

赛普拉斯最佳实践：不必要的等待。

赛普拉斯文档等待别名。

于 2018-10-08T12:07:31.113 回答