We need balance between speed and quality
-
Pressure for quick delivery
-
Importance of quality
-
Effective testing processes
🧭 Usability test
🔁 Regression test
✅ User Acceptance test (UAT)
🔒 Security test
🧩 Unit test
🚀 Performance test
🏁 End-to-End testing (E2E)
-
AI behavior is dynamic and not always predictable
-
Small prompt changes can break your app
-
Less code ≠ less risk (often the opposite)
-
More integrations = more points of failure
-
Early integration of testing
-
Continuous testing practices
-
Alignment with development cycles
- Live monitor your apps
- Automated logging of actions and errors
- Extend monitoring by using the Trace function
- Share monitor session to collect session data
- Application Insights
-
Easy to use Power FX function
-
Can be used anywhere in your app (canvas or custom page)
-
Predefined severities
-
Add custom information to your monitor
- Faster execution of tests
- Consistency & reliability
- Faster detection of regressions
- Integration into CI/CD pipelines
- Less boring & time consuming
- 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
✅ Integrated in Power Apps Studio
✅ Easy to use
✅ Power FX on board
✅ ALM options with Test Engine
::right::
⛔ Modern controls & components
- 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 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✅ 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
✅ For all modern web applications
💯 Open-source from Microsoft
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
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 generated code
5️⃣ Checks true or false (with await)
Add additional assertions to your tests
await expect(
page.getByTestId('status')
).toHaveText('Submitted');Canvas app example
await expect(
page.locator('iframe[name="fullscreen-app-host"]')
.contentFrame().getByRole('spinbutton', { name: 'Hours' })
).toHaveValue("1");Create snapshots to provide a YAML representation of a selection
await expect(page.locator('#content')).toMatchAriaSnapshot(
- navigation:
- list:
- listitem:
- link "Intro":
- /url: /emea2025
- listitem:
- link "Speakers":
- /url: /conferences-and-events/directions/emea2025/speakers
);Create and save screenshot
await page.screenshot({ path: 'screenshot.png' });Create and save screen recording
// Record video
await page.screencast.start();
await page.screencast.stop();Add information to screen recording
await page.screencast.showChapter('Verifying checkout flow', {
description: 'Navigating Canvas App',
});- Headed browser
- Trace Viewer
- Reports
- UI Mode
Get your report
npx playwright show-report
Run your tests in UI mode
npx playwright test --ui
✅ Emulation (viewports & devices)
✅ Parallelism
✅ Accessibility testing
✅ API Testing
✅ Mock API's
✅ Visual comparisons
- Agents
- Playwright MCP
- Playwright CLI & Skills
- Planner
- Generator
- Healer
Start with adding Playwright Test Agent by using the initialize agents command
npx playwright init-agents --loop=vscodeA Model Context Protocol server that provides browser automation capabilities using Playright. Enables LLMs to interact with web pages through structured accessibility snapshots
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Install CLI & Skills
npm install -g @playwright/cli@latest
playwright-cli install --skillsplaywright-cli open [url] # open browser, optionally navigate to url
playwright-cli goto <url> # navigate to a url
playwright-cli close # close the page
playwright-cli type <text> # type text into editable element
playwright-cli click <ref> [button] # perform click on a web page
playwright-cli dblclick <ref> [button] # perform double click on a web page
playwright-cli fill <ref> <text> # fill text into editable element
playwright-cli fill <ref> <text> --submit # fill and press Enter
playwright-cli drag <startRef> <endRef> # perform drag and drop between two elements
playwright-cli hover <ref> # hover over element on page
playwright-cli select <ref> <val> # select an option in a dropdown
playwright-cli upload <file> # upload one or multiple files
playwright-cli check <ref> # check a checkbox or radio button
playwright-cli uncheck <ref> # uncheck a checkbox or radio button
playwright-cli snapshot # capture page snapshot to obtain element ref/playwright-cli Open learn.microsoft.com. Test the complete user journey. Report any failures with screenshots.✅ Username & Password
✅ One Time Passwors (OTP)
✅ Save Authenticated State
const authFile = path.join(__dirname, '../playwright/.auth/user.json');
setup('authenticate', async ({ page }) => {
// login process
await page.context().storageState({ path: authFile });
});✅ GitHub Actions
✅ Azure DevOps Pipelines
✅ Docker
✅ Google Cloud Build
... and many more
During the installation of the Playwright extension, you get a GitHub workflow file!
See .github/workflows/playywright.yml