SlideShare ist ein Scribd-Unternehmen logo

Der Tod der Testpyramide? – Frontend-Testing mit Playwright

Codineers Rosenheim Meetup, 2. November 2023 (Dominik Haas, QAware) Wer kennt es nicht: Langsame, instabile und wartungsintensive Tests von Frontends und die Schmerzen damit. Aber in den letzten Jahren und Monaten hat sich hier viel getan und Playwright ist der vielversprechende neue Stern der Web-Automatisierung. Ich werde in meinem Talk über das Testen von Frontends sprechen und speziell auf Playwright als spannendes Werkzeug eingehen. Neben der praktischen Einführung möchte ich auch mit Euch über Best Practices sprechen und einen Versuch wagen die Testpyramide zu töten (oder sie zumindest etwas zu beschädigen).

1 von 34
Downloaden Sie, um offline zu lesen
qaware.de
Frontend-Testing mit Playwright
Der Tod der
Testpyramide?
Dominik Haas | dominik.haas@qaware.de | Head of Division & Lead Software Architect
1. Frontend-Testing
2. Playwright
3. Best Practices
4. Tod der Testpyramide!
1. Frontend-Testing
2. Playwright
3. Best Practices
4. Tod der Testpyramide!
Beim Frontend-Testing* automatisieren wir den
Browser und simulieren unseren Benutzer.
4
*aka E2E-Testing
Vorteile
■ So nah am Nutzer wie möglich
■ Testet alle Bestandteile unseres Codes
Nachteile
■ Langsamer
■ Unzuverlässiger
■ Schwieriger zu schreiben (Kosten?)
■ Wartungsintensiver (Kosten?)
Frontend Service DB
Service
TEST
Wegen Aufwand, Zeit und Kosten hat sich die
Testpyramide etabliert.
5
Quelle: https://en.wikipedia.org/wiki/Test_automation
Wenig Frontend-Tests
Unit-Tests als breite Basis,
Großteil der fachlichen Absicherung
1. Frontend-Testing
2. Playwright
3. Best Practices
4. Tod der Testpyramide!
Basics
Playwright - die wichtigsten Kriterien
■ Cross-browser (& cross-platform)
■ Verschiedene Programmiersprachen (TypeScript, .NET, Java…)
■ Wichtigste Features
– Auto-wait (SPAs)
– Steuern den Browser von außen #NotCypress
– Promises oder synchrones Programmiermodell #NotCypress
■ Bietet in paar interessante Werkzeuge
– Inspector
– Trace Viewer
– Codegen - generiere Code
■ Backed by Microsoft
8
Playwright - los gehts
#setup a new project
npm init playwright@latest
#run tests and show browser
npx playwright test --headed
#open in Visual Studio Code (there is an extension available)
code .
Tooling
Code Generierung
Das Tooling ist vielfältig (und unübersichtlich)
Tests ausführen & Debugging Testergebnisse
Playwright Inspector
Visual Studio Code
Chrome Recorder +
Extension
Jetbrains Aqua
CLI
IDEs
Videos
Test Reports
Traces
Codegen
Playwright UI
Playwright
3rd Party
Code Generierung
Das Tooling ist vielfältig (und unübersichtlich)
Tests ausführen & Debugging Testergebnisse
Playwright Inspector
Visual Studio Code
Chrome Recorder +
Extension
Jetbrains Aqua
CLI
IDEs
Videos
Test Reports
Traces
Codegen
Playwright UI
Playwright
3rd Party
● Playwright setzt auf eigene GUIs
& Visual Studio Code (?)
● Das Recording von Tests ist
okayish
● Traces sind cool
Tests lassen sich einfach ausführen und erzeugen
einen Test-Report
■ Tests können per CLI ausgeführt
werden
npx playwright test
■ Dabei wird ein Test Report erstellt
13
Traces bieten eine Timeline mit ihren Aktionen
und viel Metainformationen
Playwright bietet eine Extension für Visual
Studio Code an
15
■ Ausführung und Debugging von Tests
■ Konfiguration von Playwright in der
IDE
■ Visualisierung und übernahme von
Locator
(leider keine Auswahlmöglichkeit)
Playwright bietet einen UI-Mode (ähnlich zu
Cypress)
■ Start mit
npx playwright test --ui
■ Alle Tests mit Ausführung &
Watch-Mode
■ Anzeige von Traces auf der
rechten Seite
■ In Traces hat man den Zugriff
auf den DOM (inspect)
16
Tests schreiben
Beispiel für einen einfachen Test
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://duckduckgo.com/');
await page.getByPlaceholder('Search the web without being tracked').click();
await page.getByPlaceholder('Search the web without being tracked').fill('test');
await page.getByLabel('Search', { exact: true }).click();
await page.waitForURL('https://duckduckgo.com/?**');
const searchResultsLocator = page.getByTestId("result");
expect(await searchResultsLocator.count()).toBeGreaterThanOrEqual(10);
});
Beispiel für einen einfachen Test
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://duckduckgo.com/');
await page.getByPlaceholder('Search the web without being tracked').click();
await page.getByPlaceholder('Search the web without being tracked').fill('test');
await page.getByLabel('Search', { exact: true }).click();
await page.waitForURL('https://duckduckgo.com/?**');
const searchResultsLocator = page.getByTestId("result");
expect(await searchResultsLocator.count()).toBeGreaterThanOrEqual(10);
});
await funktioniert - yeah!
locators & interactions
assertions
Playwright Testing (!= Playwright Library)
Mit einem Locator wähle ich Elemente auf der
Seite aus
20
//recommended locators (samples)
page.getByPlaceholder("Search the web")
page.getByTestId("result")
page.getByLabel("Search")
//other locators
page.locator("[name = 'q']")
page.locator(".myClass")
page.locator("h3")
■ von Playwright empfohlene Locator
– getByRole
– getByText
– getByLabel
– getByPlaceholder
– getByAltText
– getByTitle
– getByTestId
■ Sonstige
– locator
(für CSS- oder Xpath-Selektoren)
Mit Navigation & Actions steuere ich den
Browser
21
//navigation
page.goto("https://google.de");
//sample interactions
let input = page.getByPlaceholder("Do");
await input.click()
await input.fill("Search")
await input.press("Enter")
■ Navigation
■ Interaktion
– Suche ein Element per Locator
– Führe eine Aktion auf dem Element
aus, zum Beispiel: click, fill, send
Mit Assertions prüfe ich die Ergebnisse
22
//auto-retrying assertions
await expect(locator).toBeVisible()
await expect(locator).toContainText('test')
await expect(locator).toBeEnabled()
//non-retrying assertions
expect(value).toBe(1)
expect(value).toBeLessThan(10)
expect(value).toBeTruthy()
■ Auto-retrying assertions für Elemente
auf der Seite
■ Non-retrying assertions für einfache
Checks
Tests können mit Playwright auch aufgenommen
werden
■ Es gibt verschiedene Recorder
– Codegen
– Visual Studio Code
– Jetbrains Aqua
– Chrome Developer Tools + Extension
■ Als Startpunkt ok, aber noch nicht richtig gut
23
Created with: ChatGPT
1. Frontend-Testing
2. Playwright
3. Best Practices
4. Tod der Testpyramide!
Wähle gute Locator & mache Deine Anwendung
testbar!
Möglichkeiten:
■ Accessibility
■ data-testid
■ semantische Klassen und Ids
Hauptsache keine mehrstufigen Xpath-Ausdrücke!
26
Erzeuge mit dem Page Object Pattern eine API
für dein Frontend!
■ Code Reuse
■ Locator müssen nur
an einer Stelle
geändert werden
■ Tests werden
einfach und
übersichtlich
27
export class GooglePage {
constructor(private readonly page: Page) {
}
async goto() {
await this.page.goto('https://google.de');
}
async search(query: string) {
let queryInput = this.page.locator("[name = 'q']");
await queryInput.fill(query);
await queryInput.press('Enter');
await this.page.waitForURL('**/search**');
}
...
}
Fixtures helfen, die Page Objects für die Tests zu
erzeugen.
28
//usage
import {test} from './my-test'
import {expect} from '@playwright/test'
test('basic search', async ({ googlePage }) => {
await googlePage.search('test');
const results = await googlePage.getSearchResults();
expect(results.length).toBeGreaterThan(4);
});
//custom fixture
export const test = base.extend<MyFixtures>({
googlePage: async({page}, use) => {
const googlePage = new GooglePage(page);
await use(googlePage);
//potential clean up
}
})
1. Frontend-Testing
2. Playwright
3. Best Practices
4. Tod der Testpyramide!
Wegen Aufwand, Zeit und Kosten hat sich die
Testpyramide etabliert.
30
Quelle: https://en.wikipedia.org/wiki/Test_automation
Wenig Frontend-Tests
Unit-Tests als breite Basis,
Großteil der fachlichen Absicherung
31
Mit Playwright & Best Practices lassen sich gute Tests
schreiben, die:
- stabil laufen
- weniger wartungsintensiv sind
- viel auf einmal abdecken
Hinterfragt mal Euren “Aufwand / Umfang Absicherung”
Created with: ChatGPT
Vielleicht mal den Testing-Quader?
Frontend Test
API Test
Unit
Test der “wichtigen” Klassen.
Algorithmen, Regeln, Logik
(Unit, inklusive Integrationstests)
Breite fachliche Absicherung
inklusive Frontend
Breite fachliche Absicherung
der APIs (zum Beispiel REST)
Created with: ChatGPT
Q&A

