qawolf-notes.md

How to start

1. Run yarn dev at localhost:3000
2. Run yarn test to test all the files (Impt: Please ensure that you have step 1 running in the background)

Key commands

• Run yarn test --headless to test programmatically without the UI
• Run yarn test:debug to print debug info
• Run yarn test <filename> to test an individual file
• Run killall -9 Chromium to close stale Chromium browsers left behind by failed tests

How to edit a test

1. To edit a test, do await qawolf.create();. Include the semi colon otherwise it will break the test.
2. yarn test:edit <test_name>

Why are tests failing when I click on the modal backdrop?

Because material-ui backdrop's rely on the ClickAwayListener component which basically tracks clicking outside of a specific element (exclusion-based) rather than clicking on a specific element (the usual include-based way). Therefore instead of doing await page.click(), use the following instead: await page.$eval(".MuiBackdrop-root", (el: any) => el.click());

Recipes

How to loop through table data for reading purposes

• Note that this is not useful for manipulating DOM nodes.

await page.waitForSelector('table');
const rows = await page.$$eval('tr h6', (trs: any) => {
  return trs.map((tr, i) => {
    if (tr.textContent === 'QAWolf Automated Test Product 1') return tr.textContent
  }).filter((x) => typeof x !== 'undefined')
});

// Get the rows of data
for (const row of rows) {
  await page.click(`tr:nth-of-type(${row}) >> text=DELETE`);
  await page.click("text=CONFIRM");
}

How to select DOM nodes in a table

// Delete product by finding delete button of a row based on the product title text

await page.waitForSelector('table');
const productTitle = await page.$(`text=My Test Product`);
const deleteButton = await page.evaluateHandle(body => body.closest('tr').querySelector('.MuiTableCell-alignRight button:last-child'), productTitle);
await deleteButton.click();
await page.click("text=CONFIRM");

References:

• puppeteer/puppeteer#858 (comment)