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: 1620

Answers (1)

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