Confidently Fast Web Development

WEBCAST

+

Amir Rustamzadeh

Head of DX

@amirrustam

Dustin Schau

Software Engineer

@SchauDustin

Ask and up-vote questions

Q & A

www.sli.do

Event Code: cygatsby

WEBCAST

in a Nutshell

bit.ly/cy-nutshell​

Open-source, React-based framework for creating fast websites and apps.

gatsbyjs.org

Life before Cypress

However, while working on the PR, I was honestly surprised by just how many inter-related bugs were present in the code - I had to work across a few days to fix them all, even though at first I thought it would just be a matter of fixing up a few issues. But hey, they were all fixed eventually - now everything's okay, right...?

Life before Cypress was... non-ideal.

Why Cypress?

let browser = puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

describe('CSS in JS Playground', () => {
  test.concurrent(`displays '${library}' in the playground`, async () => {
    browser = await browser;
    const page = await browser.newPage();
    await page.setViewport({
      height: 600,
      width: 600
    });
    await page.goto(`http://localhost:8000/?library=${library}`);

    await page.waitForSelector(rootSelector);
    await page.waitFor(2000);
    const screenshot = await page.screenshot();

    expect(screenshot).toMatchImageSnapshot({
      customDiffConfig: {
        threshold: 0.03
      },
      customSnapshotIdentifier: library,
    });
  }, 1000 * 60 * 10); // 10 minutes
});

Source

Selenium

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:jessie-browsers
    steps:
      - checkout
      - run: mkdir test-reports
      - run:
          name: Download Selenium
          command: curl -O http://selenium-release.storage.googleapis.com/3.5/selenium-server-standalone-3.5.3.jar
      - run:
          name: Start Selenium
          command: java -jar selenium-server-standalone-3.5.3.jar -log test-reports/selenium.log
          background: true

Source

Nightwatch

These are great.

... but they're not quite what we wanted.

Picking a new library is incredibly challenging.

... so what were our reasons?

1. Closer to browser.

2. The right level of indirection / sugar.

3. Reliable CI runs

4. Crazy good DX

Life with Cypress

Make it work, make it right, make it fast.

workflows:
  version: 2
  build-test:
    jobs:
      - windows_unit_tests
      - bootstrap
      - lint:
          requires:
            - bootstrap
      - unit_tests_node8:
          <<: *ignore_docs
          requires:
            - bootstrap
      - unit_tests_node10:
          <<: *ignore_docs
          requires:
            - lint
            - unit_tests_node8
      - e2e_tests_production_runtime:
          <<: *e2e-test-workflow
      - e2e_tests_development_runtime:
          <<: *e2e-test-workflow
          <<: *e2e-test-workflow
      - e2e_tests_path-prefix:
          <<: *e2e-test-workflow

616

Changing behavior is incredibly hard.

... but I think we've done it.

e2e tests are now part of the acceptance criteria.

How can I do this myself?

I'm sure glad you asked!

Cypress, Gatsby, and CircleCI: Oh My!

Demo

Ask and up-vote questions

Q & A

www.sli.do

Event Code: cygatsby