slides.md

Play it (w)right

Automated end-to-end testing in the Power Platform

Testing

Why do we need to test

➡️ Ensure quality

➡️ Validating requirements

➡️ Reliability

➡️ Performance

... and more reasons

The balance between speed and quality

➡️ Pressure for quick delivery

➡️ Importance of quality

➡️ Effective testing processes

CI/CD

✅ Continuous Integration

✅ Continuous Delivery

🚀 Continuous Testing

Live monitor

Live monitor your apps

What’s live monitor?

✅ Live monitor your apps

✅ Automated logging of actions and errors

✅ Extend monitoring by using the Trace function

✅ Share monitor session to collect data from multiple users

💡 Application Insights

Where to find?

➡️ Advanced tools ➡️ Open live monitor

How to use?

➡️ Start session ➡️ Use app ➡️ See results

More details

➡️ Click item ➡️ Right pane opens ➡️ See details

Invite to monitor session

➡️ Click Invite (top right) ➡️ Enter name/address ➡️ Copy link and share with user

Collect data from end users

➡️ Click Live monitor ➡️ Connect user or ➡️ Copy Live monitor link

Extend live monitor

Add custom traces to your live monitor

What's a trace

✅ Easy to use Power FX function

✅ Can be used anywhere in your app

✅ Predefined severities

✅ Add custom information to your monitor

How to use?

Custom information

Add custom information to your trace

Automated testing

We are already good at automation ... let’s automate our testing

Why automate?

✅ Faster execution of tests

✅ Consistency & reliability

✅ Faster detection of regressions

✅ Integration into CI/CD pipelines

Test Studio

Testing in Power Apps Studio

Power Apps Test Studio

✅ Low-code solution for writing, organizing and automate your tests

✅ Record your tests or write tests in Power Fx code

✅ Integrated in Power Apps Studio

💡 Automate your tests using Test Engine

Where to find?

➡️ Advanced tools ➡️ Open tests

Record new test

➡️ New case ➡️ Record ➡️ Use your app

However, there is a challenge

Modern controls and components will not function if you record a test 😩

Using Power FX

You can use Power Fx to write your tests (works for modern controls, still not for components)

Validate Tests

Use the Assert() Power FX function to validate your test

Output options

When a testcase or testsuite is complete

Test Studio pros & cons

Pros

➡️ Integrated in Power Apps Studio

➡️ Easy to use

➡️ Power FX on board

➡️ ALM options with Test Engine

Cons

➡️ Canvas Apps only

➡️ Modern controls & components

➡️ Not much output and reporting

➡️ In development

Test engine

Automate your tests in the power platform

Automate using Test Engine

✅ Power Platform CLI component

✅ Export your tests from Test Studio

✅ Add a little bit of YAML magic

✅ Add functions (like screenshots or assertions)

✅ Automate via PAC CLI in your pipelines

Run your test

Run your Test Studio test using PAC CLI

pac test run 
    --provider canvas 
    --test-plan-file your-testplan.te.yaml 
    --tenant your-tenantid-guid-value 
    --environment-id your-environmentid-guid-value

Playwright

Automate your end-to-end tests

What's Playwright?

✅ Cross-browser, Cross-platform, Cross-language

✅ Easily record your tests with Codegen

✅ Automatic page inspection (DOM)

✅ Testrun information in the Trace Viewer, UI Mode and/or report function

✅ DevOps or GitHub integration

✅ Open-source from Microsoft

✅ For all modern web applications ... including Business Central 🚀

How does it work?

1️⃣ Record a test using Codegen

2️⃣ It generates a scripted test for you (live)

3️⃣ Add custom assertions (evaluate value)

4️⃣ Runs every single line of the code

5️⃣ Checks true or false (with await)

How to start?

1️⃣ Get the Visual Studio Code Extension

2️⃣ Initialize Playwright

3️⃣ Start recording your first test

4️⃣ Choose your browser(s) and play your test

5️⃣ Get your report

How to start?

1️⃣ Get the Visual Studio Code Extension

How to start?

2️⃣ Initialize Playwright

How to start?

3️⃣ Start recording your first test

How to start?

4️⃣ Choose your browser(s) and play your test

How to start?

5️⃣ Get your report

Assertion

Add additional assertions to your tests

await expect(page.getByTestId('status')).toHaveText('Submitted');

Aria snapshot

Create aria snapshots to provide a YAML representation of the accessibility tree of a page.

await expect(page.locator('#content')).toMatchAriaSnapshot(
    - navigation:
      - list:
        - listitem:
          - link "Intro":
            - /url: /emea2025
        - listitem:
          - link "Speakers":
            - /url: /conferences-and-events/directions/emea2025/speakers
    );

Screenshot

Create and save screenshots in your test

await page.screenshot({ path: 'screenshot.png' });

View your tests

➡️ Headed browser

➡️ Trace Viewer

➡️ Reports

➡️ UI Mode 👀

UI Mode

Run your tests in UI mode

npx playwright test --ui

Continuous integration

Playwright can be run on any CI provider

✅ GitHub Actions

✅ Azure DevOps Pipelines

✅ Docker

✅ Google Cloud Built

💯 ... and many more

GitHub Actions

During the installation of the Playwright extension, a GitHub workflow file is created.

There is more ...

✅ Emulation (viewports & devices)

✅ Parallelism

✅ Accessibility testing

✅ API Testing

✅ Mock API's

✅ Visual comparisons

Playwright & AI

✅ Playwright MCP

✅ Playwright Agent

Links

Live Monitor
https://learn.microsoft.com/en-us/power-apps/maker/monitor-overview

Test Studio
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/test-studio

Test Engine
https://learn.microsoft.com/en-us/power-platform/test-engine/overview?tabs=manual

Playwright
https://playwright.dev/

DemoTime
https://demotime.show/