Prompt login with cypress

Question

currently I cannot find a way to insert username and password to a prompt window to login in page using cypress:

login prompt window

does anyone could help me with it? any help is welcome, thanks!

Answer 1

Let say your testing website is www.yourtestingwebsite.com and your username=username password=password
Your script should be like this if they prompt upon loading your testing site. cy.visit('https://username:[email protected]')

Else,

your may just use cy.visit ('/') in your test.js file but do include following inside your integration/command.js file:

// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) 
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options)             
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from
    // failing the test
    return false
});

Cypress.Commands.overwrite('visit', async (orig, url, options) => {
    let localBool = Cypress.config().baseUrl.includes('local');
    if (!localBool) {
        const auth = {
            username: 'username',
            password: 'password'
        };

        if (options) {
            options.auth = auth;
        } else {
            options = { auth };
        }
    }

    return await orig(url, options);
});

Answer 2

You do this in two chained steps. First you need to get hold of your input. The easiest is usually by name, then use the type() method to enter some data, so...

//html
<input type='text' name='username'/>

// test script
cy.get('input[name="username"]').type('[email protected]')