What is testing, and what are the advantages of test automation?
Testing is a crucial process in the software development lifecycle. It ensures the software meets the required quality standards before being released to end users. Testing can be conducted in various environments, such as local, staging, and production, each serving a specific purpose in the development pipeline.
Automated testing offers advantages over manual testing. It improves efficiency by executing tests quickly and consistently, allows for the reuse of test scripts, and extends the coverage of testing. Although the initial investment in automation may be high, the long-term benefits include reduced testing time, cost savings, and better integration with continuous development processes. Embracing automated testing can lead to more reliable software, shorter release cycles, and an optimized development process.
What is Playwright API?
Playwright is a framework for Web Testing and Automation. It allows testing cross-browser and cross-platform. It provides strong features and powerful tools.
How to use it?
In this article, we will concentrate on one specific feature of the web application for testing automation.
The first is installing the playwright with yarn or npm by CLI. You can also install it via the Visual Studio Code extension store.
yarn create playwright

Assume that we have 1 test case for the web https://isb-vietnam.net/
Test case: Verify Visibility of Tech Link After Clicking Blog
Description: This test case verifies that after navigating to the website and clicking on the "Blog" link, the "Tech" link becomes visible. It also captures a screenshot of the "Tech" link.
Preconditions:
- Ensure the Playwright testing environment is set up correctly.
- The website https://isb-vietnam.net/ is accessible.
Test Steps:
- Navigate to the Website:
-
- URL: https://isb-vietnam.net/
- Action: Open the website in a browser.
- Click on the First Blog Link:
-
- Locator: Role link with name Blog
- Action: Click on the first instance of the Blog link.
- Verify the Visibility of the Tech Link:
-
- Locator: Role link with name Tech
- Assertion: Check that the first instance of the Tech link is visible on the page.
- Capture Screenshot of Tech Link:
-
- Path: tech-link.png
- Action: Take a screenshot of the Tech link element.
Expected Results:
- The "Tech" link should be visible on the page after clicking the "Blog" link.
- The screenshot file tech-link.png should be saved in the working directory, containing the Tech link.
This is the automation code referred to in the test case above.

Now, we can run a test with command:
yarn playwright test

By default, tests will be run on all 3 browsers, chromium, firefox, and webkit using 3 workers.
Then completing the test, an HTML report is generated. To review it with the command below:
yarn playwright show-report

Alternatively, the image of the Tech link is captured screenshot.

Conclusion
Playwright is a powerful and versatile testing framework that significantly enhances the process of web application testing. It supports multiple browsers and provides advanced features like auto-waiting and parallel test execution. When integrated with TypeScript, Playwright can leverage TypeScript's strong typing and modern features to streamline the development and testing process, making it easier to catch errors early and maintain high code quality.
Reference