Upgrading Two web applications and verifying using Playwright - super fast

Overview: A couple of my internal recent projects all clipped together to allow my to upgrade two websites to .NET 8. And verify the upgrade and commit to source control in a regulated controlled manor and it took less than 30 minutes.

I download the latest version of Visual Studio 2022 Enterprise edition and noticed an option to upgrade my .NET projects, so I clicked it. The .NET Upgrade Assistant downloaded and installed upgrade in Visual Studio.  The upgrade is done using a vsix template import: Microsoft.NET.UpgradeAssistant.vsix

I thought I may as well upgrade my two current .NET projects:

1. App Service on Azure running Blazor .NET 6, using TFS for source control and published using my Visual Studio profile.

Once the upgrade was applied took 10 seconds and i chose LTS  .net8, I published.  Code is still not checked in.  I has a quick look and the  app loos to be running correctly in a browser. 

2. Static Web App hosting a Blazor .NET 6 connected to Github and published as a gated checkin using git Actions. Upgrades, and when I checked into the main github branch, the action fired and upgraded the static web app.

Verify Build:

So I had checked both apps where running using the good old open in a browser and look around.  A few days ago I was playing with Playwright and my testing covered validating the App Service website can send email, is running and text is visible, it also checks a Mendix low code website and lastly it looks at the Static Web App to validate it is service pages.  I did this is Visual Studio Code. 

The tests tell me both applications are running, verifies WAG compliance on 1 app and also checks a Mendix website is running.

Summary:  By re-using the test project I could quickly verify the project upgrades and the first project still requires a commit to complete but it is way safer than my direct to production gated checking done on the static web app.

Mendix - Part 2 - Diving deeper (E2E automation testing of Mendix using Playwright)

Mendix Series

1.  Overview of Mendix 

2. Mendix - Part 2 - Diving deeper (This post)

AI with Mendix (current version Mendix 10.5.x):

1. Logic bot - recommends what you are likely to do, like a copilot as you go along building the app
2. Performance bot - shows redundancies, recommends performance improvements 
3. Chatbot in beta

Playwright is a good UI testing tool for Mendix:

For more advanced applications, Playwright is a good testing framework that can help developers know their code is running end-to-end, useful for monitoring applications and behaviour, and also can be used as part of the CI process to validate Mendix end user accessibility as shown in this mp4 (7 minutes - good video).

Thoughts:

• Deployment can take time when the project grows.
• Domain modelling: can use existing models and add to Mendix.
• Playwright is perfect for Mendix testing, here is a basic dev example.
• The Mendix Community is a good place to post questions.

I needed to change from US format to UK date time format:

Community has the answer: Mendix Forum - Question Details

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 clear and of a high quality.  https://playwright.dev/docs/intro  I am running on Windows 10 Surface 4 with 16GB.  I am using TypeScript (ts) as it is the default and the recording mechanism works well with ts.  Previously I have use C# as it's my language of choice but I feel ts is easier to maintain and there is no need for complex logic/functions in end-2end (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 screenshot and AI to minimize flakiness/static DOM reliance,
• Ability to debug and trace is strong,
• Can do API testing,

Possible Playwright UI testing Layers: 

1. Full regressions goes into detail and runs in Chrome, Firefox, webkit/devices 
2. Check in tests are comprehensive on a single browser for code check ins
3. Continuous testing - record logging in and reading from a db and calling an API.  Can write to logs i.e. Dynatrace, Azure Monitor, SolarWinds using API's,  Doing this every 5 minutes will tell you at a high level if the service and it's dependencies are running and if there is a performance change.
4. 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 in 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.