btroops/test/integration/page.test.js

const { ProvideResponseParameters } = require('selenium-webdriver/bidi/provideResponseParameters');

const { Builder, By, until } = require('selenium-webdriver'),
  chrome = require('selenium-webdriver/chrome.js'),
  getNetworkInstance = require('selenium-webdriver/bidi/network.js'),
  { AddInterceptParameters } = require('selenium-webdriver/bidi/addInterceptParameters'),
  { InterceptPhase } = require('selenium-webdriver/bidi/interceptPhase'),
  { expect, it } = require('@jest/globals'),
  chromeOptions = new chrome.Options(),
  { mkdir, writeFile, symlink, unlink } = require('node:fs/promises'),
  path = require('path'),
  { tmpdir } = require('os'),
  puppeteer = require('puppeteer');

const { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor');

const fs = require('node:fs/promises');
const DIR = path.resolve(tmpdir(), 'test-dir');

chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
chromeOptions.enableBidi();

let driver;

// beforeAll(async () => {
//   await symlink('../../../test/map1.svg', 'public/assets/images/test_map.svg');
// });

beforeEach(async () => {
  driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();

  // console.log('manage', await driver.manage());

});

it('loads the page', async () => {
  expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');

  // console.log('window', window);

  // takeScreenshot(driver);

  // var start = new Date().getTime();
  // await driver.executeAsyncScript(
  //     'window.setTimeout(arguments[arguments.length - 1], 500);').
  //     then(function() {
  //       console.log(
  //           'Elapsed time: ' + (new Date().getTime() - start) + ' ms');
  //     });

  // await driver.executeScript(`return __dirname`).then(function (e) {
  //   console.log('e', e);
  // });
  // console.log('client', await driver.executeScript(`return document.querySelect('object');`));
});

it.only('selects an off-board soldier', async () => {
// it.only.each(Array(10).fill(null))('selects an off-board soldier', async () => {

  // const id = await driver.getWindowHandle();
  // const network = await getNetworkInstance(driver, id);

  // const intercept = await network.addIntercept(new AddInterceptParameters(InterceptPhase.BEFORE_REQUEST_SENT));

  // await network.beforeRequestSent(async event => {
  //   console.log('request url', event.request.url);
    // await network.provideResponse(new ProvideResponseParameters(event.request));
  // });

  // await network.responseStarted(async event => {
  //   if (event.response.url.includes('scenario'))
  //     console.log('response', event.response);
  // });

  // await network.responseStarted(async (event) => {
  //   if (event.response.url.includes('scenario')) {
  //     console.log('event', event);
  //     console.log('request', event.request);
  //     console.log('response', event.response.result);
  //   }
  // });

  // await network.beforeRequestSent(async (event) => {
  //   if (event.request.url.includes('scenario')) {
  //     console.log('event', event);
  //     console.log('request', event.request.request);
  //     await network.provideResponse(new ProvideResponseParameters(event.request.request));
  //     // await network.failRequest(event.request.request);
  //   }
  // });

  const connection = await driver.createCDPConnection('page')
  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
  const httpResponse = new HttpResponse(url);

  // httpResponse.body = `<?xml version="1.0" standalone="no"?>
  //   <svg viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
  //     <circle cx="0" cy="0" r="50" fill="violet" />
  //   </svg>`;

  httpResponse.body = await fs.readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
  httpResponse.addHeaders('Content-Type', 'image/svg+xml');

  await driver.onIntercept(connection, httpResponse, async function () {
    console.log('intercepted');
    // await driver.switchTo().frame(await driver.findElement(By.css('object')));
    // console.log(await driver.getPageSource());
  });

  await driver.get('http://localhost:3005');
  // expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');

  await driver.wait(until.elementIsVisible(driver.findElement(By.css('object'))), 1000);
  // await driver.wait(until.elementLocated(By.css('#dice')), 1000);
  takeScreenshot(driver);
  // await driver.switchTo().frame(await driver.findElement(By.css('object')));

  // console.log(await driver.getPageSource());

  // const testDir = path.dirname(expect.getState().testPath);
  // await writeFile(path.join(testDir, `scenario.svg`), `
  //   <?xml version="1.0" standalone="no"?>
  //   <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  //   </svg>
  // `);


    // const browser = await puppeteer.launch();

  // // Create a page
  // const page = await browser.newPage();

  // await page.setRequestInterception(true);

  // page.on('request', interceptedRequest => {
  //   console.log('intercept req url', interceptedRequest.url());
  //   interceptedRequest.continue();
  // });

  // // Go to your site
  // await page.goto('http://localhost:3005');


  // await browser.close();


  // console.log('test dir', testDir);

  // const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
  //   svg = await driver.findElement(By.css('svg')),
  //   counter = await driver.findElement(By.css(selector), svg);

  // await driver.findElement(By.css('#dice'));

  // await counter.click();

  // expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
  // await takeScreenshot(driver);
});

afterEach(async () => {
  await driver.quit();
});

// afterAll(async () => {
//   await unlink('public/assets/images/test_map.svg');
// });

async function takeScreenshot(driver) {
  const dir = './test/screenshots';
  const fileName = path.relative(process.cwd(), __filename) + ' "' + expect.getState().currentTestName + `" ${new Date().toISOString()}.png`;
  const image = await driver.takeScreenshot();
  await mkdir(dir, { recursive: true });
  await writeFile(`${dir}/${fileName.replaceAll('/', '-')}`, image, 'base64');
}