[E2E, API] Automation tests for page: https://automationexercise.com

Hyperlinks for contents

• Extension
• Playwright snippets
• Config modifications
• Installation
  • Project installation
  • Prettier
  • Faker.js

Used extensions and library in project

• 🎭 Playwright Test for VSCode

• GitHub Actions/ GitLens Inspect

• Prettier (installation bellow)

• Better Comments

• Code Spell Checker

• Auto-Open Markdown Preview

• VSCode-icons

• Faker.js (installation bellow) (library)

Playwright snippets

• advertisements blocker

  await page.route('**/*', (route) => {
    if (route.request().url().startsWith('https://googleads.')) {
      route.abort();
    } else if (route.request().url().startsWith('https://fonts.googleapis.')) {
      route.abort();
    } else {
      route.continue();
    }
  });

• interact with the web page dialogs [ products.spec.ts > Test Case 6: Contact Us Form ]

  page.on('dialog', (dialog) => dialog.accept());
  await page.locator('#dialog').click();

• scroll down the page [ products.spec.ts > Test Case 10: Verify Subscription in home page ]

  // Scroll Down
  await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });
  
  // Scroll Up
  await page.evaluate(() => {
    window.scrollTo(0, 0);
  });

• catch success alert [ products.spec.ts > Test Case 10: Verify Subscription in home page ]

  await expect(page.locator('#alert')).toContainText('Success!');

• count all rows in table [ navbar.spec.ts > Test Case 12: Add Products in Cart ]

  const rowCount = await page.locator('tr').count();
  await expect(rowCount).toBe(number);

• use regex to check changing link "Logged in as userName"

  /^Logged in as \w+$/;

• locating by using href link

  page.locator('[href*="/pageName"]', { hasText: 'Page Name' });

• examples using loop for [ cart.spec.ts > Test Case 20: Search Products and Verify Cart After Login ]

  • catching by $$ selector

    const loops = await page.$$('selector');
    
    for (const loop of loops) {
      await loop.click();
    }

  • catching by text and method .all()

    for (const loop of await page.locator('.class').getByText('Text').all()) {
      await loop.click();
    }

  • catching by text and method .count()

    const loop = page.locator('.class').getByText('Text');
    for (let i = 0; i < (await loop.count()); i++) {
      await loop.nth(i).click();
    }

• download method with console.log [ cart.spec.ts > Test Case 24: Download Invoice after purchase order ]

  const downloadPromise = page.waitForEvent('download');
  await page.locator('#download').click();
  const download = await downloadPromise;
  if (download) {
    console.log('File downloaded successfully.');
    await download.saveAs('./test-download/e2e/cart/Invoice.txt');
  } else {
    console.log('File download failed.');
  }

• catch page by screen [ home.spec.ts > Test Case 25/26: Verify Scroll Up using/without 'Arrow' button and Scroll Down functionality ]

  • full page

    await page.screenshot({ path: './screenshot.png', fullPage: true });

  • actually visible elements of page

    await page.screenshot({ path: './screenshot.png' });

  • element on page

    await page.locator('.class').screenshot({ path: './screenshot.png' });

Playwright Config modifications

• add timeout and expect timeout

  timeout: 30 * 1000,
  expect: {
      /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
        timeout: 5000,
        },

• add other attribute for testid

  use: {
      // Set the test id to use a custom data attribute.
      testIdAttribute: 'data-qa',
      },

• add Trace Viewer, Video and Screenshot when retrying failed test

  use: {
        trace: 'retain-on-failure',
        video: 'retain-on-failure',
        screenshot: 'only-on-failure',
      },

Installation

• Project installation

  • install commands

    npm install
    npm init playwright@latest

• Prettier

  • install

    npm install --save-dev --save-exact prettier

  • configure

    • exclude files in .prettierignore

      package-lock.json
      playwright-report
      test-download
      test-upload
      test-results
      

    • set rules in .prettierrc.json

      {
      "singleQuote": true,
      "endOfLine": "auto",
      "printWidth": 150
      }

• Faker

  • install

    npm install --save-dev @faker-js/faker

  • usage

    import { faker } from '@faker-js/faker';
    
    const email = faker.internet.email();