Tips and Tricks for Writing Cypress Tests

Xin Wang
Test Automation Engineer - News UK

Agenda

Why Cypress?
What Cypress can't do?
Tips & Tricks
Q&A

9 months ago ...

WebdriverIO V5 VS Cypress

Why Cypress?

Great developer experience
Fast execution
Good documentation
Test runs failures can be captured
Automatically waits on commands
Cross-browser support

multiple tabs

visiting multiple domains in single test

Sauce Labs

Comparing Testing Tools Cypress -vs- Selenium Webinar

🤔 How to set up Cypress?

Create a `cypress.env.json`
Export as `CYPRESS_*`

Set up configuration:

cypress.json

🤔 How to switch between multiple configuration files?

Set an environment variable within your plugins

Pass in the CLI as `--env`

// cypress/config/cypress.dev.json

{
  "integrationFolder": "cypress/tests/helios-desktop",
  "screenshotsFolder": "cypress/screenshots/desktop"
}

// cypress/config/cypress.staging.json
{
  "baseUrl": "https://www.staging-thesun.co.uk/",
  "integrationFolder": "cypress/tests/staging",
  "screenshotsFolder": "cypress/screenshots/staging",
  "env": {
    "TEST_ARTICLE": "/tech/7257000/animal-crossing-switch"
  }
}

// cypress/config/cypress.mobile.json
{
    "integrationFolder": "cypress/tests/helios-mobile",
    "userAgent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36",
    "screenshotsFolder": "cypress/screenshots/mobile"
}

🤔 How to run a subset
of tests?

Test Filter

Cucumber tags

Create a helper function: TestFilter()

const TestFilter = (definedTags, runTest) => {
  if (Cypress.env('TEST_TAGS')) {
    const tags = Cypress.env('TEST_TAGS').split(',');
    const isFound = definedTags.some(definedTag => tags.includes(definedTag));

    if (isFound) {
      runTest();
    }
  }
};

export default TestFilter;

import TestFilter from "../support/test-filter";

TestFilter(['dev'], () => {
  it('should have the correct feed', () => {
    const teaserBlocks = data.body.blocks.filter(block => block.type === 'teaser-block');
    teaserBlocks.forEach(block => block.teasers.forEach(teaser => expect(teaser.topic.feed).to.equal(collection.feed)));
  });
});

Use it in your test

"cy:run:dev": "CYPRESS_TEST_TAGS=dev cypress run --env configFile=dev",

Export an environment variable when running the test

CYPRESS_*

🤔 How to work with iFrame?

{
  "chromeWebSecurity": false
}

1. Allow cross-origin iFrames

2. Select elements within the iFrame

cy.get

cy.find

cy.wrap

Cypress.Commands.add("clickIframeElement", selector => {
	cy.get("iframe").then($iframe => {
		const doc = $iframe.contents();
		cy.wrap(doc.find(selector))
			.first()
			.click({ force: true });
	});
});

3. Create custom commands

🤔 How to do API Testing with Cypress?

API Testing

Asserting on a request’s

body
url
headers

describe('Topics API', () => {
  let data;

  before(() => {
    cy.request('/topics').then(res => (data = res));
  });

  it('should return JSON data', () => {
    cy.request('/topics')
      .its("headers")
      .its('content-type')
      .should('include', 'application/json');
  })

  it('should have 200 status code and should not be empty', () => {
    expect(data.status).to.equal(200);
    expect(data.body.topics.length).to.be.above(0);
  });

  it('should have various topics added', () => {
    const topics = data.body.topics;
    const testSections = ['Videos', 'Fabulous', 'UK News', 'Scottish News', 'Irish News'];

    testSections.forEach(section => expect(topics.find(topic => topic.name === section)).to.exist);
  });
});

Confidence
critical paths checked

Slow

Seeding data

- Use sparingly
- critical paths
- one test per feature for the happy path

API Testing

Stubbing on a response’s

body
status
headers

No guarantee your stubbed responses match the actual data the server sends

Fast
Take control
Fake a delay

Cypress.Commands.add('mockConsentRequest', () => {
  cy.server();
  cy.route('**/consent/v2/**/*', {
    consentedToAny: true,
  });
});