Recomendados

Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptSebastian Springer
 
Testing XAML-based Windows Store Apps mit VS 2013
Testing XAML-based Windows Store Apps mit VS 2013Testing XAML-based Windows Store Apps mit VS 2013
Testing XAML-based Windows Store Apps mit VS 2013Nico Orschel
 
Unit testing mit Javascript
Unit testing mit JavascriptUnit testing mit Javascript
Unit testing mit Javascriptjoergreichert
 
Testing einer Angular App
Testing einer Angular AppTesting einer Angular App
Testing einer Angular AppFlorian Bader
 
How to speed up Spring Integration Tests
How to speed up Spring Integration TestsHow to speed up Spring Integration Tests
How to speed up Spring Integration TestsQAware GmbH
 
Integration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineIntegration von Security-Checks in die CI-Pipeline
Integration von Security-Checks in die CI-PipelineOPEN KNOWLEDGE GmbH
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...Marc Müller
 

Más contenido relacionado

Ähnlich wie Der Tod der Testpyramide? – Frontend-Testing mit Playwright

DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitNico Orschel
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018Christian Mücke
 
iOS Testautomation bei mobile.de
iOS Testautomation bei mobile.deiOS Testautomation bei mobile.de
iOS Testautomation bei mobile.deHolger Hammel
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013Oliver Zeigermann
 
Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010Sebastian Sanitz
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenHendrik Lösch
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTddjlink
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebAndreas Schmidt
 
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitUI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitNico Orschel
 
Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!
Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!
Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!Marc Müller
 
