Testing Multiple Users and Roles with Playwright Browser Contexts

In modern web applications, it is common to have different user roles with distinct access levels and permissions. Testing these multiple roles and ensuring that each user experience is functioning correctly can be a challenging task. Fortunately, Playwright offers a powerful feature known as Browser Contexts, allowing developers to simulate multiple users and roles within a single browser instance.

In this article, we'll explore how to use Playwright’s Browser Contexts to test applications with different user roles efficiently, and why it is an essential tool for any web developer focused on automating user role-based testing.

Why Test Multiple Users and Roles?

When building web applications, users can have different levels of access and permissions depending on their roles, such as admins, editors, or general users. Testing these roles helps ensure that:

• Security: Users can only access what they are permitted to see or interact with.
• Data Integrity: Each user can only modify data relevant to their role.
• User Experience: The user experience is optimized for each role, whether it’s a manager overseeing dashboards or an employee submitting requests.

Manual testing of these roles can become tedious and error-prone, especially when switching between different users. Playwright’s Browser Contexts solve this problem by allowing developers to test multiple roles simultaneously.

What Are Playwright Browser Contexts?

Browser Contexts in Playwright allow you to run multiple independent browser sessions within a single instance of the browser. Each context behaves like a separate browser, with its own cookies, storage, and cache. This feature is particularly useful for testing scenarios that involve multiple users, as each context can simulate a unique session with its own login credentials and role-based access.

Key Benefits of Using Browser Contexts

• Isolated Sessions: Each context acts as a separate user session, so there’s no interference between different user roles.
• Simultaneous Testing: You can run tests for multiple users or roles simultaneously, which speeds up testing and ensures better coverage.
• Shared Resources: Since contexts run in the same browser instance, they share resources, making tests more efficient in terms of memory and processing.

Setting Up Browser Contexts in Playwright

To get started with Browser Contexts in Playwright, you first need to set up your environment. Ensure that you have Node.js installed, and then install Playwright by running the following command:

npm install --save-dev playwright

Once you have Playwright installed, you can create multiple browser contexts in your tests to simulate different users.

Creating and Using Browser Contexts

Here’s an example of how to create multiple browser contexts to simulate two different user roles: an admin and a regular user.

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    
    // Admin context
    const adminContext = await browser.newContext();
    const adminPage = await adminContext.newPage();
    await adminPage.goto('https://example.com/admin');
    await adminPage.fill('#username', 'admin_user');
    await adminPage.fill('#password', 'admin_pass');
    await adminPage.click('button#login');
    
    // Regular user context
    const userContext = await browser.newContext();
    const userPage = await userContext.newPage();
    await userPage.goto('https://example.com/login');
    await userPage.fill('#username', 'regular_user');
    await userPage.fill('#password', 'user_pass');
    await userPage.click('button#login');
    
    // Interact with admin and user pages simultaneously
    await adminPage.screenshot({ path: 'admin_dashboard.png' });
    await userPage.screenshot({ path: 'user_dashboard.png' });
    
    await browser.close();
})();
        

In this example, two separate browser contexts are created, simulating two different users logging into an application. Each context operates independently, allowing you to test interactions as separate users simultaneously.

Testing Role-Specific Permissions

A common requirement when testing different roles is to verify that specific permissions are enforced correctly. For example, an admin might have access to modify user data, while a regular user can only view their own data.

Here’s how you can use Playwright to test role-specific permissions by creating assertions based on user role capabilities:

(async () => {
    // Admin page interaction
    await adminPage.goto('https://example.com/admin/dashboard');
    const adminHasAccess = await adminPage.isVisible('button#modifyUser');
    console.log('Admin modify access:', adminHasAccess);  // Should print true
    
    // User page interaction
    await userPage.goto('https://example.com/user/profile');
    const userHasAccess = await userPage.isVisible('button#modifyUser');
    console.log('User modify access:', userHasAccess);  // Should print false
    
    await browser.close();
})();
        

In this test, we verify that the admin has the ability to modify user data, whereas the regular user does not, ensuring that permissions are correctly enforced based on roles.

Simulating Multiple Users with Different Browser Contexts

One of the most powerful features of Playwright Browser Contexts is the ability to simulate multiple users performing actions simultaneously. This can be useful for testing scenarios where multiple users need to interact with shared resources, such as collaborating on a document or chatting in real time.

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();

    // User 1 context
    const user1Context = await browser.newContext();
    const user1Page = await user1Context.newPage();
    await user1Page.goto('https://example.com/chat');
    await user1Page.fill('#message', 'Hello from User 1');
    await user1Page.click('button#send');

    // User 2 context
    const user2Context = await browser.newContext();
    const user2Page = await user2Context.newPage();
    await user2Page.goto('https://example.com/chat');
    await user2Page.waitForSelector('div.message:has-text("Hello from User 1")');

    await browser.close();
})();
        

In this scenario, two users are simulated in separate browser contexts. User 1 sends a message, and User 2 receives it, demonstrating how you can test real-time collaboration features using Playwright.

Integrating Playwright with CI/CD for Role-Based Testing

Automating the testing of different roles and users becomes even more powerful when integrated into a continuous integration/continuous deployment (CI/CD) pipeline. This ensures that your tests are run automatically every time you push new code, making it easier to catch issues early.

You can set up Playwright with CI/CD using platforms like GitHub Actions, as shown in the workflow example below:

name: Playwright Role-Based Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run Playwright tests
        run: npx playwright test
        

This configuration automatically runs your Playwright tests on every push or pull request, ensuring that your application’s role-based functionality is continuously verified.

Best Practices for Role-Based Testing with Playwright

• Use Isolated Contexts: Ensure that each user role is tested in its own context to avoid session overlap.
• Test Critical Role Permissions: Always focus on verifying the most critical actions specific to each user role, such as administrative functions or user-specific data views.
• Run Tests in Parallel: Take advantage of Playwright’s ability to run tests in parallel to speed up your test suite execution.

Conclusion

Playwright Browser Contexts provide a robust and efficient way to test multiple users and roles in web applications. By simulating different user sessions in isolated contexts, you can ensure that your role-based access and permissions work as intended, while reducing the complexity of testing different user scenarios.

With the power of Playwright and its easy integration into CI/CD pipelines, developers can automate user role testing and ensure their applications meet the needs of various users, improving both security and user experience.