Cypress.Commands.add('mockThirdPartyRequests', () => {
  cy.server();  // enable response stubbing
  // route all GET request that have a URL that matches '**/pixel.adsafeprotected.com/**/*'  and force the response to be: []
  cy.route('**/pixel.adsafeprotected.com/**/*', []); 
  cy.route('**/ib.adnxs.com/**/*', []);
  cy.route('POST', '**/ib.adnxs.com/**/*', []); 
  cy.route('POST', '**/r.skimresources.com/*', []);
  cy.route('**/c.amazon-adsystem.com/**/*', []);
  cy.route('**/api.permutive.com/*', []);
  cy.route('POST', '**/api.permutive.com/*', []);
  cy.route('POST', '**/t.skimresources.com/*', []);
  cy.route('**/securepubads.g.doubleclick.net/**/*', []);
  cy.route('POST', '**/siteintercept.qualtrics.com/*', []);
  cy.route('**/pagead2.googlesyndication.com/**/*', []);
  cy.route('**/fastlane.rubiconproject.com/**/*', []);
  cy.route('POST', '**/elb.the-ozone-project.com/**/*', []);
  cy.route('**/manifest.prod.boltdns.net/**/*', []);
});

🤔 How & When to use cy.wait()?

Wait for requests and their responses

Here is an example of aliasing a route and then waiting on it

describe('Bids and ad targeting - Desktop', () => {
  beforeEach(() => {
    cy.server();
    cy.route('**/securepubads.g.doubleclick.net/**/*').as('DFP');
    cy.visit(Cypress.env('TEST_ARTICLE'));
  });

  it('should return bids from different ad providers', () => {
    cy.wait('@DFP').then(() => {
      cy.window().then(win => {
        const adUnitBids = win.pbjs.adUnits.map((adUnit: AdUnit) => adUnit.bids);
        adUnitBids.forEach((bids: []) => expect(bids.length).to.be.greaterThan(0));
      });
    });
  });
});

Waiting on an aliased route has three advantages:

1. Tests are less flake

URL
Method
Status Code
Request Body
Request Headers
Response Body
Response Headers

3. Assert about the underlying XHR object

2. Failure messages are better

cy.get('.nextArrow--visible', {timeout: 10000}).should('be.visible');

cy.wait(10000);
cy.get('.nextArrow--visible').should('be.visible');

wait(ms) vs { timeout: ms }

cy.wait() - Debugging

Default timeout: 4000ms
Modified timeout: 10000ms

🤔 How to handle changing selectors?

CSS in JS

Problem:
Selectors break from development changes to CSS styles or JS behaviour

Solution:

Don’t target elements based on CSS attributes such as: id, class, tag
Don’t target elements that may change their textContent
Add data-* attributes to make it easier to target elements

<IconButton
    data-testid="mute-button"
    tabIndex={-1}
    onClick={() => toggleMute(volume, unMutedVolume, onChange)}
    size={ButtonSize.Small}
    stylePreset={
      volumeControlButtonStylePreset || volumeControlButtonStyleDefault
    }
  >

🤔 How to test audio/video?

Fixture

Load a fixed set of data located in a file

[
  {
    "src": "https://extras.thetimes.co.uk/web/public/2018/world-cup-alexa-breifing/assets/latest-briefing.mp3",
    "imgAlt": "test image 1",
    "title": "title 1",
    "live": false,
    "imgSrc": "https://via.placeholder.com/150",
    "captionSrc": "captions.vtt"
  },
  {
    "src": "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
    "imgAlt": "test image 2",
    "title": "title 2",
    "live": false,
    "imgSrc": "https://via.placeholder.com/150",
    "captionSrc": "captions.vtt"
  },
]

cy.get('@podcasts').then(([podcast0]) => {
  cy.get('@player').should(audio => {
    expect(audio.attr('src')).to.equal(podcast[0].src);
  });
});

cy.get('@skipNext')
  .click()
  .then(() => {
    cy.get('@podcasts').then(podcasts => {
      cy.get('@player').should(audio => {
        expect(audio.attr('src')).to.equal(podcasts[1].src);
      });
    });
});

fixtures/podcast.json

cypress test

🤔 How to verify volume set by user?

localStorage

it('should update slider volume when audio player is muted and persisted when reloaded', () => {
    cy.get('[data-testid="mute-button"]')
      .first()
      .click()
      .window()
      .then(win =>
        expect(win.localStorage.getItem('newskit-audioplayer-volume')).to.eq(
          '0',
        ),
      );

    cy.reload().then(win =>
      expect(win.localStorage.getItem('newskit-audioplayer-volume')).to.eq('0'),
    );
    cy.get('@volumeTrack').should('have.attr', 'values', '0');
  });

