Playwright series - Post 1 - Overview of E2E testing using VS Code for Low Code

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: 

1. Full regressions go into detail and run in Chrome, Firefox, WebKit and specified devices 
2. Check-in tests are comprehensive on a single browser for code check-ins
3. 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.
4. 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