Setup for Web Testing (Puppeteer)

Readme.md

1. download nodeJS
2. create empty folder, open it with vscode
3. vscode -> terminal
4. npm init
5. npm i puppeteer tsx

create a index.ts:

import test from 'node:test';
import puppeteer from 'puppeteer';


// Launch the browser and open a new blank page
const browser = await puppeteer.launch();
const page = await browser.newPage();

suite('do something', () => {
  test('set the url', async (t) => {


    // Navigate the page to a URL.
    await page.goto('https://developer.chrome.com/');

    // Set screen size.
    await page.setViewport({width: 1080, height: 1024});
  });

  test('do the stuff', async (t) => {

    // Type into search box.
    await page.locator('.devsite-search-field').fill('automate beyond recorder');

    // Wait and click on first result.
    await page.locator('.devsite-result-item-link').click();

    // Locate the full title with a unique string.
    const textSelector = await page
      .locator('text/Customize and automate')
      .waitHandle();
    const fullTitle = await textSelector?.evaluate(el => el.textContent);

    // Print the full title.
    console.log('The title of this blog post is "%s".', fullTitle);

    assert.strictEqual(1, 1);
  });

});


await browser.close();

run:

tsx --test-reporter=spec index.ts

or

node --test-reporter=spec index.mjs

More:

• generate puppeteer code from chrome/chromium's record function ( https://www.youtube.com/watch?v=lgyszZhAZOI )
  • alternative for selenium: https://chromewebstore.google.com/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd
• Puppeteer docs: https://pptr.dev/
• use Nodes Test functions (no need for mocha or alike) https://nodejs.org/api/test.html
• use tsx to be able to use typescript in script as well
• npm 'sendmail' for mail sending, npm 'read-excel-file' ...

alternatives: selenium-webdriver and playwright