Das funktionierte doch schon einmal! - JUnit Testing in XPages
Das funktionierte doch schon einmal! - JUnit Testing in XPagesDas funktionierte doch schon einmal! - JUnit Testing in XPages
Das funktionierte doch schon einmal! - JUnit Testing in XPagesChristian Güdemann
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018André Krämer
 
REST Problems
REST ProblemsREST Problems
REST Problemspredic8
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for BeginnersUlrich Krause
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzKai Donato
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreGregor Biswanger
 
Next Level Unit Testing
Next Level Unit TestingNext Level Unit Testing
Next Level Unit TestingDaniel Lehner
 
Referat: Scrum Rocks – Testing Sucks?! (reloaded)
Referat: Scrum Rocks – Testing Sucks?! (reloaded)Referat: Scrum Rocks – Testing Sucks?! (reloaded)
Referat: Scrum Rocks – Testing Sucks?! (reloaded)Digicomp Academy AG
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 

Ähnlich wie Der Tod der Testpyramide? – Frontend-Testing mit Playwright (20)

DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
 
iOS Testautomation bei mobile.de
iOS Testautomation bei mobile.deiOS Testautomation bei mobile.de
iOS Testautomation bei mobile.de
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
 
Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTdd
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
 
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitUI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!
Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!
Karlsruher Entwicklertag 2016: CodedUI - Richtig vorbereitet ist halb getestet!
 
