Cypress cy.visit() 函数超时并仅在打开 Vue JS Web 应用程序时跳过测试

Question

Cypress cy.visit() 函数在打开 VueJS Web 应用程序时超时并中止所有剩余的测试。如果我打开任何其他非 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 实例传递]

[疑难解答]

我已经尝试恢复到以前的 cypress 版本
我试过非 VueJS 网站都可以正常工作
我试过 VueJS 网站都失败了
我环顾了 Google 以找到与此相关的内容，我发现的只是 Cypress 能够测试 VueJS，但没有失败的细节。
Google 上有文章谈到这个超时，它通常与增加 cypress.json 中的页面加载时间有关（这个上下文是非 Vue WebApps），我强迫通过将我的超时设置为 1000 毫秒，我以这种方式失败，这导致它失败......所以那篇文章对我没有帮助。

请让我知道其他信息是否有助于解决这个问题。对此的任何帮助将不胜感激，谢谢！ =)

Answer 1

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

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

将您的 cypress 测试指向它只是为了验证它不是您要测试的实际网站。

如果这有效，那么 XHR 很可能会在您尝试访问的网站的后台调用。

在这种情况下，您需要研究 cy.route 以便在实施下一次交互之前处理它们。

我们用来与 XHR 交互的自定义 cypress 命令示例调用它非常基本但有效。

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

Cypress cy.visit() 函数超时并仅在打开 Vue JS Web 应用程序时跳过测试

Cypress cy.visit() function times out and skips tests only when opening a VueJS webapp

javascript

cucumber

npm

vue.js

cypress