How to use chatgpt to write a Playwright code

The quality of code ChatGPT generates heavily depends on how detailed and specific your prompts are. Here’s how to craft effective prompts:

1. Start with the Test Objective

• Provide a clear goal for the test. Specify what functionality you are testing and any expected outcomes.
• Example:
  "Write a Playwright script to test the login functionality of a website where the user enters valid credentials and lands on the dashboard page."

2. Include Application Details

• Share essential details about the application, such as:
• URL structure
• Frameworks or libraries used (e.g., Angular, React)
• Dynamic elements or authentication methods
• Example:
  "The application is a React-based e-commerce site, and the login page uses a two-step authentication process."

3. Specify Element Locators

• Provide the structure or specific attributes of elements you want to interact with.
• Example:
  "The login form has an input field withid='username' , a password field with id='password', and a button with id='loginButton'."

4. Define the Expected Behavior

• Outline what constitutes a successful or failed test.
• Example:
  "If the login is successful, the user should see a dashboard with the title Welcome, [username]."

5. Request Best Practices

• Ask for reusable functions, comments, and clear variable naming for better maintainability.
• Example:
  "Use reusable functions for form filling, add comments for each step, and include error handling for failed scenarios."

6. Share Special Requirements

• If you have specific constraints or tools to use (like TypeScript or specific plugins), mention them.
• Example:
  "Use TypeScript and include assertions using the Playwright Test library."

Example Prompt and Output

Write a Playwright test script to automate the login functionality. The script should:

1. Step 1:Navigate to the login page.
2. Step 2:Fill in the username and password fields
3. Step 3:Click the login button.
4. Step 4:Verify that the user is redirected to a dashboard with the text 'Welcome [username]'. Use the Playwright Test library and include reusable functions with comments."

HTML Code for Login page

 
              
<form id="loginForm" aria-labelledby="login-form-title">

  <h1 id="login-form-title">Login</h1>

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" aria-label="Username">

  <label for="password">Password:</label>

  <input type="password" id="password" name="password" aria-label="Password">

  <button type="submit" id="loginButton" role="button" aria-label="Login Button">Login</button>

</form>
              

            

Generated Code: typescript

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

  test('Login functionality', async ({ page }) => {
    // Navigate to the login page
    await page.goto('https://example.com/login');
  
    // Fill in the username field using aria-label
    await page.getByRole('textbox', { name: 'Username' }).fill('testUser');
  
    // Fill in the password field using aria-label
    await page.getByRole('textbox', { name: 'Password' }).fill('testPassword');
  
    // Click the login button using role and label
    await page.getByRole('button', { name: 'Login Button' }).click();
  
    // Wait for navigation to the dashboard
    await page.waitForNavigation();
  
    // Assert that the user is redirected to the dashboard and sees the welcome message
    const welcomeMessage = await page.getByText('Welcome testUser').isVisible();
    expect(welcomeMessage).toBeTruthy();
  });
            
            

Benefits of Using Source Code in Prompts

1. 1. Real-World Context: Including actual HTML provides ChatGPT with a clear understanding of the DOM structure.
2. 2. Custom Tailoring: The generated script aligns perfectly with the source code, reducing ambiguity.
3. 3. Improved Accuracy: ChatGPT can infer element locators, making the script more reliable for your specific use case.
4. 4. Locator Optimization: Using Playwright-specific locators like getByRole or getByText ensures a cleaner and more robust script, reducing maintenance and increasing the adaptability of your test suite to future UI changes.

Tips for Automation Testers Using ChatGPT

1. Iterate on the Prompt

If the initial output doesn’t meet your needs, refine your prompt. Provide more context or clarify missing details.

2. Review the Output

Always review and test the code for accuracy and alignment with your project standards.

3. Explore Advanced Use Cases

Ask ChatGPT to:

• Generate test suites.
• Suggest patterns for data-driven testing.
• Write helpers or utility functions for common actions.

4. Learn Playwright Features

Use ChatGPT as a learning tool. Ask questions about Playwright APIs, debugging strategies, or best practices

Advanced Use Cases

Data-Driven Tests:

"Create a Playwright test suite for login scenarios using a data-driven approach with credentials provided in an array."

Parallel Testing:

"Write Playwright tests that run in parallel for testing multiple user roles on a dashboard."

Visual Testing:

"Generate a Playwright script for visual regression testing of a homepage."