Das funktionierte doch schon einmal! - JUnit Testing in XPages
Das funktionierte doch schon einmal! - JUnit Testing in XPagesDas funktionierte doch schon einmal! - JUnit Testing in XPages
Das funktionierte doch schon einmal! - JUnit Testing in XPages
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
 
REST Problems
REST ProblemsREST Problems
REST Problems
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
 
Next Level Unit Testing
Next Level Unit TestingNext Level Unit Testing
Next Level Unit Testing
 
Referat: Scrum Rocks – Testing Sucks?! (reloaded)
Referat: Scrum Rocks – Testing Sucks?! (reloaded)Referat: Scrum Rocks – Testing Sucks?! (reloaded)
Referat: Scrum Rocks – Testing Sucks?! (reloaded)
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 

Mehr von QAware GmbH

Down the Ivory Tower towards Agile Architecture
Down the Ivory Tower towards Agile ArchitectureDown the Ivory Tower towards Agile Architecture
Down the Ivory Tower towards Agile ArchitectureQAware GmbH
 
"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!QAware GmbH
 
Make Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringMake Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringQAware GmbH
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAsQAware GmbH
 
Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo QAware GmbH
 
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
 Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See... Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...QAware GmbH
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster QAware GmbH
 
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.QAware GmbH
 
Kubernetes with Cilium in AWS - Experience Report!
Kubernetes with Cilium in AWS - Experience Report!Kubernetes with Cilium in AWS - Experience Report!
Kubernetes with Cilium in AWS - Experience Report!QAware GmbH
 
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAPKontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAPQAware GmbH
 
Blue turns green! Approaches and technologies for sustainable K8s clusters.
Blue turns green! Approaches and technologies for sustainable K8s clusters.Blue turns green! Approaches and technologies for sustainable K8s clusters.
Blue turns green! Approaches and technologies for sustainable K8s clusters.QAware GmbH
 
Per Anhalter zu Cloud Nativen API Gateways
Per Anhalter zu Cloud Nativen API GatewaysPer Anhalter zu Cloud Nativen API Gateways
Per Anhalter zu Cloud Nativen API GatewaysQAware GmbH
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster QAware GmbH
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-ClusterAus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-ClusterQAware GmbH
 
Cloud Migration – Eine Strategie die funktioniert
Cloud Migration – Eine Strategie die funktioniertCloud Migration – Eine Strategie die funktioniert
Cloud Migration – Eine Strategie die funktioniertQAware GmbH
 
Policy Driven Microservices mit Open Policy Agent
Policy Driven Microservices mit Open Policy AgentPolicy Driven Microservices mit Open Policy Agent
Policy Driven Microservices mit Open Policy AgentQAware GmbH
 
Make Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringMake Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringQAware GmbH
 
Security Lab: OIDC in der Praxis
Security Lab: OIDC in der PraxisSecurity Lab: OIDC in der Praxis
Security Lab: OIDC in der PraxisQAware GmbH
 
Die nächsten 100 Microservices
Die nächsten 100 MicroservicesDie nächsten 100 Microservices
Die nächsten 100 MicroservicesQAware GmbH
 
