QA or the Highway 2022 Session, Eran Kinsbruner Selecting test automation frameworks for web and mobile apps

1. HowtoMake Market-
DrivenDecisionsfor
AutomationFrameworks
E r a n K i n s b r u n e r

2. © Perforce Software, Inc.
Presenter
• 22+ years of experience in software development & testing
• Inventor, author, speaker, blogger
Social
: @ek121268
: https://www.linkedin.com/in/erankinsbruner/
Blog : continuoustesting.dev/
Eran Kinsbruner
DevOps Chief Evangelist
& Sr. Director
Perforce Software, Perfecto
Author of
• The Digital Quality Handbook
• Continuous Testing for DevOps Professionals
• Accelerating Software Quality
• A Front-End Web Developer’s Guide to Testing
My List of Books on Digital Quality

3. Twitter
LinkedIn
Facebook
Connecting with the Cypress Community
Discord
Web
www.cypress.io
Social

4. Digital Apps Are Transforming
Apple AppClips
PWA
RWD
flutter
Single Code Base Apps
Rich UX built-in within Apps

5. Web & Mobile Landscape
MOBILE WEB

6. 6
New Chrome DevTools Recorder & Export to Cypress

7. perfecto.io
7 | Perfecto by Perforce © Perforce Software, Inc.
Support all testing types
•Functional
•Accessibility
•Network Control
•Visual
•Mocking services/Test Data
•API
•BDD
•Advanced Use Cases
•Multi Tabs
•Biometrics, etc.
Supported Platforms and Languages
•Web/Mobile
•Java/JS/C#/Python…
CI/CD Integration
Reporting abilities
•Dashboards
•Code coverage
Test Stabilization abilities
•Object inspector
•Retry mechanism
•Flaky tests flagging
•Recorder (On DOM level)
WhataretheCriteriaforaWinningTestAutomation Framework
Source

8. Cross-Browser
Testing

9. Cross-Browser Testing Trends&Power Shifts

10. Cross-Browser Testing Tools (Open-Source/JS)
Source: npmtrends

11. WebTestFrameworks–SupportedLanguages

12. Playwright

13. © Perforce Software, Inc.
Playwright Architecture
Source: Andrey Lushnikov, Principal Software Engineer, Microsoft

14. Getting Started WithPlaywright
const { test, expect } = require('@playwright/test');
test('basic test', async ({ page }) => {
await page.goto('https://github.com/login');
await page.fill('input[name="login"]', 'USER NAME');
await page.fill('input[name="password"]', 'PASSWORD');
await page.click('text=Sign in');
});
npm install -D @playwright/test
npx playwright install

15. PlaywrightFramework
https://playwright.dev/docs/languages/
const { chromium } = require('playwright');
//to launch the headful browser for firefox and webkit, replace chromium by firefox and webkit
const browser = await chromium.launch({ headless: false });

16. PlaywrightFramework–AdvancedConfigurationandBuilt-InParallelTesting
Framework Annotations – Skipped Tests
Framework Config Options – Ignore Test Specs

17. PlaywrightFramework–EmulatingMobileDevices

18. PlaywrightFramework–TraceViewer
npx playwright show-trace trace.zip
Enable it in Playwright config file:
Use: {
Trace: ' on',
},

19. PlaywrightFramework–APITestingSupport

20. PlaywrightwithContinuousIntegration
https://playwright.dev/docs/ci

21. npx playwright codegen [website under test URL], e.g., packtpub.com
Playwright Low CodeSolution
https://playwright.dev/docs/codegen

22. Playwright Framework-CodeGen

23. Cypress

24. Cypress Key Benefits
Cypress Tests Run in the Browser
npm install cypress –save-dev

25. CypressCapabilities–HandleFlakyTests
Cypress Retries and Flaky Tests
Cypress.json file

26. CypressCapabilities –Tests Across MultipleEnv.
npx cypress open --env version="prod"
https://filiphric.com/create-a-configuration-plugin-in-cypress

27. Cypress Advanced Use Cases
Cypress Work with multiple origins (cy.origin)
https://docs.cypress.io/api/commands/origin#Syntax

28. CypressCapabilities–HandleFlakyTests
Cypress DOM tree Scanning
https://glebbahmutov.com/cypress-examples/9.6.0/commands/traversal.html#children
.eq()- get a DOM element at a specific index
.closest()
.children()
.filter() - get DOM elements that match a specific select

29. Cypress Advanced Use Cases
Cypress Visual Testing
https://github.com/happo/happo-cypress
npm install --save-dev happo-cypress happo-e2e happo.io

30. CypressAdvanced UseCases
Cypress Continuous Integration Capabilities
https://docs.cypress.io/guides/continuous-integration/introduction

31. CypressAdvanced UseCases
Cypress For API Testing

32. Cypress Advanced Use Cases
Cypress For Code Coverage Analysis
https://istanbul.js.org/ https://github.com/cypress-io/code-coverage
Code instrumentation Plugin
https://docs.cypress.io/guides/tooling/code-coverage#Introduction

33. CypressAdvancedUse Cases
Component Testing: Middle Layer Between Unit & Integration Tests
Source: Amir Rustamzadeh, Director of Developer Experience (DX), Cypress

34. CypressAdvancedUse Cases
Component Testing: Middle Layer Between Unit & Integration Tests
Source: https://docs.cypress.io/guides/component-testing/introduction#Getting-Started

35. CypressStudio (Beta)–TestRecorder
https://docs.cypress.io/guides/core-concepts/cypress-studio

36. Cypress Plugins
Custom
Commands
Component
Testing
Code
Coverage
Visual
Testing
Email
Testing
A11Y Testing
(deque AXE)
API
Testing
Cucumber

37. Selenium

38. SELENIUM 4 Features
New Grid Architecture Relative Locators

39. W3CCodeChangesImplications- Example

40. SELENIUM 4Features
Enhanced Windows and Tab Automation Chrome Debugging Protocol Integration
Emulate Geo Location

41. SupportforRelativeLocators

42. SupportforMultipleTabs&Windows
https://www.selenium.dev/documentation/webdriver/browser/windows/

43. SELENIUM 4Features
W3C Compliance
New Selenium IDE

44. © Perforce Software, Inc.
APPENDIX – Mobile
App Testing

45. Thank You
Visit perfecto.io or follow us @perfectomobile