Getting Started Playwright for QA New Generation

* Get to know more about Playwright as an Automation Testing Tool
* How to Install Playwright
* How to create a new test with the record method using Visual Studio Code
* How to Implement Page Object Model

Transcript

1. GETTING STARTED PLAYWRIGHT FOR QA NEW GENERATION By Fathur Rohim
2. Oim QA Engineer at pvg.co.id On Going Student at Budi Luhur Univ. Founder Ngalam Backend Community linkedin.com/in/oimtrust Let Me Introduce of MySelf
3. TABLE OF CONTENTS What is Playwright? Getting Started to Develop Writing Test 01 02 03 Page Object Model 04
4. What is Playwright? 01
5. Playwright enables reliable end-to-end testing for modern web apps. • Created by Microsoft • Supports testing on various modern browsers, such as Chromium, Firefox, and WebKit (Safari) • This framework allows us to write test scripts that can interact with web applications as real users would, including complex interactions like filling out forms, pressing buttons, and navigating pages.
6. Features 1. Cross-Browser Testing: Playwright supports testing across major browsers such as Chromium (for Chrome and Edge), Firefox, and WebKit (for Safari). This allows for consistent testing across all major browsers. 2. Support for Multiple Programming Languages: Playwright supports JavaScript, TypeScript, Python, C#, and Java, making it flexible for teams with different language preferences. 3. Responsive Testing: Playwright can simulate various screen sizes and device types, including mobile devices, allowing applications to be tested across different resolutions. 4. Parallel Test Execution: Supports parallel test execution to speed up testing time, especially on large projects with many test scenarios. 5. Automatic Waiting: Playwright automatically waits for elements on the page to be ready before interacting, reducing issues with “flaky tests” that are common in automated testing. 6. Network Interception: Allows for intercepting or modifying network requests (such as API requests) during testing, which is useful for making tests more flexible and reliable.
7. Features 7. Video and Screenshot Capture: Playwright supports recording videos and taking screenshots during testing, making debugging and analysis easier if errors occur. 8. Built-In Debugging Tools: Built-in debugging tools allow users to run tests interactively, slow down execution, or access DevTools, making it easier to identify and fix issues. 9. Geolocation and Device Emulation: Playwright can emulate specific geographic locations and device types, useful for testing location-based applications or ensuring consistent display on particular devices. 10. Handling Multiple Browser Contexts and Windows: Manages multiple browser tabs or windows simultaneously, which is useful for testing complex scenarios such as applications that require multi-tab or multi-user login. 11. Integration with CI/CD: Playwright easily integrates with Continuous Integration/Continuous Deployment (CI/CD) systems such as Jenkins, GitHub Actions, and others for continuous automated testing. 12. Test Generator: The Playwright CLI provides a recording feature to automatically create test scripts based on user interactions with the application, speeding up the creation of test scripts.
8. Getting Started to Develop 02
9. • NodeJS >= v18 • Package Manager (yarn, npm, pnpm, bun) • Editor (VS Code, Aqua, Sublime T, etc) —Tools
10. 1. Create folder to build app: mkdir folder_name 2. Init project: yarn init 3. Install Playwright: yarn create playwright 4. Running Test: yarn playwright test 5. Running UI Mode: yarn playwright test –ui —Command Prompt
11. Writing Test 03
12. Record by VS Code 1. Testing Feature by VS Code 2. Option to get locator or create new test include writing the codes 3. Result of point 2
13. Example Code
14. Page Object Model 04
15. Advantages 1. Easier Maintenance: POM organizes page elements and interactions in a separate location. If there’s a change in the UI, you only need to update it in the page object file without editing multiple test files, making it easier to maintain. 2. Clean and Structured Code: POM separates test logic from the page representation, resulting in cleaner, more structured, and readable code. This helps keep the code modular and improves readability. 3. Reduces Code Duplication: By defining page elements and actions within a page object, you can reuse that code across different test scenarios, reducing redundancy and duplication. 4. Improves Scalability: Because POM organizes pages as objects, this structure allows for the efficient addition of new tests and pages as the application’s test coverage expands. 5. Supports More Focused Testing: POM makes tests more focused on user actions and expected outcomes rather than on UI implementation details, making tests more resilient to minor UI changes. 6. Readable for Non-Programmers: The POM structure makes it easier for non-programmer team members to understand test scenarios without delving too deeply into the code. This greatly aids collaboration between teams, such as QA and development teams.
16. Example Code → Page
17. Example Code → Test
18. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik THANKS! Do you have any questions? frohim@pvg.co.id Please keep this slide for attribution