End to End Testing with Playwright

End to end testing with Playwright

About me ● ● ● Petar Basic Bachelor with honours in Electrical and Computer Engineering, Faculty of Technical Sciences, Novi Sad (Serbia) DevOps and Drupal engineer at

drunomics GmbH 1060 Vienna, Austria ● Wide range of creative and flexible Drupal-based publishing solutions ● Drupal & Nuxt.js <3 ● lupus digital - out-of-the-box solution ○ decoupled frontend ○ contentpool function ○ flexible page building for editors via core’s Layout-builder ○ and more… ● lupus decoupled drupal

End To End Testing ● Automated tests are a vital part of the Quality Assurance process ● Integral part of our CI pipelines ● Save time and energy, avoid repetative manual testing

Previously used - Behat Problems, downsides ● Open-source, but maintainance and support are limited ● Flaky tests ● Poor debugging experience ● Writing test experience nice to the naked eye, but sometimes not dev-friendly Upsides ● Extendable ● Existing extensions with pre-defined steps for use with Drupal ● Interacts directly with Drupal API ● PHP framework ● Encourages Behavior Driven Development (BDD)

What prompted us to change Expecting reliable, thrusworthy tests What we got: ● ● Flaky tests ○ ○ Uncertainty Time loss ○ Limited options (code debugging, headed tests, manual checks) In a CI environment Time consuming Poor debugging experience ○ ○

What we use now - Playwright “Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.” Why playwright? Related post

Capabilities - upsides ● ● ● ● ● ● ● ● ● ● ● Auto-wait Auto-retry Cross-browser - Chromium, Firefox, WebKit, Google Chrome & Microsoft Edge Cross-platform (Linux, Windows, macOS) Full isolation Tracing Powerful tooling - Codegen, Inspector, Trace Viewer Cross language (TypeScript, JavaScript, Python, .NET, Java) VRT testing Parallel execution and more…

Challenges ● Communication with Drupal API ○ from dockerized Playwright to dockerized Drupal Other (minor): ● ● ● Environment setup ○ no dotenv integrated with php autoloader ○ no existing analog for drupal specific behat extensions ○ presenting and sharing test results and reports Writing testing steps from the ground up CI setup

Communication with Drupal API ● Drush! require(‘child_process’).execSync(drush <command>); ● From container to container? ○ Docker socket + docker-cli require(‘child_process’).execSync(docker exec <container_name> bash -c 'drush <command>');

Other challenges Environment setup ● dotenv! ○ ○ prepoulate .env with needed variables process.env.<VARIABLE> Writing steps from the ground up ● ● ● Manual labor Transfer knowledge from behat Read the docs! CI setup ● ● Publish tests html report on cloudflare junit reporter available

Demo ● ● ● Typical test (headless, headed) Playwright inspector Trace viewer

Our experience so far ● ● ● ● ● ● ● ● Performance comparable with behat ○ Additional container build time with dockerized playwright ○ Seems pretty reliable and stable Don’t forget await ! Use Playwright Assertions when possible Tag tests - easily filter tests when running Use hook functions to prepare environment and cleanup after testing So far no flaky tests! Developer experience positive Debugging experience excellent

petar_basic petar.basic@drunomics.com https://drunomics.com https://github.com/drunomics/playwright-drupal-starter

Resources ● ● ● ● https://github.com/drunomics/playwright-drupal-starter https://playwright.dev https://docs.behat.org/ https://medium.com/uk-hydrographic-office/why-we-chose-playwright-over-cy press-db4770cf5204

Join us for contribution opportunities 20-23 September, 2022 Room C2 + C3 Mentored Contribution First Time Contributor Workshop General Contribution 23 September: 09:00 - 18:00 Room C2 + C3 20 September: 17:15 - 18:00 Room D9 21 September: 10:30 - 11:15 Room D9 23 September: 09:00 - 12:30 Room C2 20 - 22 September: 9:00 18:00 Room C3 23 September: 9:00 - 18:00 Room C2 + C3 #DrupalContributions

What did you think? Please fill in this session survey directly from the Mobile App.

We appreciate your feedback! Please take a moment to fill out: 1 the general conference survey Flash the QR code OR It will be sent by email 2 the Individual session surveys (located under each session description)