Cypress cy.visit() 函数超时并仅在打开 VueJS webapp 时跳过测试答案

【问题标题】：Cypress cy.visit() function times out and skips tests only when opening a VueJS webappCypress cy.visit() 函数超时并仅在打开 VueJS webapp 时跳过测试
【发布时间】：2020-03-20 13:24:25
【问题描述】：

赛普拉斯 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 传递]

[屏幕截图 - 在 Nintendo 上失败]

[屏幕截图 - 在 Gitlab 上失败]

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

[疑难解答]

我已尝试恢复到以前的 cypress 版本
我尝试过非 VueJS 网站都可以工作
我试过 VueJS 网站都失败了
我在 Google 上四处寻找与此相关的具体内容，我发现赛普拉斯有能力测试 VueJS，但没有失败的细节。
Google 上有文章讨论了这个超时，它通常与增加 cypress.json 中的页面加载时间有关（这个上下文是非 Vue WebApps），我通过设置强迫我的以这种方式失败我的超时时间为 1000 毫秒，这导致它失败了……所以那篇文章对我没有帮助。

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

【问题讨论】：

出于好奇，您是否尝试过仅使用 http 而不是 https。
@mvoase：我刚刚尝试切换到 http，但我遇到了同样的问题 - 感谢您的参与 ;)
这样做听起来有点脏，最初我的想法是任天堂正在执行的 XHR 调用数量，实际上它在加载之前就超时了。显然这些都是常见的网站，你有没有试过只是站起来一个本地的基本 VueJS 模板并检查你是否可以重现？
@mvoase：我实际上已经将等待时间增加到 50,000 只是为了在大声笑之前排除这种情况，这可能是问题所在。所以我实际上是一名自动化工程师，这是我第一次尝试自动化 VueJS。鉴于此，我不确定开发人员将如何支持 VusJS 模板 =)
github.com/vuejs-templates/simple 你可以用这个项目站起来，然后将你的赛普拉斯项目指向本地主机

标签： javascript vue.js npm cucumber cypress

【解决方案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');
});

【讨论】：