Selenium Tests at the Speed of Headless Presented by: - PDF document

¡ ¡ AW12 ¡ Agile ¡and ¡Continuous ¡Testing ¡ Wednesday, ¡November ¡6th, ¡2019 ¡11:45 ¡AM ¡ ¡ ¡ ¡ ¡ Selenium ¡Tests ¡at ¡the ¡Speed ¡of ¡ Headless ¡ ¡ Presented ¡by: ¡ ¡ ¡ ¡ Alissa ¡Lydon ¡ ¡ Sauce ¡Labs ¡ ¡ Brought ¡to ¡you ¡by: ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ 888 -­‑-­‑-­‑ 268 -­‑-­‑-­‑ 8770 ¡ ·√·√ ¡904 -­‑-­‑-­‑ 278 -­‑-­‑-­‑ 0524 ¡-­‑ ¡info@techwell.com ¡ ¡ https://agiledevopseast.techwell.com/ ¡ ¡ ¡

¡ ¡ ¡ ¡ Alissa ¡Lydon ¡ ¡ Alissa ¡Lydon ¡is ¡a ¡product ¡marketing ¡manager ¡at ¡Sauce ¡Labs. ¡During ¡her ¡four ¡years ¡at ¡ Sauce, ¡she ¡has ¡worked ¡with ¡companies ¡of ¡all ¡sizes ¡in ¡their ¡journey ¡to ¡automation ¡ and ¡continuous ¡testing. ¡From ¡educating ¡potential ¡customers ¡about ¡the ¡benefits ¡of ¡ test ¡automation ¡to ¡organizing ¡educational ¡events ¡for ¡QA ¡and ¡development ¡teams ¡ about ¡industry ¡best ¡practices, ¡her ¡goal ¡is ¡to ¡leverage ¡her ¡experiences ¡with ¡Sauce ¡ Labs’ ¡customers ¡to ¡spread ¡the ¡word ¡about ¡how ¡others ¡can ¡succeed ¡with ¡testing. ¡ Outside ¡of ¡work, ¡you ¡can ¡find ¡her ¡cuddling ¡with ¡her ¡dog, ¡traveling ¡to ¡faraway ¡lands ¡ with ¡her ¡family, ¡or ¡catching ¡a ¡baseball ¡game ¡(Go ¡A’s!). ¡ ¡

Selenium at the Speed of Headless Alissa Lydon Sauce Labs

Agenda 1. Outline the market trends that have lead to the rise of headless testing 2. Discuss key use cases for headless tests 3. Offer framework for integrating headless browsers into your larger continuous testing pipeline Alissa Lydon alydon@saucelabs.com @habes06

Software Development Is Evolving And it has changed the way it is tested!

Trends That are Accelerating Shift Left The case for early pipeline testing Processes Tools DevOps → Developers Testing More JS Frameworks for WebDriver React and Angular → Future of Web Components → Integration Testing Chrome as Best First Check Lighter Infrastructure Options 4

New Testing = New Pyramid

Not All Tests are Created Equal Local Dev Environments Shared Delivery Pipeline Production POST COMMIT PLAN CODE INTEGRATE E2E TEST DEPLOY OPERATE • Feature definition • Integration tests • API testing • Smoke test • Production • Component • Unit test MERGE testing Tests • Test authoring • Regression • Security testing • Component test testing • Monitoring • UI Tests • TDD • User acceptance • Performance testing • Debugging • Sanity Checks testing • Visual Testing • Smoke testing New Challenges ● Cultural shift ● Sharing resources ● Context switching

How Important is the Cultural Shift? Spoiler Alert: Really Important! ● Time-based testing → Event-based testing ● Once differing priorities now merging together ● QA poised to take a leadership role ● Great experience with testing is critical to gaining trust

Developer Workflows WRITE CODE TEST IT LOCALLY SUBMIT PR Javascript WebDriverIO CI/CD Pipeline Unit Testing Nightwatch Challenges With Early Pipeline Testing: ● Developers aren’t familiar with writing E2E tests in languages they don’t know. ● Sharing resources with QA→ throttling ● Infrastructure options are too expensive to justify this kind of change, and don’t give them what they need to maintain release velocity

We Know This Challenge • Because Sauce Labs had it.. • We needed a way to reliably ship our code faster • So we built the first iteration of our headless infrastructure to execute early pipeline tests • Developers get end to end (e2e) test feedback much earlier • As our architecture evolves and development velocity increases, the market is asking for the same thing

Headless Browsers Emerge As Solution • Headless browsers = fast browsers • Run without any UI • Cost-effective option • Chrome and Firefox only • Ideal choice for early pipeline testing • Get fast feedback on the quality of your code • Find bugs when they are easier and cheaper to fix • Not waiting on QA to report bugs back

What is a Headless Browser? VM GUI BROWSER Vs.

Containerize It!

Integrate Headless into your Testing Strategy Where in your pipeline? Which Tests? Every PR in shared dev env. Atomic, autonomous, short tests Sanity check Parallelize well and quick feedback Scalable infrastructure for “Shift Left” Integration test for components

Use Case - In Context Component Level Testing We communicate with our users via a modal-style dialogue on 17 different pages of our web application:

Use Case - In Context Component Level Testing We want to change 14 of those pages to a more convenient flyout dialogue box:

Use Case - Window Resizing

What is Headless Not Designed to Do? • Replace e2e cross-browser tests • To run rich debugging or replicate bugs found in production • Run unreliable, new tests that are not able to provide immediate feedback • Replace the tests you are running on a real browser

The Complete Continuous Testing Pipeline Local Dev Environments Shared Delivery Pipeline Production POST COMMIT PLAN CODE INTEGRATE E2E TEST DEPLOY OPERATE • Feature definition • Integration tests • API testing • Smoke test • Production • Component • Unit test MERGE testing Tests • Test authoring • Regression • Security testing • Component test testing • Monitoring • UI Tests • TDD • User acceptance • Performance testing • Debugging • Sanity Checks testing • Visual Testing • Smoke testing

Thank You!