Playwright; asserting nested `img src` values

user_4190664 0
Viewed 157

Note, this is related to my previous question here: https://stackoverflow.com/a/73043433/4190664

I am looking to further assert somethings within the DOM when I click the 'Print' button.

From troubleshooting I am seeing the following:

  1. the pdfjs page has a #printContainer that is an empty div
  2. when you click the Print button, it begins creating divs with the class .printedPage to represent each page of the document
  3. within each .printedPage div is an img element with src="blob:https://mozilla.github.io/**"

Example when the print dialog is open:

<div id="printContainer">
    <div class="printedPage"><img src="blob:https://mozilla.github.io/5afcff4c-aa36-4118-b4b8-011cdce6a9bc"></div>
    <div class="printedPage"><img src="blob:https://mozilla.github.io/30cd3036-2d81-4b82-af9a-0f2e9c834b69"></div>
    <div class="printedPage"><img src="blob:https://mozilla.github.io/047e8762-3fae-44d1-a5a0-56ea576de93e"></div>
</div>

I already am testing the following:

let requestCount = 0;
page.on('request', request => {
    if(request.url().includes('blob:https://mozilla.github.io/pdf.js/web/viewer.html')) {
      expect(page.locator(`.printedPage img >> nth=${requestCount}`)).toHaveAttribute('src', /blob:https:\/\/mozilla.github.io/);        
      requestCount++;
    }
});
await printBtn.click();
await expect.poll(() => requestCount).toBe(3);

What would be the best way to assert that each .printedPage > 'img' src contains the blob information as well?

Playwright (and javascript in general) is not a strong language so I am definitely struggling on this one

Any syntactical help is appreciated

playwright-test pdf.js playwright html
1 Answers

You can do something like this. You can add this before the value of requestCount increments.

await expect(
  page.locator(`.printedPage img >> nth=${requestCount}`)
).toHaveAttribute('src', /blob:https:\/\/mozilla.github.io/)
user_45712710
Related