playwright-debugging

Playwright Debugging Guide

When debugging Playwright test failures in this Cucumber project, follow this systematic approach:

Common Debugging Strategies

1. Element Not Found Issues

// Add debug logging to step definitions
console.log('Looking for element:', await this.page.locator('[selector]').count());

// Use Playwright's built-in waiting
await this.page.waitForSelector('[selector]', { timeout: 10000 });

// Check if element is visible
await expect(this.page.locator('[selector]')).toBeVisible({ timeout: 10000 });

2. Network and Loading Issues

// Wait for network to be idle
await this.page.waitForLoadState('networkidle');

// Wait for specific network requests
await this.page.waitForResponse(response => 
  response.url().includes('[endpoint]') && response.status() === 200
);

3. Environment Setup Debugging

// In step definitions, check environment variables
console.log('Environment check:', {
  username: !!process.env.SF_USERNAME,
  password: !!process.env.SF_PASSWORD,
  baseUrl: process.env.BASE_URL || 'not set'
});

4. Page Object Debugging

// Add debugging methods to page objects
async debugState(): Promise<void> {
  console.log('Current URL:', this.page.url());
  console.log('Page title:', await this.page.title());
  console.log('Username field visible:', await this.usernameInput.isVisible());
  console.log('Password field visible:', await this.passwordInput.isVisible());
}

Debugging Configurations

Enable Debug Mode in Cucumber

// In cucumber.mjs, add debug options
export default {
  // ... existing config
  format: [
    '@cucumber/pretty-formatter',
    'allure-cucumberjs/reporter'
  ],
  formatOptions: {
    snippetInterface: 'async-await'
  }
};

Playwright Debug Options

// Add to support/world.ts for browser debugging
const browserOptions = {
  headless: false,
  slowMo: 1000,
  devtools: true
};

Troubleshooting Checklist

1. Environment Variables: Verify SF_USERNAME and SF_PASSWORD are set
2. Network Connectivity: Check if Salesforce URL is accessible
3. Element Selectors: Use browser dev tools to verify selectors
4. Timing Issues: Add appropriate waits for dynamic content
5. Browser State: Ensure clean browser state between tests

Useful Debug Commands

# Run with debug output
DEBUG=pw:api npm run test

# Run specific scenario
npx cucumber-js tests/features/Login/Login.feature --name "Successful Login"

# Run with browser visible
HEADLESS=false npm run test

Logging Strategy

• Use structured logging with the @argenis.dominguez/logger package
• Log before and after critical actions
• Include context like page URL, element states, and user inputs
• Use different log levels: error, warn, info, debug