Playwright test: Simulating basic interactions between two agents (Alice and Bob) through a real time web app (Local Party, think of it as the Server agent).

playwright-test-2023-10-25.js

/**
 * @file
 * Simulating basic interactions between two agents (Alice and Bob) through
 *   a real time web app (Local Party, think of it as the Server agent).
 * 
 * Notes:
 * - I couldn't test it on my own web app (Peer Party is bugged ATM),
 *   so I had to test it on a similar website.
 * - My ultimate goal is to do basic BDD (or E2E testing) for my PP.
 * - Tested with Playwright v1.39 using previously installed browsers: Edge and Chrome.
 * - Screenshot: [playwright-test-2023-10-25.png](https://user-images.githubusercontent.com/32184973/278153347-6cce52dc-2ff9-4d7a-bbe7-6f578e39ec5a.png)
 * - Date: 2023-10-25
 */

const playwright = require('playwright');

const webstite = 'https://localparty.netlify.app'

const charadeLow = String.raw`D:\watch\films--done\public-domain\CHARADE_1953_512kb.mp4`;
const charadeHigh = String.raw`D:\watch\films--done\public-domain\CHARADE_1953.mp4`;
const bobsFirstMessage = 'yoooo';

// How long to wait before the video element is playable before timing out.
// In millis.
const playableTimeout = 2 * 1000;

const blackboard = {
    // Never resolved, never ends.
    fin: new Promise(() => {}),

    // ...
};
blackboard.roomKey = new Promise((res, rej) => {
  blackboard.setRoomKey = res;
});

async function serverAgent() {
  nar('The server is running.');
}

async function aliceAgent() {
  nar('Alice enters the websites, fills the form, and clicks Start.');
  const browser = await playwright.chromium.launch({
    headless: false,
    channel: 'msedge',
    // FIXME: Args are not being passed/used
    //args: ['--window-name="PPP.Alice"', '--start-fullscreen'],
  });

  const context = await browser.newContext();
  const page = await context.newPage();
  //const alice = page; // use alias?
  await page.goto(webstite);

  await page.locator('#createRoomButton').click();
  await page.locator('#create-username').fill('Arisu');
  await page.locator('#roomname').fill('Charade');
  await page.locator('#file-id').setInputFiles(charadeLow);
  await page.locator('#roomCreateButton').click();

  const roomKey = await page.locator('#roomCodeText').textContent();
  nar(`Alice sends the room key '${roomKey}' to Bob.`);
  blackboard.setRoomKey(roomKey);

  nar('Alice starts playing the video.');
  await page.waitForFunction(() => document.querySelector('video').readyState >= 3, null, {timeout: playableTimeout});
  await page.click('#video-player');

  nar('When Alice sees the message...');
  await page.getByText(bobsFirstMessage).click(); // the click itself is meaningless
  nar('Alice replies.');
  const message = 'stfu and watch';
  await page.fill('#messageInp', message);
  await page.locator('#messageInp').press('Enter');

  await blackboard.fin;
  await browser.close();
}

async function bobAgent() {
  nar('Bob waits for the room key');
  const roomKey = await blackboard.roomKey;

  nar('Bob enters the website, fills the form, and joins.');
  const browser = await playwright.chromium.launch({
    headless: false,
    channel: 'chrome',
    //args: ['--window-name="PPP.Bob"'],
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto(webstite);

  await page.locator('#joinRoomButton').click();
  await page.locator('#join-username').fill('Banda');
  await page.locator('#roomCode').fill(roomKey);
  await page.locator('#file-id').setInputFiles(charadeLow);
  await page.locator('#roomJoinButton').click();

  const seconds = 5;
  nar(`Bob waits for ${seconds} seconds then clicks on the video player`);
  await sleep(seconds);
  await page.waitForFunction(() => document.querySelector('video').readyState >= 3, null, {timeout: playableTimeout});
  await page.click('#video-player');

  nar('Bob sends a message');
  let message = bobsFirstMessage;
  await page.fill('#messageInp', message);
  await page.locator('#messageInp').press('Enter');

  await blackboard.fin;
  await browser.close();
}

function nar(str) {
  console.info('[Narrator] ' + str);
}

function sleep(seconds) {
  return new Promise(r => setTimeout(r, seconds * 1000));
}

serverAgent();
aliceAgent();
bobAgent();