Skip to content

Instantly share code, notes, and snippets.

@mikamboo
Last active November 30, 2020 15:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikamboo/7eec04b08ecb64e80145c045a24c7d12 to your computer and use it in GitHub Desktop.
Save mikamboo/7eec04b08ecb64e80145c045a24c7d12 to your computer and use it in GitHub Desktop.
E2E Testing Solutions

Interesting projects

  1. Puppeteer
  2. Cypress.io
  3. Playwright
  4. Headless Recorder

Puppeteer features

yarn add puppeteer --dev
  • Generate screenshots and PDFs of pages.
  • Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues.
  • Test Chrome Extensions.

Cypress features

yarn add cypress --dev
  • Time Travel: Cypress takes snapshots as your tests run.
  • Debuggability: Stop guessing why your tests are failing
  • Automatic Waiting: Never add waits or sleeps to your tests.
  • Spies, Stubs, and Clocks: Verify and control the behavior of functions, server responses, or timers.
  • Network Traffic Control: Easily control, stub, and test edge cases without involving your server.
  • Consistent Results: The architecture doesn’t use Selenium or WebDriver.
  • Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
  • Cross browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and optimally in a Continuous Integration pipeline.

Playwright features

Playwright is built to automate the broad and growing set of web browser capabilities used by Single Page Apps and Progressive Web Apps.

  • Scenarios that span multiple page, domains and iframes
  • Auto-wait for elements to be ready before executing actions (like click, fill)
  • Intercept network activity for stubbing and mocking network requests
  • Emulate mobile devices, geolocation, permissions
  • Support for web components via shadow-piercing selectors
  • Native input events for mouse and keyboard
  • Upload and download files

Headless Recorder features

To install Headless Recorder, go to the Chrome Webstore and install it

  • Records clicks and type events.
  • Records form entries like dropdowns, radio buttons, checkboxes etc.
  • Records screenshots.
  • Adds waitForNavigation, setViewport/setViewportSize and other useful clauses.
  • Generates a Puppeteer or Playwright script, ready for copy & pasting.
  • Shows which events are being recorded.
  • Offers configuration options to tweak the generated code.
  • Is open source. Check the code on the GitHub repo!
@mikamboo
Copy link
Author

CMO : E2E

POC : Mise en place des tests End To End (e2e).

Objectif : Atomatiser le test de la création d'une CMO.

Benchmark solution E2E : https://gist.github.com/mikamboo/7eec04b08ecb64e80145c045a24c7d12

Stack

Nous utiliserons :

  • Cypress : Est une solution très populaire dans le monde du test E2E.

Installation

Cypress est un projet nodejs qui peut s'ajouter simplement en une commande :

yarn add cypress --dev

Plus de détails dans la doc officielle

Mise en place des test

Mode DEV

  1. Sur le projet ajouter la ligne "cypress:open": "cypress open" dans la sections scripts du package.json.
  2. Lancer cypress avec la commande yar rnu cypress:open

Mode CI

Sur un environnement CI/CD n à plus d'interface graphique pour gérer les tests.
Tout doit se faire en mode serveur et en particulier l’environnement navigateur est exécuté en mode headless (sans UI).

//TODO :

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment