The Cy.visit() function in Cypress times out and bypasses tests specifically when navigating to a VueJS web application

Having trouble with the Cypress cy.visit() function timing out and aborting tests on a VueJS Web Application? It seems to work fine when opening other non-VueJS sites. Below is my basic configuration setup:

[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

[Screenshot - Passing on Google]
https://i.sstatic.net/jXkBf.png

[Screenshot - Failing on Nintendo]
https://i.sstatic.net/q8zDC.jpg

[Screenshot - Failing on Gitlab]
https://i.sstatic.net/VqKQs.png

[Screenshot - Passing with a local VueJS instance]
https://i.sstatic.net/UMzyU.png

[Troubleshooting]

  • Tried different cypress versions but still facing the issue
  • Non-VueJS websites are working, while VueJS websites are failing
  • Explored Google for solutions, but couldn't find relevant information
  • Increased page load time as suggested in some articles, but no luck
  • If you have any insights or additional info to help resolve this, it would be greatly appreciated. Thank you! =)

Answer №1

One solution might be to set up a local version of a VueJS template

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

Direct your cypress tests to this local version to confirm that you are not testing against the actual websites.

If this method proves successful, it is likely that the issue lies with XHR calls in the background of the sites you are trying to access.

In such cases, you will need to explore using cy.route to manage these calls before proceeding with further interactions.

Here is an example of a custom cypress command we employ to handle XHR calls - it may seem basic but it is effective.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the stores pinia to remain undefined?

I'm encountering an issue when trying to access the store as I receive an error stating that useUsersStore is not defined. The pi nia store has been correctly stored and exported to the component. https://stackblitz.com/edit/vitejs-vite-wg4uyx?file=s ...

Converting a date from PHP to JavaScript

My PHP code generates the following date: <?php date_default_timezone_set('Europe/London'); echo date('D M d Y H:i:s O'); ?> Additionally, I have a JavaScript/jQuery script that displays this date on the website: setInterval( ...

Retrieve data using Ajax querying from a specific data source

Currently, I am attempting to construct a custom query using Ajax to interact with PHP/MySQL. Here is what I have so far: Javascript code: var i=2; fetchFromDBPHP("name", "tblperson", "id="+i); function fetchFromDBPHP(column, table, condition) { ...

the intricacies of resizing a dijit dialog

My dialog is defined as shown below: <div data-dojo-type="dijit/Dialog" id="DetailDialog" class="dijitDialog" ... I have loaded a grid inside the dialog with 10 columns. var dialog = dijit.byId("DetailDialog"); dialog.set("content", this.Details); d ...

Leverage the power of Angular's library dependency injection with the @inject

I am currently working on a project that involves a library. Within one of the classes in this library, I am attempting to provide a service using @optional, @host, and @inject decorators with an injection token. In the parent component, I have the optio ...

Determining the optimal number of rows and columns based on an integer value

Here's a brain teaser for you: /** * Let's figure out the optimal number of rows and columns for your garden to be as square as possible, based on the number of seeds you have. * * @param {number} seedCount - The total number of seeds in you ...

Issues arise while attempting to globally install a package from a GitHub URL using Node.js and

I have successfully installed locally using a git URL How do I directly install an npm package from GitHub? However, when I add the "-g" flag - it fails. Here is the whole log guym@guym-ubuntu:~/dev_env/projects_GIT/cosmo/gs-tmp$ sudo npm -g install gi ...

Using Vue and Winter CMS to enhance front end file uploading

Currently, I am facing a challenge with uploading images from a Vue frontend to WinterCMS using Illuminate/Http/Request. While Vue is able to detect the file and log the File object, I am struggling to successfully transfer it over the API. I have attempte ...

Display a dialogue box when encountering a Vuetify error. Only open the dialogue box under certain conditions

I am currently implementing vuetify into my project. The main issue I am facing is related to the dialog component, which I only want to open in case of an error. The scenario involves a button calling a backend service to save a product in the database, a ...

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

Is it possible to use file upload for sending via Ajax's POST method?

Let's talk about the scenario at hand Here's what happens in a single form: 1) The user clicks on the 'browse' button, which opens a dialog to select an image file for uploading. Example: input id='img_upload' name="ufile" ...

Effortless method of organizing information like scores

I have developed a multiplayer game that will be played on a server, and I need to save the high scores of the players. These stored scores should be consistently available and easily accessible for all players at any time. Can anyone suggest a good appro ...

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Users can input 5 numbers into a form, each with the same ID but a different name. I want to validate each input and change the background color based on the number entered - red for 0-5, green for 6-10. I wrote code to change the color for one input box, ...

Send JSON information to a Spring Boot server application

I am brand new to working with Spring Boot. Currently, I am attempting to send registration form data (in JSON format) from a Vue frontend to a Spring Boot backend. However, the backend always indicates that the received data is null. How can I properly re ...

What steps can I take to enhance my script and prevent the password field from being displayed alongside the username

I am currently working on a script that dynamically displays your username in the Login button as you type it. However, I have encountered an issue where the password is also being displayed, which is unacceptable. Additionally, I would like to enhance my ...

Webpack and Keycloak Integration: Content blocked because of MIME type ("text/html")

I am currently using VueJS for my frontend with Keycloak handling authentication, along with Webpack to bundle my code. Upon the initial application load, if the user is not authenticated, they are redirected to the Keycloak page. During this process, an ...

Unable to send data using GET method after implementing passportjs integration

In the route.js file, I have implemented the following REST method: app.get('/api/todos', isAuthenticated, function(req, res) { DB.TodoTable.find() .exec(function(err, todos) { res.json(todos, function(err){ if (err) ...

Obtaining a state hook value within an imported function in React

In order to access a value from the state hook stored in a special function, it is straightforward to do so in a functional component. For example, this can be achieved in App.js like this: import React from 'react'; import { Switch, Route, with ...

What are the steps to increase or decrease the quantity of a product?

Is there a way to adjust the quantity of products in the shopping cart? I would like to be able to increase and decrease the quantity, while also displaying the current value in a span tag. <a href="javascript:" id="minus2" onclick="decrementValue()" ...

Unable to run grunt and gulp due to a change in the user's scoop folder

Hey there: I've utilized scoop for the installation of node, gulp, and grunt; Now, I would like to move the \scoop\ directory from my current user folder C:\users\mycurrentuserfolder\scoop to C:\user\anotheruserfold ...