Enterprise-level Kubernetes Security mit Open Source Tools - geht das?
Enterprise-level Kubernetes Security mit Open Source Tools - geht das?Enterprise-level Kubernetes Security mit Open Source Tools - geht das?
Enterprise-level Kubernetes Security mit Open Source Tools - geht das?QAware GmbH
 

Mehr von QAware GmbH (20)

Down the Ivory Tower towards Agile Architecture
Down the Ivory Tower towards Agile ArchitectureDown the Ivory Tower towards Agile Architecture
Down the Ivory Tower towards Agile Architecture
 
"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!"Mixed" Scrum-Teams – Die richtige Mischung macht's!
"Mixed" Scrum-Teams – Die richtige Mischung macht's!
 
Make Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringMake Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform Engineering
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo Cloud Migration mit KI: der Turbo
Cloud Migration mit KI: der Turbo
 
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
 Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See... Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
Migration von stark regulierten Anwendungen in die Cloud: Dem Teufel die See...
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
 
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
Endlich gute API Tests. Boldly Testing APIs Where No One Has Tested Before.
 
Kubernetes with Cilium in AWS - Experience Report!
Kubernetes with Cilium in AWS - Experience Report!Kubernetes with Cilium in AWS - Experience Report!
Kubernetes with Cilium in AWS - Experience Report!
 
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAPKontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
Kontinuierliche Sicherheitstests für APIs mit Testkube und OWASP ZAP
 
Blue turns green! Approaches and technologies for sustainable K8s clusters.
Blue turns green! Approaches and technologies for sustainable K8s clusters.Blue turns green! Approaches and technologies for sustainable K8s clusters.
Blue turns green! Approaches and technologies for sustainable K8s clusters.
 
Per Anhalter zu Cloud Nativen API Gateways
Per Anhalter zu Cloud Nativen API GatewaysPer Anhalter zu Cloud Nativen API Gateways
Per Anhalter zu Cloud Nativen API Gateways
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
 
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-ClusterAus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
Aus blau wird grün! Ansätze und Technologien für nachhaltige Kubernetes-Cluster
 
Cloud Migration – Eine Strategie die funktioniert
Cloud Migration – Eine Strategie die funktioniertCloud Migration – Eine Strategie die funktioniert
Cloud Migration – Eine Strategie die funktioniert
 
Policy Driven Microservices mit Open Policy Agent
Policy Driven Microservices mit Open Policy AgentPolicy Driven Microservices mit Open Policy Agent
Policy Driven Microservices mit Open Policy Agent
 
Make Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform EngineeringMake Developers Fly: Principles for Platform Engineering
Make Developers Fly: Principles for Platform Engineering
 
Security Lab: OIDC in der Praxis
Security Lab: OIDC in der PraxisSecurity Lab: OIDC in der Praxis
Security Lab: OIDC in der Praxis
 
Die nächsten 100 Microservices
Die nächsten 100 MicroservicesDie nächsten 100 Microservices
Die nächsten 100 Microservices
 
Enterprise-level Kubernetes Security mit Open Source Tools - geht das?
Enterprise-level Kubernetes Security mit Open Source Tools - geht das?Enterprise-level Kubernetes Security mit Open Source Tools - geht das?
Enterprise-level Kubernetes Security mit Open Source Tools - geht das?
 

