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

Question

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