Skip to content

Latest commit

 

History

History
228 lines (179 loc) · 5.36 KB

README.md

File metadata and controls

228 lines (179 loc) · 5.36 KB
Raw

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

Hyperlinks for contents

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();