CODEWITHSUNDEEP
cypress
Boris K
Boris K

Reputation: 3580

Cypress: can't log in in the Cypress browser

I'm trying to set up E2E testing of a Vue application with Cypress.

I can log into the app with my regular Chrome browser. However, the browser opened up by Chrome won't let me log in. Both the automatic login via Cypress and manual login fail.

Is there a setting I'm missing?

My Vue element:

<template>
    <div class="d-flex justify-content-center">

            <div class="field is-horizontal">
                <div class="field-label is-normal">
                    <label class="label">Username</label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <input v-model="username" class="input" type="text"
                                   placeholder="Your username">
                        </div>
                    </div>
                </div>
            </div>
            <div class="field is-horizontal">
                <div class="field-label is-normal">
                    <label class="label">Password</label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <input v-model="password" class="input" type="password"
                                   placeholder="Your password">
                        </div>
                    </div>
                </div>
            </div>
            <div class="field is-horizontal">
                <div class="field-label">
                    <!-- Left empty for spacing -->
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control text-center">
                            <button v-on:click="login()" class="button is-primary">
                                Login
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

My test file:

describe('Logging in', () => {
    it('Logs in as admin', () => {
        cy.visit('/')
            .get('input[type="text"]')
            .type('Admin')
            .get('input[type="password"]')
            .type('Pass1234')
            .get('button').click()
            .location().should((loc) => {
            expect(loc.pathname).to.eq('/dashboard-main/dashboard');
        })
    })
})

Update: some suggestions here: https://github.com/cypress-io/cypress/issues/1759#issuecomment-391729559

Upvotes: 2

Views: 1644

Answers (2)

Mahmoud Saber
Mahmoud Saber

Reputation: 1

I think the problem related to browser , the browser shows pop-up said (" change your password") or like this at all , try to click on the pop-up ok button using Cypress code and it will works .

Upvotes: 0

DavidZ
DavidZ

Reputation: 559

Do you get to see anything during the e2e test when it runs? Like Cypress typing in that fields?

Besides the fact that I wouldn't use very generic locators, I would stop in the .click() and then check the new path with cy.url()

Upvotes: 1

Related Questions