Der Tod der Testpyramide? – Frontend-Testing mit Playwright

  • 1. qaware.de Frontend-Testing mit Playwright Der Tod der Testpyramide? Dominik Haas | dominik.haas@qaware.de | Head of Division & Lead Software Architect
  • 2. 1. Frontend-Testing 2. Playwright 3. Best Practices 4. Tod der Testpyramide!
  • 3. 1. Frontend-Testing 2. Playwright 3. Best Practices 4. Tod der Testpyramide!
  • 4. Beim Frontend-Testing* automatisieren wir den Browser und simulieren unseren Benutzer. 4 *aka E2E-Testing Vorteile ■ So nah am Nutzer wie möglich ■ Testet alle Bestandteile unseres Codes Nachteile ■ Langsamer ■ Unzuverlässiger ■ Schwieriger zu schreiben (Kosten?) ■ Wartungsintensiver (Kosten?) Frontend Service DB Service TEST
  • 5. Wegen Aufwand, Zeit und Kosten hat sich die Testpyramide etabliert. 5 Quelle: https://en.wikipedia.org/wiki/Test_automation Wenig Frontend-Tests Unit-Tests als breite Basis, Großteil der fachlichen Absicherung
  • 6. 1. Frontend-Testing 2. Playwright 3. Best Practices 4. Tod der Testpyramide!
  • 8. Playwright - die wichtigsten Kriterien ■ Cross-browser (& cross-platform) ■ Verschiedene Programmiersprachen (TypeScript, .NET, Java…) ■ Wichtigste Features – Auto-wait (SPAs) – Steuern den Browser von außen #NotCypress – Promises oder synchrones Programmiermodell #NotCypress ■ Bietet in paar interessante Werkzeuge – Inspector – Trace Viewer – Codegen - generiere Code ■ Backed by Microsoft 8
  • 9. Playwright - los gehts #setup a new project npm init playwright@latest #run tests and show browser npx playwright test --headed #open in Visual Studio Code (there is an extension available) code .
  • 11. Code Generierung Das Tooling ist vielfältig (und unübersichtlich) Tests ausführen & Debugging Testergebnisse Playwright Inspector Visual Studio Code Chrome Recorder + Extension Jetbrains Aqua CLI IDEs Videos Test Reports Traces Codegen Playwright UI Playwright 3rd Party
  • 12. Code Generierung Das Tooling ist vielfältig (und unübersichtlich) Tests ausführen & Debugging Testergebnisse Playwright Inspector Visual Studio Code Chrome Recorder + Extension Jetbrains Aqua CLI IDEs Videos Test Reports Traces Codegen Playwright UI Playwright 3rd Party ● Playwright setzt auf eigene GUIs & Visual Studio Code (?) ● Das Recording von Tests ist okayish ● Traces sind cool
  • 13. Tests lassen sich einfach ausführen und erzeugen einen Test-Report ■ Tests können per CLI ausgeführt werden npx playwright test ■ Dabei wird ein Test Report erstellt 13
  • 14. Traces bieten eine Timeline mit ihren Aktionen und viel Metainformationen
  • 15. Playwright bietet eine Extension für Visual Studio Code an 15 ■ Ausführung und Debugging von Tests ■ Konfiguration von Playwright in der IDE ■ Visualisierung und übernahme von Locator (leider keine Auswahlmöglichkeit)
  • 16. Playwright bietet einen UI-Mode (ähnlich zu Cypress) ■ Start mit npx playwright test --ui ■ Alle Tests mit Ausführung & Watch-Mode ■ Anzeige von Traces auf der rechten Seite ■ In Traces hat man den Zugriff auf den DOM (inspect) 16
  • 18. Beispiel für einen einfachen Test import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://duckduckgo.com/'); await page.getByPlaceholder('Search the web without being tracked').click(); await page.getByPlaceholder('Search the web without being tracked').fill('test'); await page.getByLabel('Search', { exact: true }).click(); await page.waitForURL('https://duckduckgo.com/?**'); const searchResultsLocator = page.getByTestId("result"); expect(await searchResultsLocator.count()).toBeGreaterThanOrEqual(10); });
  • 19. Beispiel für einen einfachen Test import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://duckduckgo.com/'); await page.getByPlaceholder('Search the web without being tracked').click(); await page.getByPlaceholder('Search the web without being tracked').fill('test'); await page.getByLabel('Search', { exact: true }).click(); await page.waitForURL('https://duckduckgo.com/?**'); const searchResultsLocator = page.getByTestId("result"); expect(await searchResultsLocator.count()).toBeGreaterThanOrEqual(10); }); await funktioniert - yeah! locators & interactions assertions Playwright Testing (!= Playwright Library)
  • 20. Mit einem Locator wähle ich Elemente auf der Seite aus 20 //recommended locators (samples) page.getByPlaceholder("Search the web") page.getByTestId("result") page.getByLabel("Search") //other locators page.locator("[name = 'q']") page.locator(".myClass") page.locator("h3") ■ von Playwright empfohlene Locator – getByRole – getByText – getByLabel – getByPlaceholder – getByAltText – getByTitle – getByTestId ■ Sonstige – locator (für CSS- oder Xpath-Selektoren)
  • 21. Mit Navigation & Actions steuere ich den Browser 21 //navigation page.goto("https://google.de"); //sample interactions let input = page.getByPlaceholder("Do"); await input.click() await input.fill("Search") await input.press("Enter") ■ Navigation ■ Interaktion – Suche ein Element per Locator – Führe eine Aktion auf dem Element aus, zum Beispiel: click, fill, send
  • 22. Mit Assertions prüfe ich die Ergebnisse 22 //auto-retrying assertions await expect(locator).toBeVisible() await expect(locator).toContainText('test') await expect(locator).toBeEnabled() //non-retrying assertions expect(value).toBe(1) expect(value).toBeLessThan(10) expect(value).toBeTruthy() ■ Auto-retrying assertions für Elemente auf der Seite ■ Non-retrying assertions für einfache Checks
  • 23. Tests können mit Playwright auch aufgenommen werden ■ Es gibt verschiedene Recorder – Codegen – Visual Studio Code – Jetbrains Aqua – Chrome Developer Tools + Extension ■ Als Startpunkt ok, aber noch nicht richtig gut 23
  • 25. 1. Frontend-Testing 2. Playwright 3. Best Practices 4. Tod der Testpyramide!
  • 26. Wähle gute Locator & mache Deine Anwendung testbar! Möglichkeiten: ■ Accessibility ■ data-testid ■ semantische Klassen und Ids Hauptsache keine mehrstufigen Xpath-Ausdrücke! 26
  • 27. Erzeuge mit dem Page Object Pattern eine API für dein Frontend! ■ Code Reuse ■ Locator müssen nur an einer Stelle geändert werden ■ Tests werden einfach und übersichtlich 27 export class GooglePage { constructor(private readonly page: Page) { } async goto() { await this.page.goto('https://google.de'); } async search(query: string) { let queryInput = this.page.locator("[name = 'q']"); await queryInput.fill(query); await queryInput.press('Enter'); await this.page.waitForURL('**/search**'); } ... }
  • 28. Fixtures helfen, die Page Objects für die Tests zu erzeugen. 28 //usage import {test} from './my-test' import {expect} from '@playwright/test' test('basic search', async ({ googlePage }) => { await googlePage.search('test'); const results = await googlePage.getSearchResults(); expect(results.length).toBeGreaterThan(4); }); //custom fixture export const test = base.extend<MyFixtures>({ googlePage: async({page}, use) => { const googlePage = new GooglePage(page); await use(googlePage); //potential clean up } })
  • 29. 1. Frontend-Testing 2. Playwright 3. Best Practices 4. Tod der Testpyramide!
  • 30. Wegen Aufwand, Zeit und Kosten hat sich die Testpyramide etabliert. 30 Quelle: https://en.wikipedia.org/wiki/Test_automation Wenig Frontend-Tests Unit-Tests als breite Basis, Großteil der fachlichen Absicherung
  • 31. 31 Mit Playwright & Best Practices lassen sich gute Tests schreiben, die: - stabil laufen - weniger wartungsintensiv sind - viel auf einmal abdecken Hinterfragt mal Euren “Aufwand / Umfang Absicherung” Created with: ChatGPT
  • 32. Vielleicht mal den Testing-Quader? Frontend Test API Test Unit Test der “wichtigen” Klassen. Algorithmen, Regeln, Logik (Unit, inklusive Integrationstests) Breite fachliche Absicherung inklusive Frontend Breite fachliche Absicherung der APIs (zum Beispiel REST)
  • 34. Q&A