E2E Power Platform testing using GitHub and Playwright - advanced

Canvas Apps are particularly challenging for UI and End-to-End (E2E) test automation because Microsoft Power Apps renders much of the application UI within a Shadow DOM. While Shadow DOM provides benefits for Microsoft and app makers, it introduces several obstacles for traditional test automation tools.

Playwright has several key advantages over Selenium and other test tools, mainly around selectors and planning. The selector approach works much better against Canvas Apps that utilise a Shadow DOM.

Selenium tests were flaky as they rely on CSS and XPath to locate elements in the DOM.  Playwright allows users to navigate the DOM within the Page DOM, offering 6-7 ways to find an element, including getByRole().  Selenium often requires many waits/pauses to ensure the DOM is fully loaded, whereas Playwright uses the Page Object Model (POM), and I don't tend to need to use waits on a page.

Define Test Criteria using Gherkin - Go to GitHub Copilot

define gherkin test cases for the following feature: Check User is an administrator

// Generated response

Feature: Check a user can login and determine if they are an administrator

​ 

  Scenario: Check if the logged in user is an admin

    Given the system has started 

    When the user is logged in 

5    Wh 

e 

    Then the system should show if the current users is an admin or not

*Repeat for multiple features

I believe pairing LLM's to generate context-aware Playwright tests will allow developers and QA engineers to test apps better and faster.

GitHub Spaces  (Not too sure if I like GitHub Spaces)

"Put your code, docs, and notes where they belong: together. With GitHub Copilot Spaces, your AI pair programmer uses that context to deliver better, more tailored answers for you and your team".  Swap between models like Claude 3.7 Sonnet, OpenAI o1, and Google Gemini 2.0 

GitHub Repos, Actions, and Copilot work with VS Code, Visual Studio, and Eclipse.

Testing Power Apps using Microsoft Playwright with C#

Overview: I am using a C# Console app to run my power Apps to verify that it is working correctly.

Approach:  I'm not using NodeJs but I'll use C# and add it into my devOps pipelines.  I assume you have VS Code installed (you need the C# extensions, I have kept my notes at the bottom of the post).  I'm using .NET 6 core SDK and the Microsoft.Playwright package.  I'm not using any of the .NET testing frameworks to keep it simple.

Tips: Playwright by default use headless browser testing, I want the test to use my local JWT that I have stored against my Chrome browser.  If I tell Playwright to use show the browser i.e., headless=false, it logs me in using my cached credentials.  You should parameterise the login and store the username/pswd somewhere secure like a key vault. 

Code Example: 

Replace the C# code in the console as I have done above, and hit F5 (Run>Debug).  The test logs me into the Canvas app and returns the Title of the page. 

Note:  I like the Canvas app testing feature but this is better as I can easily add testing to my CI/CD pipelines, tooling and recording is better and there are more ways I can use the Playwright approach.  

Notes for installing Playwright on VSCode to use C#

1. Install VS Code and add the following two extensions

2. Open the VS Code terminal, create a C# Console app using .NET6, add the reference to the Playwright package, install the headless browsers against you profile (only needed once per machine). 

3. Write and run the tests.  Tip: It's easier to record the code and then add it to the C# console.

Note: It's worthwhile using NUnit as it's much easier to test than doing it the way I've done it here.

Playwright using the NUnit framework:

Playwright Series

Playwright Post 1 - Overview of E2E testing using Playwright 

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 

Playwright Post 5 - Understanding how playwright works

Other Posts

Upgrading two C# Blazor web applications and verifying using Playwright - super fast 

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

Low-code testing with playwright walkthru

Continiously Monitor Apps using Playwright with TS

Testing Canvasa apps with Playwright using C# (rather use TS, it's better)

SaaS Azure Testing Thoughts

 Tooling:

1. API Automation - Postman, Newman
2. UI Automation - Selenium
3. IDE - Visual Studio 2019
4. Test Organization - Azure DevOps Test Plan
5. CI/CD - Azure DevOps

Code reviews:

