Cypress cy.visit()函数超时，只有在打开VueJS when应用程序时才跳过测试

Question

Cypress cy.visit()函数在打开VueJS应用程序时超时并中止所有剩余的测试。如果我打开任何其他网站的主页不是VueJS，它的工作很好。下面是我非常基本的配置：

package.json

 "dependencies": {
    "cypress": "^4.2.0",
    "cypress-cucumber-preprocessor": "^2.0.1" 
}

cypress.json

{ 
    "defaultCommandTimeout": 8000,
    "pageLoadTimeout": 10000,
    "testFiles": "**/*.{feature,features}" 
}

\cypress\plugins\index.js

const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

\cypress\integration\cucumber-tests\login.feature

Feature: Login
    As a user I desire to login
    Scenario: Login to a Website
        Given I open a website

\cypress\integration\cucumber-tests\login\loginSteps.js

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
import LoginPage from './loginPage'

Given('I open a website', () => {
    LoginPage.visit()
})

\cypress\integration\cucumber-tests\login\loginPage.js

//const URL = 'https://www.google.com' // Not a VueJS WebApp - Works Fine
//const URL = 'https://www.gitlab.com' // This is a VueJS WebApp - Times out and aborts rest of tests
const URL = 'https://www.nintendo.com' // This is a VueJS WebApp - Times out and aborts rest of tests
// List of VueJS WebApps: https://www.techuz.com/blog/top-9-websites-built-using-vue-js/

class LoginPage {
    static visit() {
        cy.wait(3000)
        cy.visit(URL)
    }
}

export default LoginPage

屏幕-在Google上传递

​

屏幕-任天堂失败

​

屏幕- Gitlab上的失败

​

屏幕截图-使用本地VueJS实例传递

​

Troubleshooting

我试着恢复到以前的柏树版本failing.

• There

• ，我尝试过非VueJS网站，所有工作

• 我都尝试过VueJS网站，都失败了

• ，我环顾谷歌找了一些与此相关的东西，我发现cypress有能力测试VueJS，但它的任何细节都不是谷歌上的文章讨论这个超时，它通常必须增加页面加载时间在cypress.json (这个上下文是非Vue WebApps)，我强迫我的失败，通过把我的时间设置为1000 my，这导致了fail...so那篇文章对我毫无帮助。

请告诉我，如果更多的信息将有助于解决这一问题。如能对此提供任何帮助，将不胜感激，谢谢！

Answer 1

我的建议是安装一个本地版本的VueJS模板

https://github.com/vuejs-templates/simple

指出你的柏树测试，只是为了验证它不是实际的网站，你试图测试。

如果这是可行的，那么很有可能在您试图访问的站点的背景下调用XHR。

在这种情况下，您需要查看cy.route，以便在实现下一个交互之前处理它们。

例如，我们使用自定义的cypress命令与XHR交互，调用它的基本功能，但很有感情。

Cypress.Commands.add('apiCheck', (endpoint : string) => {
cy.server();
cy.route('GET', endpoint).as('apiCheck');
});