How to Navigate This Presentation
🎮 Controls
Use ← → ↑ ↓ arrow keys to navigate
Press Space or Enter to go to next slide
Press Esc to see slide overview
Press F for fullscreen mode
Press ? to see all keyboard shortcuts
The Problem We’re Solving
Making Playwright Available for Makers
- ✅ We want to reduce the size of the hill to climb
- ✅ We’re working with DevOps pipelines
- ✅ We want to perform UI tests
Today’s Agenda
🚀 What We’ll Cover
8 Key Steps Over 40 Minutes
- 🔧 Create First Test - Fork repo & use CodeGen (10 mins)
- 📦 Install Extension - FREE Playwright Extension (5 mins)
- ⚡ Execute Pipeline - See tests run in DevOps (15 mins)
- 📊 View Results - Rich HTML reports (5 mins)
- 🎁 Resources - Take Home Materials (3 mins)
- ❓ Q&A - Your Questions (2 mins)
Ian Tweedie
Certification Wall
PowerPlatformClinic.github.io
North East
Pre-requisites
- GitHub Account
- Azure DevOps with paralisum authorised
- Azure Devops and Github connected
- Power Platform Environment
- VSCode with GIT installed
Demo: Fork the Repository
Demo: Forking the starter template repository
Demo: Create Test with CodeGen
Live Demo: Using Playwright CodeGen to create a Model-Driven App test
TODO: Placeholder for video: CodeGen creating test demo
Demo: Create App Registration
Live Demo: Using Playwright CodeGen to create a Model-Driven App test
Placeholder for video: CodeGen creating test demo
App Registration
Client ID:
Tenant ID:
Secret:
Give Permission
Demo: Install Playwright Extension
Demo: Installing the FREE Playwright for Power Platform extension from Azure DevOps Marketplace
Install Extension
Create Pipeline
Trace Viewer
https://trace.playwright.dev/
What We’ve Accomplished
The Complete Recipe: Commit → Test → Deploy
- ✅ Used template repository
- ✅ Created UI test with CodeGen
- ✅ Installed FREE Playwright extension
- ✅ Executed automated tests in pipeline
- ✅ Viewed reports
Recommended Project Structure
PlaywrightForMakersProject/
├── tests/
│ ├── model-driven-app/
│ │ └── basic-navigation.spec.js
│ ├── power-pages/
│ │ └── form-submission.spec.js
├── (leave everything else aline - for)
└── .env
Sample Playwright Test
What a Model-Driven App test looks like:
// Navigate to app, create record, verify result
await page.goto(process.env.MODEL_DRIVEN_APP_URL);
await page.click('[data-testid="create-button"]');
await page.fill('#name-field', 'Test Record');
await page.click('[data-testid="save-button"]');
await expect(page.locator('.success-message')).toBeVisible();
Generated by CodeGen - no manual coding required!
Playwright Pipeline YAML
name: $(TeamProject)_$(BuildDefinitionName)_$(SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)
trigger:
- none
pool:
vmImage: windows-latest
steps:
- checkout: self
- task: mightoria-playwrightForPowerPlatformAdvanced@1
inputs:
testLocation: '$(System.DefaultWorkingDirectory)/tests'
browser: 'chromium'
trace: 'on'
outputLocation: '$(System.DefaultWorkingDirectory)'
appUrl: 'https://techtweedie.crm11.dynamics.com/main.aspx?appid=6653f9fc-b74b-f011-877a-6045bd0e2fc6'
appName: 'MDA Playwright Testing'
o365Username: 'playwright-test@Tweed.technology'
o365Password: '$(o365Password)'
tenantId: '63759d9f-bfca-4f52-ae98-8f2f1d7bc173'
dynamicsUrl: 'techtweedie.crm11.dynamics.com'
clientId: '6f3163d1-bd41-4f0e-8725-980f05d2a82f'
clientSecret: '$(ClientSecret)'
userRole: 'System Administrator'
team: 'orgbfc42920'
businessUnit: 'orgbfc42920'
- task: ArchiveFiles@2
inputs:
rootFolderOrFile: '$(System.DefaultWorkingDirectory)/playwright-report'
includeRootFolder: true
archiveType: 'zip'
archiveFile: '$(System.DefaultWorkingDirectory)/playwright-report/playwright-report.zip'
replaceExistingArchive: true
- publish: $(System.DefaultWorkingDirectory)/playwright-report/
artifact: playwright-report
# always create the artifact, this is useful for debugging failed tests
condition: always()
- task: PublishTestResults@2
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TEST-*.xml'
The Power of Re-usable Test Users
Created & Cleaned Up Automatically
- 🎭 Security: Test users get Just In Time permissions
- 🔐 Reusable users: Same user account used multiple times
- 🗑️ Auto Cleanup: No test data pollution in your environment
- 🔄 Consistent Results: Fresh environment every time
Why?
Playwright for Power Platform (P4PP) vs Traditional Testing
- ❌ Traditional: Write complex code, manage test infrastructure
- ✅ P4PP: Record actions, get code automatically
- ❌ Traditional: Separate test management tools
- ✅ P4PP: Tests run in your existing DevOps pipeline
- ❌ Traditional: Manage test users and data manually
- ✅ P4PP: Disposable users created automatically
Common Questions
“What if my app changes?”
Answer:
- Re-record with CodeGen - just run it again to update your tests
- Element selectors are robust - Playwright uses smart selectors that adapt
- Incremental updates - you don’t have to redo everything
- Consider taking next step - Page object model
“Do I need to be a developer?”
Answer:
- No coding required - CodeGen writes the tests for you
- Point and click - just use your app normally while recording
- Templates provided - start with working examples
- Community support - plenty of help available
“What about test data?”
Answer:
- Reusable users - permissions created fresh for each test run
- Clean environments - no test data pollution
- Consistent results - same starting point every time
- Automatic cleanup - minimum maintenance required
Key Takeaways
You Now Have the Complete Recipe
Commit → Automatic UI Tests → Deploy
- 🎯 Testing doesn’t have to be hard - CodeGen writes the code for you
- ⚡ Integration is seamless - Works with your existing DevOps pipeline
- 🔄 Reusable users eliminate cleanup - Fresh permissions every time
- 📊 Rich reports show exactly what happened - No guessing games
- 🆓 It’s completely FREE - No licensing costs for the extension
Thankyou & Questions?
Slides
Connect
Agenda
Feedback
