Frequently, cypress encounters difficulty accessing the /auth page and struggles to locate the necessary id or class

Question

Frequently, cypress encounters difficulty accessing the /auth page and struggles to locate the necessary id or class

When trying to navigate to the /auth path and log in with Cypress, I am using the following code:

Cypress.Commands.add('login', (email, password) => {
  cy.get('.auth').find('.login').should(($login) => {
    expect($login).to.contain('auth.welcome')
  })

  cy.get('[name="email"]').type(email);
  cy.get('[name="password"]').type(password);

  cy.get('button.login')
    .click();
})

Despite this, Cypress throws an error message:

AssertionError: Timed out retrying: Expected to find element: `.auth`, but never found it.

The code works intermittently.

The URL for my login page is either http://localhost:3000/ or http://localhost:3000/auth

javascript vue.js cypress

Answer 1

Answer №1

Make sure to include this code snippet before interacting with the element:

cy.get('.auth').should('be.visible');

This command will ensure that the element is visible before proceeding.

Answer 2

Make sure to include this code snippet before interacting with the element:

cy.get('.auth').should('be.visible');

This command will ensure that the element is visible before proceeding.

Answer 3

Answer №2

Utilizing custom commands can be a valuable tool, but packing multiple UI actions within them can result in slower and less reliable test executions, especially when it comes to login functions.

While your current approach is valid, I would recommend utilizing API calls instead for a more stable and robust login function.

To implement this, you can add a custom command in Cypress like so:
Cypress.Commands.add('login', (username, password) => {
    return cy
        .request('POST', `${<YOUR_API_URL>}/auth`, {
            username,
            password,
        })
        .its('body.token')
        .then(token => {
            cy.visit(`/`, {
                onBeforeLoad(win) {
                    win.sessionStorage.setItem('token', token);
                },
            });
        });
});

Answer 4

Utilizing custom commands can be a valuable tool, but packing multiple UI actions within them can result in slower and less reliable test executions, especially when it comes to login functions.

While your current approach is valid, I would recommend utilizing API calls instead for a more stable and robust login function.

To implement this, you can add a custom command in Cypress like so:
Cypress.Commands.add('login', (username, password) => {
    return cy
        .request('POST', `${<YOUR_API_URL>}/auth`, {
            username,
            password,
        })
        .its('body.token')
        .then(token => {
            cy.visit(`/`, {
                onBeforeLoad(win) {
                    win.sessionStorage.setItem('token', token);
                },
            });
        });
});

Frequently, cypress encounters difficulty accessing the /auth page and struggles to locate the necessary id or class

Answer №1

Answer №2

Similar questions

Dragging objects on a map is done using jQuery and it causes them to bounce

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

Clicking on a dynamically generated link will not result in the file being downloaded

Arranging a list based on the child property in a React component

Google Extension PHP Plugin

I'm facing an issue where the data I retrieved is not displaying properly in my template within nuxt 3

Ruby on Rails allows for the selection of values in a dropdown menu to trigger the visibility of different sections of HTML

Tips on customizing the appearance of two Material-UI Sliders across separate components

Acquire the content of an interactive website with Python without using the onclick event

The auto-refresh feature of DataTables is not functioning as expected

Is there a way to execute a Node 6 npm package within a Node 5.6.0 environment?

The act of exporting an enum from a user-defined TypeScript path leads to the error message "Module not

I would like the capability to choose a roster of gods depending on a character's class and moral orientation

The files being requested by jQuery Slimbox are not being retrieved properly

How to manually trigger the ajaxLoader feature in Tabulator version 3.5

What is the best method for typing a component prop that is compatible with singular use and can also function within loops without disrupting intellisense?

Problem with nesting lists in VueDraggable

The declaration file for the module 'bootstrap/dist/js/bootstrap' could not be located

Send the input's value to v-model