Sitemap
Noon

Teaching students in 8 million students in 8 countries currently, we’re scaling to teach 50 millions students by 2023 globally.

Follow publication

E2E testing with Cypress & Bitbucket Pipelines

7 min readJun 20, 2021

--

Cypress and bitbucket logo graphic

What is E2E testing, (feat. Cypress)?

Getting started with Cypress

yarn add cypress
yarn cypress:open
yarn cypress:run
yarn cypress run --record --key PRODUCT_KEY
{
chromeWebSecurity: false,
baseUrl: '<http://localhost:2020>',
userAgent: 'testing',
blockHosts: ['*.google.com'],
projectId: '',
}

Writing test cases

Challenges I faced, and Solutions

1. Separate environment config (local dev, qa, dev remote)

module.exports = (on, config) => {
const file = config.env.configFile || 'development';
return readConfigFile(file);
};

2. Testing third party iFrames

cy.iframe('#cardNumber').find('#checkout-frames-card-number').type('1234567890123456').should('have.value', '1234 5678 9012 3456');

3. Testing multiple flow on same page

beforeEach(() => {
cy.restoreLocalStorage();
}); afterEach(() => {
cy.saveLocalStorage();
});

4. Login details, page input value repeated in multiple test files

cy.fixture(‘phone-number’).then((phoneNumber) => {
console.log(phoneNumber);
});

5. Registering service worker

if (navigator.userAgent.indexOf('testing-mode') > -1) {
console.log('execute me');
} else {
console.log("i don't like e2e testing");
}

6. Handling exceptions

Cypress.on('uncaught:exception', (err, runnable) =>
false,
);

7. Validate Audio Input With Cypress

on('before:browser:launch', (browser = {}, launchOptions) => {
if (browser.family === 'chromium') {
launchOptions.args.push('--use-fake-device-for-media-stream');
launchOptions.args.push('--use-fake-ui-for-media-stream');
launchOptions.args.push('--no-sandbox');
launchOptions.args.push('--use-file-for-fake-audio-capture=cypress/fixtures/classroom-audio.wav');
}
return launchOptions;
});

How to setup bitbucket pipeline for cypress

image: cypress/base:10pipelines:
pull-requests:
'**':
- step:
name: "E2E (Cypress) test"
caches:
- yarn
- cypress
- node
script:
- yarn install --frozen-lockfile
- yarn start-server-and-test start [<http://localhost:2020>](<http://localhost:2020/>) cypress run --record --key PRODUCT_KEY
definitions:
caches:
yarn: $HOME/.cache
cypress: $HOME/.cache/Cypress

End notes

--

--

Noon
Noon

Published in Noon

Teaching students in 8 million students in 8 countries currently, we’re scaling to teach 50 millions students by 2023 globally.

Mahipatsinh Jadav
Mahipatsinh Jadav

Written by Mahipatsinh Jadav

A proficient JavaScript engineer with expertise in React, Angular, and Node.js. Delivers clean, efficient code for dynamic web applications.

No responses yet