Can I interact with a playwright page and then run Audit.of() again?

[lovebes]

I'm looking at the examples and I couldn't see one where I take a playwright page, enter a correct text on input field then click on the button, and then run the Audit.of function on page which renders the next set of elements in an SPA website.

Is this possible?

Thanks in advance.

[Jym77]

That should be possible. I'll come back with an example soon.
(sorry, just back from vacations, need to catch up with everything…)

[Jym77]

Hi @lovebes, sorry for the late answer.
If I understand your use case properly, this MWE should illustrate how to do it. The main trick is that the playwright page (and handle) stays the same even if the page changes through actions, so we can regularly call Playwright.toPage and get the current state.

Here's my awesome SPA:

<style>
  #result { color: #CCC} /* Creating a color contrast issue */
</style>

<script>
  function submit() {
    const name = document.getElementById("input").value;

    document.getElementById("result").innerText = `Your name is ${name}`;
  }
</script>

<label>Your name:<input id="input" type="text" /></label>
<button id="submit" onclick="submit()">Submit</button>
<div id="result"></div>

And here is a script to audit it before and after filling the form:

import { Audit, Outcome } from "@siteimprove/alfa-act";
import { Playwright } from "@siteimprove/alfa-playwright";
import { Sequence } from "@siteimprove/alfa-sequence";
import path from "path";

import { chromium } from "playwright";

import rules from "@siteimprove/alfa-rules";
import { fileURLToPath, pathToFileURL } from "url";

const contrast = rules.filter(
  (rule) => rule.uri === "https://alfa.siteimprove.com/rules/sia-r69"
);

const url = fileURLToPath(pathToFileURL(path.join(__dirname, "spa.html")));

const options = { headless: false, slowMo: 50 };

(async () => {
  // Setup
  const browser = await chromium.launch(options);
  const page = await browser.newPage();
  await page.goto(url);

  const document = await page.evaluateHandle("document");

  // Grabbing and auditing initial page
  const initialAlfaPage = await Playwright.toPage(document);
  const initialAudit = await Audit.of(initialAlfaPage, contrast).evaluate();

  console.log("Initial state:");
  console.dir(Sequence.from(initialAudit).filter(Outcome.isFailed).toJSON());

  // Filling field and clicking button
  const input = page.locator("#input");
  await input.fill("Jean-Yves");

  const button = page.locator("#submit");
  await button.click();

  // Grabbing and auditing final page
  const finalAlfaPage = await Playwright.toPage(document);
  const finalAudit = await Audit.of(finalAlfaPage, contrast).evaluate();

  console.log("Final state:");
  console.dir(Sequence.from(finalAudit).filter(Outcome.isFailed).toJSON());

  // Teardown
  await browser.close();
})();

[lovebes]

no worries @Jym77 ! Thank you so much for getting back and answering it so succintly!!! Much appreciated! 👍

[jrpool]

The mechanism shown here is important:
(1) Convert a Playwright page to a JSHandle with const jsHandle = await page.evaluateHandle('document').
(2) Convert the JSHandle to an Alpha page with const alfaPage = await Playwright.toPage(jsHandle).
(3) Audit the Alfa page with const audit = Audit.of(alfaPage, ruleArray).
Thank you for documenting this. Is it also in the alfa-playwright docs? I did not see it there.

[Jym77]

No, sadly it's not in the alfa-playwright docs (our docs are really lacking 🙈 )
But it is one of the alfa-examples (that repo also needs some cleanup…)