Easy E2E Testing with Cypress.io

Javier Villanueva

MageTestFest 2019

About me...

Javier Villanueva

@jahvi

http://jahvi.com

javier@medialounge.co.uk

Testing can be hard...

E2E

UNIT

INTEGRATION

Increasing scope

More confidence

Faster

Better isolation

What is Cypress.io?

Fast, easy and reliable testing for anything that runs in a browser

Time Travel

Easy to Debug

Real time reloads

Automatic waiting

Best Features

CLI

beforeEach(() => {
    cy.viewport(1440, 900);
    cy.visit('https://magento.test/');
});

context('Checkout', () => {
    it('can purchase product from homepage', () => {
        cy.get('.block-products-list').scrollIntoView();
        cy.get('.block-products-list').contains('Add to Cart').click();

        cy.get('.message-success')
            .invoke('text')
            .should('match', /You added (.*) to your shopping cart/);

        //...

        cy.get('input[name="firstname"]').type('Test');
        cy.get('input[name="lastname"]').type('Test');
        cy.get('select[name="region_id"]').select('Florida');
        cy.get('.action.checkout').click();

        //...

        cy.get('.page-title').should('contain', 'Thank you for your purchase');
    });
});

context('Quick buy', () => {
    it('can add product to cart from category page', () => {
        cy.server();
        cy.route('POST', '**/checkout/cart/add/**').as('addToCart');
        cy.wait('@addToCart');

        // Run assertions
    });
});

Best Practices

Focus on strong tests

Repeatable

Independent

Use data-* attributes as selectors

<button id="main" class="btn btn-large" data-testid="submitBtn">Submit</button>
cy.get('button').click();
cy.get('.btn.btn-large').click();
cy.get('#main').click();
cy.contains('Submit').click();
cy.get('[data-testid="submitBtn"]').click();

Consider conditonal testing

beforeEach(() => {
    cy.setCookie('theme', 'a');
});

context('Button', () => {
    it('can be clicked', () => {
        cy.get('[data-testid="buttonA"]').click();
    });
});
beforeEach(() => {
    cy.setCookie('theme', 'b');
});

context('Button', () => {
    it('can be clicked', () => {
        cy.get('[data-testid="buttonB"]').click();
    });
});

Variant A

Variant B

Reuse tests liberally

context('Login', () => {
    it('can login to backend', () => {
        cy.visit('https://magento.test/admin');

        cy.get('#username').type('admin');
        cy.get('#login').type('123123a{enter}');

        cy.get('.page-title').should('contain', 'Dashboard');
    });
});
context('Product', () => {
    it('can show products in the product grid', () => {
        cy.visit('https://magento.test/admin');

        cy.get('#username').type('admin');
        cy.get('#login').type('123123a{enter}');

        cy.server();
        cy.route('GET', '**/admin/mui/index/**/**product_listing**').as(
            'renderProducts'
        );

        cy.get('.item-catalog > a').click();
        cy.get('.item-catalog-products > a').click();

        cy.wait('@renderProducts');

        cy.get('[data-role="grid-wrapper"] .data-row')
            .its('length')
            .should('be.gte', 1);
    });
});
Cypress.Commands.add('login', (username, password) => {
    cy.visit('https://magento.test/admin');

    cy.get('#username').type(username);
    cy.get('#login').type(password);
});

Commands

context('Product', () => {
    beforeEach(() => {
        cy.login('admin', '123123a{enter}');
    });

    it('can show products in the product grid', () => {
        cy.server();
        cy.route('GET', '**/admin/mui/index/**/**product_listing**').as(
            'renderProducts'
        );

        cy.get('.item-catalog-products > a').click({ force: true });

        cy.wait('@renderProducts');

        cy.get('[data-role="grid-wrapper"] .data-row')
            .its('length')
            .should('be.gte', 1);
    });
});

Not everything needs testing

Additional Features

  • Parallelisation
  • CI / CD Integration
  • Screenshot / Video Recordings
  • Dashboard Service
  • Install Browser Extensions

Limitations

  • Limited <iframe> support
  • Can't run multiple tabs at the same time
  • Can't interact directly with some browser UI elements 
  • Browser support *

Alternatives

TL;DR

Focus on real tests, tools like Cypress will help make this easier.

Thank you!

E2E Testing with Cypress.io

By Javier Villanueva

E2E Testing with Cypress.io

Presentation for MageTestFest 2019

  • 1,519