Setup: I have installed Node 20.100.0 and the VS code extension for Playwright. The installation and getting started guides are straightforward and of a high quality. https://playwright.dev/docs/intro I am running on Windows 10 Surface 4 with 16GB. I use TypeScript (ts) as the default, and the recording mechanism works well with ts. Previously, I used C# as my language of choice, but it is easier to maintain, and there is no need for complex logic/functions in end-to-end (e2e) UI testing. New features always come out in TS/JS first.
Thoughts: Postman is easy to use, fast, configurable and flexible. UI e2e testing allows me to know my app/sites are working as expected. Manual testing is time consuming, and amending automated tests can be hard.
Setup Reminder:
1. Install the Playwright extension using VSCode (once at initial setup)
2. Open a new folder in VSCode, and open the "Command Pallette" (once for each new project)
>Install Playwright
 |
| These are the defaults and will use TypeScript as the base language, stick to this it is the simpliest. VSCode builds the default file scaffolding as shown above |
3. Create your first New Playwright UI Test:
3.1. Record new
3.2. Enter a URL in the recorder browser, and click around (optional add Asserts)
3.3. Save the Test
3.4. Execute the test
 |
| The Green tick can be used to quickly run the test locally. In the "Test Results" terminal, you can see the same test was run 3 times, my configuration is set to test Chrome, Firefox and webkit. |
Why Playwright?
- Easy to understand/follow,
- Easy to record,
- Open source,
- No paid licencing,
- Faster than Selenium,
- Various coding languages supported (bindings for C#, Python, Java, JS, TypeScript),
- UI verification using screenshots and AI to minimize flakiness/static DOM reliance,
- The ability to debug and trace is strong,
- Can do API testing,
Possible Playwright UI testing Layers:
- Full regressions go into detail and run in Chrome, Firefox, WebKit and specified devices
- Check-in tests are comprehensive on a single browser for code check-ins
- Continuous testing: Record logging in, reading from a database, and calling an API. You can write to logs, e.g., Dynatrace, Azure Monitor, and SolarWinds using APIs. Doing this every 5 minutes will tell you at a high level if the service and its dependencies are running and if there is a performance change.
- A developer can write detailed local tests when working in an area and reuse them if he comes back and changes any code.
Testing Challenges:
Unit testing is a challenge in low code - while they are fast and ideal for C# or code, not easy to implement for Low code. Their is a new beta feature for component testing in Playwright, i don't think it adds value. API Testing - I use Postman for API testing including controlling my CI. Low code automation testing is hard in the Power Platform, E2E playwright testing in context works pretty well. API's/ network traffic needs to be mocked.
Challenger products:
- Selenium - QA's highly skilled here
- Cypress - Devs tended to use this over Selenium
- Specific products like Power Platform Test Studio and ...
- I also like BrowserStacks low code testing, especially if no CI/CD and can manage from here and use different low code technology.
Summary: Generally, I'd go for Playwright over all the others.
=========================
Playwright Series
Playwright Post 1 - Overview of E2E testing using Playwright (this post)
Playwright Post 2 - Continuously Test/Monitor Canvas apps and website with MFA enabled
Playwright Post 3 - Add App Insights logging inside your Playwright tests
Playwright Post 4 - 6 Min walkthru of Playwright testing with Azure Monitor
