Automating regression tests using Playwright

When building and maintaining PowerApps Portals, regression testing ensures that newly deployed changes do not break existing functionality. Manually testing every feature is time-consuming and error-prone. Automating regression tests using Playwright, a Node.js-based end-to-end testing tool, can significantly streamline this process by testing your portal in real browsers like Chrome, Firefox, and WebKit.

Below is a detailed, step-by-step guide on how to set up and automate regression tests using Playwright, specifically tailored for PowerApps Portals.

---

1. What is Playwright?

Playwright is a modern open-source automation tool developed by Microsoft. It allows:

• End-to-end testing across Chromium, Firefox, and WebKit
• Running tests in headless or headed mode
• Network mocking, visual comparisons, and parallel execution

It’s ideal for automating user flows on portals where form submissions, login, navigation, and data loading need to be verified repeatedly.

---

2. Why Use Playwright for PowerApps Portals?

Cross-browser support
Easy to write and maintain test scripts
Excellent for complex interactions like:

• Multi-step forms
• JavaScript-heavy pages
• Responsive components
  CI/CD-friendly (can be integrated into GitHub Actions, Azure DevOps)

---

3. Prerequisites

Before starting:

• Install Node.js (v16 or above)
• Have access to your PowerApps Portal URL
• Optional: Have credentials for testing user login (if needed)

---

4. Setting Up Playwright

Step 1: Create a project folder

mkdir portal-tests
cd portal-tests
npm init -y

Step 2: Install Playwright

npm install -D @playwright/test
npx playwright install

This installs Chromium, Firefox, and WebKit drivers.

---

5. Creating Your First Test

Create a file home.spec.ts inside a tests folder:

bashCopyEditmkdir tests
touch tests/home.spec.ts

Sample test to verify homepage loads and title exists:

import { test, expect } from '@playwright/test';

test('Home Page Loads and Title is Visible', async ({ page }) => {
  await page.goto('https://yourportal.powerappsportals.com/');
  
  // Check page title
  await expect(page).toHaveTitle(/Power Apps Portal/i);

  // Check if a heading or banner is visible
  await expect(page.locator('h1')).toBeVisible();
});

Run the test:

npx playwright test

---

6. Example: Testing Login and Form Submission

test('Login and Submit Contact Form', async ({ page }) => {
  await page.goto('https://yourportal.powerappsportals.com/');

  // Navigate to sign-in
  await page.click('text=Sign In');
  await page.fill('#Email', 'testuser@example.com');
  await page.fill('#Password', 'P@ssword123');
  await page.click('text=Login');

  // Go to contact form
  await page.click('text=Contact Us');
  await page.fill('#fullname', 'Irfan Hasan');
  await page.fill('#email', 'testuser@example.com');
  await page.fill('#message', 'This is a test message.');
  await page.click('button[type="submit"]');

  // Verify success message
  await expect(page.locator('.success-message')).toBeVisible();
});

---

7. Organizing Regression Tests

Suggested Folder Structure:

portal-tests/
├── tests/
│   ├── home.spec.ts
│   ├── login.spec.ts
│   ├── forms.spec.ts
│   └── navigation.spec.ts
├── utils/
│   └── loginHelper.ts
├── playwright.config.ts
└── package.json

Create helper functions for common actions like login in utils/loginHelper.ts:

export async function login(page, email, password) {
  await page.goto('https://yourportal.powerappsportals.com/');
  await page.click('text=Sign In');
  await page.fill('#Email', email);
  await page.fill('#Password', password);
  await page.click('text=Login');
}

---

8. Configuring Playwright

Create a playwright.config.ts file:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 60000,
  retries: 1,
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ]
});

---

9. Running Tests Across Browsers

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

Or run all at once:

bashCopyEditnpx playwright test

---

10. Viewing Results and Reports

After the run, generate a report:

npx playwright show-report

This will open an HTML-based report showing:

• Test status
• Screenshots
• Errors and logs

---

11. CI/CD Integration (GitHub Actions)

Create .github/workflows/playwright.yml:

name: Playwright Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npx playwright install --with-deps
      - run: npx playwright test

---

12. Best Practices for Regression Testing

• Test core features: Home, Login, Form submissions, Entity Lists
• Use data-test-id attributes for locating elements reliably
• Separate tests into smoke, regression, and functional suites
• Maintain test data or use mocks if required
• Enable headless mode for faster execution
• Validate accessibility with axe-playwright plugin

---

13. Troubleshooting Tips

Issue	Fix
Page timeout	Increase test timeout in config
Element not found	Use await page.waitForSelector()
Login fails	Confirm test credentials and selectors
CI/CD failures	Run locally with --debug for investigation

---

14. When to Run Regression Tests

• Before every release to production
• After any major portal or platform updates
• After modifying JavaScript, CSS, or entity lists

You can also schedule nightly builds to automatically validate your portal’s health.