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

And it has changed the way it is tested!

Software Development Is Evolving

Trends That are Accelerating Shift Left

The case for early pipeline testing

4

Processes DevOps → Developers Testing More React and Angular → Future of Web Chrome as Best First Check Tools JS Frameworks for WebDriver Components → Integration Testing Lighter Infrastructure Options

New Testing = New Pyramid

Not All Tests are Created Equal

Production

E2E TEST

• API testing
• Regression

testing

• Performance

testing

DEPLOY

• Smoke test
• Security testing
• User acceptance

testing

• Visual Testing

OPERATE

• Production

testing

• Monitoring
• Debugging
• Smoke testing

Local Dev Environments

PLAN

• Feature definition
• Test authoring
• TDD

CODE

• Unit test
• Component test

Shared Delivery Pipeline

POST COMMIT

• Component

Tests

• UI Tests
• Sanity Checks

MERGE

INTEGRATE

• Integration tests

New Challenges

• Cultural shift
• Sharing resources
• Context switching

• 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

How Important is the Cultural Shift?

Spoiler Alert: Really Important!

Developer Workflows

Javascript Unit Testing WebDriverIO Nightwatch CI/CD Pipeline

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 WRITE CODE TEST IT LOCALLY SUBMIT PR

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 = 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

Headless Browsers Emerge As Solution

What is a Headless Browser?

Vs. VM GUI BROWSER

Containerize It!

Integrate Headless into your Testing Strategy

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

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

Production

E2E TEST

• API testing
• Regression

testing

• Performance

testing

DEPLOY

• Smoke test
• Security testing
• User acceptance

testing

• Visual Testing

OPERATE

• Production

testing

• Monitoring
• Debugging
• Smoke testing

Local Dev Environments

PLAN

• Feature definition
• Test authoring
• TDD

CODE

• Unit test
• Component test

Shared Delivery Pipeline

POST COMMIT

• Component

Tests

• UI Tests
• Sanity Checks

MERGE

INTEGRATE

• Integration tests

Thank You!