🤔 Can I use Cypress to do Accessibility Testing?

Accessibility

🤔 How to run tests in parallel with CircleCI?

Run tests in parallel in CircleCI

NOT Run tests in parallel

4m10s

Run tests in parallel

1m 54s

2m26s

1. Specifying a Job’s Parallelism Level

cypress_dev_e2e_tests:
    working_directory: ~/code/packages/nu-sun-web-e2e-automation
    docker:
      - image: cypress/browsers:node12.16.1-chrome80-ff73
    resource_class: 2xlarge
    parallelism: 4

2. Splitting and running tests

steps:
      - checkout:
          path: ~/code
      - attach_workspace:
          at: ~/
      - run:
          name: Run Dev Helios Desktop E2E Testing
          command: |
            export CYPRESS_NODE_ENV=dev
            export CYPRESS_TEST_TAGS=dev
            export CYPRESS_baseUrl=xxxx
            mv $(circleci tests glob cypress/tests/helios-desktop/**/*.spec.ts | circleci tests split) cypress/tmp/helios-desktop/tests || true	
            [ "$(ls -A cypress/tmp/helios-desktop/tests)" ] && npm run cy:run:dev:parallel
          when: always

See how tests are split in Artifacts

Debugging Cypress tests in CircleCI

- store_artifacts:
     path: cypress/snapshots

🤔 How to run visual tests with Cypress?

Visual Tests

Write tests


const mobileTestArticles = [
  { name: 'normal article', url: '/fabulous/10939425/weight-loss-new-cookie-diet-instagram-work' },
  { name: 'video article', url: '/tech/7904073/facebook-collections-christmas-wish-list-how' },
  { name: 'boxout article', url: '/money/10940034/energy-firms-compensation-switching-mistakes' },
  { name: 'liveblog article', url: '/sport/football/10926497/man-utd-news-live-transfer-ighalo-messi-willian-koulibaly' },
];

describe('Mobile Article Content', () => {
  mobileTestArticles.forEach(article => {
    it(`should not have visual regression issue on a ${article.name} on mobile view`, () => {
      cy.viewport('iphone-5');
      cy.mockConsentRequest();
      cy.mockThirdPartyRequests();
      cy.visit(article.url);
      cy.hideArticleElements();

      cy.matchImageSnapshot();
    });
  });
});

Run tests

Baseline:
If running tests in CI, create a Docker image to simulate your CI setup, for example, the node and Cypress version. This helps to eliminate visual differences caused by different versions between CI and local machine.
Second time: _diff_output folder

🤔 Does Cypress support other languages?

Typescript

References:

https://cucumber.io/docs/cucumber/api/#running-a-subset-of-scenarios

https://www.mariedrake.com/post/using-tags-to-filter-your-cypress-tests

https://circleci.com/docs/2.0/parallelism-faster-jobs/

Questions?

Join our UK Meetup Group...

Cypress.io UK

Community

Tips and Tricks for Writing Cypress Tests

By Xin Wang

Tips and Tricks for Writing Cypress Tests

1,381

Tips and Tricks for Writing Cypress Tests

Agenda

Why Cypress?

Comparing Testing Tools Cypress -vs- Selenium Webinar

🤔 How to set up Cypress?

Set up configuration:

🤔 How to switch between multiple configuration files?

🤔 How to run a subset of tests?

Test Filter

🤔 How to work with iFrame?

🤔 How to do API Testing with Cypress?

API Testing

API Testing

🤔 How & When to use cy.wait()?

Wait for requests and their responses

Waiting on an aliased route has three advantages:

wait(ms) vs { timeout: ms }

🤔 How to handle changing selectors?

CSS in JS

🤔 How to test audio/video?

Fixture

🤔 How to verify volume set by user?

localStorage

🤔 Can I use Cypress to do Accessibility Testing?

Accessibility

🤔 How to run tests in parallel with CircleCI?

Run tests in parallel in CircleCI

1. Specifying a Job’s Parallelism Level

2. Splitting and running tests

Debugging Cypress tests in CircleCI

🤔 How to run visual tests with Cypress?

Visual Tests

🤔 Does Cypress support other languages?

Typescript

References:

Questions?

Tips and Tricks for Writing Cypress Tests

🤔 How to run a subset
of tests?