How to Parameterize Playwright tests by data using for loop?

ONLINECAST

2 min read

·

05-10-2024

10

0

Share

Supercharge Your Playwright Tests with Parameterization using For Loops

Testing with Playwright is fantastic, but wouldn't it be amazing to run the same test scenario with different sets of data? That's where parameterization comes in, and you can leverage the power of for loops to achieve this efficiently.

Imagine this scenario: You're testing a login form on your website. You want to verify it works for various username and password combinations, including valid, invalid, and edge cases. Running the same test multiple times with different credentials would be tedious.

Here's a snippet of a basic Playwright test:

const { test, expect } = require('@playwright/test');

test('Login with valid credentials', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'valid_user');
  await page.fill('#password', 'valid_password');
  await page.click('button[type="submit"]');
  await expect(page.locator('.success-message')).toBeVisible();
}); 

This test verifies a successful login with "valid_user" and "valid_password". But how can we automate testing different scenarios without rewriting the entire test for each combination?

Enter the Power of Parameterization and For Loops

Here's how we can parameterize our test to handle multiple credentials:

const { test, expect } = require('@playwright/test');

const credentials = [
  { username: 'valid_user', password: 'valid_password' },
  { username: 'invalid_user', password: 'invalid_password' },
  { username: 'empty_user', password: 'valid_password' },
  // Add more credential sets as needed
];

test.describe('Login Tests', () => {
  for (const credential of credentials) {
    test(`Login with ${credential.username}`, async ({ page }) => {
      await page.goto('https://example.com/login');
      await page.fill('#username', credential.username);
      await page.fill('#password', credential.password);
      await page.click('button[type="submit"]');

      if (credential.username === 'valid_user') {
        await expect(page.locator('.success-message')).toBeVisible();
      } else {
        await expect(page.locator('.error-message')).toBeVisible();
      }
    });
  }
});

Explanation:

1. Data Structure: We define an array credentials containing objects, each representing a login attempt with username and password.

2. Test Description: We group our parameterized tests under a test.describe block for better organization.

3. For Loop: The for loop iterates through each credential object in the array.

4. Dynamic Test Names: test(Login with ${credential.username}`) creates unique test names for each iteration based on the username.

5. Dynamic Data Injection: Inside each test, credential.username and credential.password are used to populate the login form, dynamically injecting different data for each run.

6. Assertions: We adjust the assertion logic to match expected outcomes based on the credential set.

Benefits of Parameterization:

• Concise Code: Avoids code duplication and makes your test suite more readable and manageable.
• Improved Test Coverage: Easily test various scenarios with different data inputs, ensuring comprehensive test coverage.
• Reduced Maintenance: Modifying the test data is simpler than changing the entire test logic.
• Data-Driven Testing: Parameterization encourages writing data-driven tests, making your tests more robust and adaptable.

Further Enhancements:

• Data from External Sources: Instead of hardcoding data in the array, fetch it from CSV files, JSON files, or databases.
• Test Data Generators: Libraries like faker can generate realistic test data for scenarios like user names, addresses, or credit card details.

By adopting parameterization with for loops in Playwright, you can dramatically increase the efficiency and effectiveness of your automated tests. This empowers you to write concise, comprehensive, and maintainable tests that ensure the quality and reliability of your applications.