Page MenuHomePhabricator

Add browser testing
Closed, ResolvedPublic

Description

Browser tests on several browsers, not just Chrome
Cypress supports Chrome, Firefox and Edge https://github.com/cypress-io/cypress/issues/310 https://www.cypress.io/blog/2020/02/06/introducing-firefox-and-edge-support-in-cypress-4-0/

Event Timeline

We are comparing two options: the good old Selenium (WebDriver) and the new kid on the block Cypress

Selenium

Cypress

  • All-in-one testing framework, assertion library, with mocking and stubbing, all without Selenium https://www.cypress.io/how-it-works
  • They claim it’s way faster than Selenium thanks to building their own architecture
  • It’s built in mind with modern JavaScript frameworks like Vue and React
  • They offer a dashboard which is a paid service but can be free for OSS https://www.cypress.io/oss-plan
  • Supports Chrome, MS Edge and Firefox (beta)

Both

  • Are open source
  • Generate snapshots and videos for better debugging

Assigned @Tonina_Zhelyazkova_WMDE because she knows all about it already but it does not mean she has to do everything.

PR #121

  • Installs Nightwatch (an e2e framework based on Selenium and recommended by vue-cli).
  • Changes the dummy e2e tests to run against the dummy HelloWorld component in the vue Storybook.
  • Adds configs to run cross browser testing in Saucelabs

Next steps:

  • Change the launch url from the "production" Storybook to the url Chromatic generates for each branch.
  • Make the port for local browser testing dynamic
  • Find a selector that works for both composed and single storybooks
  • Remove the dummy browser tests (test.js) once there is a browser test for the Button component
  • Write an ADR for all decisions taken
  • Write docs (displayed in the general Storybook) how to run browser tests.