TheLazy.Dev
Portfolio GitHub

Blog

laravel |php |cypress

Test Laravel Breeze Authentication with Cypress

arielmejiadev

Ariel Mejia

Posted on October 18, 2022

Test Laravel Breeze Authentication with Cypress

This post is showing some examples that are pretty easy to add to any Laravel project that use Laravel Breeze.

In order to use the full example you should require to use the Laracast/Cypress package.

Here a login example:

Take in mind that the default user factories from Laravel sets user password generated by factories as "password":

describe('Authentication test', () => {
    it('tests a success manual authentication with the login form', () => {
        cy.visit(`/login`);

        cy.php(`
            App\\Models\\User::factory()->create(['email', 'john@doe.com']);
        `).then(user => {
            cy.get('input[type="email"]').type(user.email);
            cy.get('input[type="password"]').type('password');
        });

        cy.get('button[type="submit"]').click();

        cy.location('pathname').should('equal', '/dashboard');
    });
});
Enter fullscreen mode Exit fullscreen mode

Some interesting ideas could be:

Test http status code 

cy.request('http://localhost:8000/dashboard').then((response) => expect(response.status).to.eq(200));
Enter fullscreen mode Exit fullscreen mode

Test a middleware 

// visit a url
cy.visit('http://localhost:8000/dashboard');
// check the next url location
cy.url().should('match', /login);
Enter fullscreen mode Exit fullscreen mode

Sometimes you require to test a larger workflow like logout and then check that some middleware works...

cy.visit('/logout') // I got you cover, it would do the magic
Enter fullscreen mode Exit fullscreen mode

Check some content

Take in mind that you should avoid testing texts that could be escaped, with that said, you can test something like a welcome message in the /dashboard url.

cy.contains('Welcome');
Enter fullscreen mode Exit fullscreen mode

Or even better, use the PHP method or the login helper to test exactly the current user welcome message:

cy.login({ email: 'john@doe.com', name: 'John Doe' });
cy.visit('/dashboard').contains('Welcome Back, John Doe');
Enter fullscreen mode Exit fullscreen mode

Hopefully this little examples, helps to provide enough guide to create you own tests for your applications.

💖 💪 🙅 🚩
arielmejiadev
Ariel Mejia

Posted on October 18, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Test Laravel Breeze Authentication with Cypress
laravel Test Laravel Breeze Authentication with Cypress

October 18, 2022