Code review is used as a verification technique to ensure that each unit is coded as per standards and expected business logic and inline with coding standards and best practices.  Automate code review built into Azure Pipelines should include:  

• WhiteSource Bolt - Scan packages for vulnerabilities.
• SonarQube - Static Analysis, 
• Blackduck - Open-Source Scanning (OSS) tool.  Used to look for license risks and unused references.
• Checkmarx - Static Application Security Testing (SAST) tool benefits include: Detect security vulnerabilities, Improve developer practices, and reports on code ownership.  Static code anaylsis.  VeraCode is a competitor product.
• BugSuite

Code should pass OWASP (Open Web Application Security Project) shows the most common code vulnerabilities.  OWASP ASVS (Application Security Verification Standard) - framework for controls when building applications to cover functional and NFR's for web applications.

Unit testing:

Unit tests are written to ensure every unit of code is working as expected, and to prevent a defect from going to the next level on all C# code.  Xunit and Moq are the tools to be used for unit testing using the standard Arrange > Act > Assert pattern.

As long as Unit test coverage is high and of a good standard, I don't mind if the tests are written before the code (TDD) or as most developers tend to do the tests after the code is written.

API testing:

All API must use Postman collections and Environments for local testing.  The tests need to cover all API's dealing with authentication, authorisation, checking status codes, body responses, headers, data persistence, and post test clean-up.  Use Newman to integrate postman tests into Azure pipelines:

https://www.npmjs.com/package/newman-reporter-htmlextra

Selenium testing:

Code for UI must be automated where possible.

SonarQube: "automatic code review tool to detect bugs, vulnerabilities, and code smells in your code" SonarQube documentation

Code Smells:  Bloaters, OO abusers, ....

Checkmax detects potential security issues

Disposable email addresses: You often need to test login/account creation and it's useful to have temporary disposable email addresses:

• YOPmail - Disposable Email Address
• Home - Mailinator

Smoke Testing SharePoint using Selenium IDE

Overview:  In SharePoint we need to retest code often as we make incremental changes.  Basic smoke testing is useful in that is allows you a certain degree of confidence that a bug has not crept into your latest deployment.

Most projects have varying degrees of control to ensure bugs do not cause unexpected behaviour and on the more advanced practices is unit testing and coded UI tests.  The unit tests are tricky with all the new SharePoint development methods.  Jasmine is a JavaScript testing framework and check out the @SPDoctor (Bill) for basic testing information.  Unit testing SP is difficult as the revs end up test SP and not the changes.  A lot of the code is UI driven which is hard to unit test.  I have previously written about code UI testing, MTM as part of the MS test and continuous testing.  And part of this is Selenium WebDriver.  I've used it once on a large project and it was awesome.  Now as you go into production you normally will do some manual smoke testing to check the deployment.

This post looks at automating smoke test.

There are various tools for recording smoke test or you can do the manual eyeball approach favoured my most SP project still.  I have used Powershell (both to gen http requests and to control IE).  MTM is good but it requires buy into the whole MTM process.  Personally I like Selenium IDE for Firefox.  It offers recording, and the capturing functionality is miles ahead of anything else.  These Selenium generate test can be export and used with Visual Studio or build into TFS or on a project I used TeamCity to run automated continuous build and integration.

Note:  Selenium IDE is the recording piece and Selenium WebDriver is the heavy duty real testing integration part.

Get Started:
1. Download Selenium IDE (make sure you get the Selenium IDE, I'm using version 2.9.0) 
2. Understand the UI and capabilities (YouTube basic Selenium IDE videos are great)
3. Install Selenium IDE on Firefox as shown below:

4. Launch Selenium IDE using FireFox

5. Record and run Selenium test (2 minute short video providing a Selenium IDE recorded test against a SharePoint Online Team Site).

Another option is to control IE using PowerShell
PS> $ie=New-Object -com internetexplorer.application  #open ie
PS> $ie.Navigate("http://www.radimaging.co.uk/Pages/default.aspx")