Web Dev Solutions

Catalin Mititiuc

const { Builder, By, until } = require('selenium-webdriver'), chrome = require('selenium-webdriver/chrome.js'), chromeOptions = new chrome.Options(), { expect, it } = require('@jest/globals'), { readFile } = require('node:fs/promises'), { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor'); chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox'); chromeOptions.enableBidi(); let driver; beforeEach(async () => { driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build(); }); it('selects and deselects a trooper by clicking on its counter', async () => { const connection = await driver.createCDPConnection('page') const url = 'http://localhost:3005/assets/images/scenario-side_show.svg'; const httpResponse = new HttpResponse(url); httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8'); httpResponse.addHeaders('Content-Type', 'image/svg+xml'); await driver.onIntercept(connection, httpResponse, async () => {}); await driver.get('http://localhost:3005'); await driver.wait(until.elementLocated(By.css('#dice')), 1000); const record = await driver.findElement(By.css('.soldier-record')); const notSelected = expect.not.stringContaining('selected'); expect(await record.getAttribute('class')).toEqual(notSelected); const objectEl = await driver.findElement(By.css('object')); await driver.switchTo().frame(objectEl); const selector = '.counter[data-allegiance="attacker"][data-number="1"]', svg = await driver.findElement(By.css('svg')), counter = await driver.findElement(By.css(selector), svg), selected = expect.stringContaining('selected'); expect(await counter.getAttribute('class')).toEqual(notSelected); await counter.click(); expect(await counter.getAttribute('class')).toEqual(selected); await driver.switchTo().defaultContent(); expect(await record.getAttribute('class')).toEqual(selected); await driver.switchTo().frame(objectEl); await counter.click(); expect(await counter.getAttribute('class')).toEqual(notSelected); await driver.switchTo().defaultContent(); expect(await record.getAttribute('class')).toEqual(notSelected); }); it('selects and deselects trooper by clicking on its record', async () => { const connection = await driver.createCDPConnection('page') const url = 'http://localhost:3005/assets/images/scenario-side_show.svg'; const httpResponse = new HttpResponse(url); httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8'); httpResponse.addHeaders('Content-Type', 'image/svg+xml'); await driver.onIntercept(connection, httpResponse, async () => {}); await driver.get('http://localhost:3005'); await driver.wait(until.elementLocated(By.css('#dice')), 1000); const record = await driver.findElement(By.css('.soldier-record')); const notSelected = expect.not.stringContaining('selected'); expect(await record.getAttribute('class')).toEqual(notSelected); const objectEl = await driver.findElement(By.css('object')); await driver.switchTo().frame(objectEl); const selector = '.counter[data-allegiance="attacker"][data-number="1"]', svg = await driver.findElement(By.css('svg')), counter = await driver.findElement(By.css(selector), svg); expect(await counter.getAttribute('class')).toEqual(notSelected); await driver.switchTo().defaultContent(); await record.click(); const selected = expect.stringContaining('selected'); expect(await record.getAttribute('class')).toEqual(selected); await driver.switchTo().frame(objectEl); expect(await counter.getAttribute('class')).toEqual(selected); await driver.switchTo().defaultContent(); await record.click(); expect(await record.getAttribute('class')).toEqual(notSelected); await driver.switchTo().frame(objectEl); expect(await counter.getAttribute('class')).toEqual(notSelected); }); it('selects a trooper by clicking on its counter and deselects it by clicking on its record', async () => { const connection = await driver.createCDPConnection('page') const url = 'http://localhost:3005/assets/images/scenario-side_show.svg'; const httpResponse = new HttpResponse(url); httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8'); httpResponse.addHeaders('Content-Type', 'image/svg+xml'); await driver.onIntercept(connection, httpResponse, async () => {}); await driver.get('http://localhost:3005'); await driver.wait(until.elementLocated(By.css('#dice')), 1000); const record = await driver.findElement(By.css('.soldier-record')); const notSelected = expect.not.stringContaining('selected'); expect(await record.getAttribute('class')).toEqual(notSelected); const objectEl = await driver.findElement(By.css('object')); await driver.switchTo().frame(objectEl); const selector = '.counter[data-allegiance="attacker"][data-number="1"]', svg = await driver.findElement(By.css('svg')), counter = await driver.findElement(By.css(selector), svg), selected = expect.stringContaining('selected'); expect(await counter.getAttribute('class')).toEqual(notSelected); await counter.click(); expect(await counter.getAttribute('class')).toEqual(selected); await driver.switchTo().defaultContent(); expect(await record.getAttribute('class')).toEqual(selected); await record.click(); expect(await record.getAttribute('class')).toEqual(notSelected); await driver.switchTo().frame(objectEl); expect(await counter.getAttribute('class')).toEqual(notSelected); }); it('selects a trooper by clicking on its record and deselects it by clicking on its counter', async () => { const connection = await driver.createCDPConnection('page') const url = 'http://localhost:3005/assets/images/scenario-side_show.svg'; const httpResponse = new HttpResponse(url); httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8'); httpResponse.addHeaders('Content-Type', 'image/svg+xml'); await driver.onIntercept(connection, httpResponse, async () => {}); await driver.get('http://localhost:3005'); await driver.wait(until.elementLocated(By.css('#dice')), 1000); const record = await driver.findElement(By.css('.soldier-record')); const notSelected = expect.not.stringContaining('selected'); expect(await record.getAttribute('class')).toEqual(notSelected); const objectEl = await driver.findElement(By.css('object')); await driver.switchTo().frame(objectEl); const selector = '.counter[data-allegiance="attacker"][data-number="1"]', svg = await driver.findElement(By.css('svg')), counter = await driver.findElement(By.css(selector), svg); expect(await counter.getAttribute('class')).toEqual(notSelected); await driver.switchTo().defaultContent(); await record.click(); const selected = expect.stringContaining('selected'); expect(await record.getAttribute('class')).toEqual(selected); await driver.switchTo().frame(objectEl); expect(await counter.getAttribute('class')).toEqual(selected); await counter.click(); expect(await counter.getAttribute('class')).toEqual(notSelected); await driver.switchTo().defaultContent(); expect(await record.getAttribute('class')).toEqual(notSelected); }); afterEach(async () => { await driver.quit(); });