3

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

kmancusi
  • 591
  • 3
  • 20

1 Answers1

0

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/)
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • Thank you for this, it's getting closer! I now get this for an error: ```Expected string: "blob:https://mozilla.github.io/" Received string: "blob:https://mozilla.github.io/e4115e81-ac3e-4012-9a8f-7532d43e2773"``` It's not liking that I'm not providing an exact value – kmancusi Jul 25 '22 at 17:59
  • I thought it would do a partial string match, but it seems it doesn't. Another thing you can do is use a regex pattern. Updated the answer. – Alapan Das Jul 25 '22 at 18:06
  • This is getting there. I think I am messing up my order of things as this is the error I get now: `Error: expect(received).toHaveAttribute(expected) Expected pattern: /blob:https:\/\/mozilla.github.io/ Received string: "" Call log: - expect.toHaveAttribute with timeout 8000ms - waiting for selector ".printedPage img >> nth=13"` (where 13 is the last index value) I updated my original post to reflect my test structure – kmancusi Jul 25 '22 at 19:19
  • An update on my error: I am seeing this come up when I am running `--headed` or when I use the `--debug` flag. Otherwise it has been having better pass success rate – kmancusi Jul 26 '22 at 12:44