0

I am looking to make assertions on the DOM once I open the printer dialog option on a PDFjs page

What I am looking to do:

  1. Load the page (https://mozilla.github.io/pdf.js/web/viewer.html)
  2. Wait for the .page class divs to load (waitFor({ state: 'attached' })
  3. Click the Print button
  4. Assert that there are now .printedPage divs that are a count greater than 0

Currently I am getting to a state where, after I click the Print button, it times out waiting for the .printedPage divs to have an attached state

Code I am running:

import { test, expect } from '@playwright/test';

test('page has print button', async ({ page }) => {
  await page.goto('https://mozilla.github.io/pdf.js/web/viewer.html');
  await page.locator('.page').first().waitFor({ state: 'attached' });

  const printBtn = page.locator('#print');
  const printContainer = page.locator('#printContainer');

  await expect(page.locator('.page')).not.toHaveCount(0);

  await expect(printBtn).toHaveAttribute('title','Print');
  await expect(printContainer).toBeEmpty();

  await printBtn.click();
  await page.locator('.printedPage').first().waitFor({ state: 'attached' });

  await expect(page.locator('.printedPage')).not.toHaveCount(0);
});

Any guidance would be appreciated

the printedPage divs appears only after clicking on Print

kmancusi
  • 591
  • 3
  • 20
  • 2
    Where are you expecting `.printedPage`? If in the print dialog, which browser? There's no sign of that class in the Chrome dialog. – Pablo Jul 15 '22 at 01:05
  • @Pablo, I edited my question to include a screenshot. The `.printedPage` class appears in the DOM _after_ clicking on the Print button; it's not in the Chrome dialog – kmancusi Jul 15 '22 at 12:53
  • What you have posted in the screenshot is what I am referring to as the Chrome dialog (since it pops over the page). The DOM showing behind the popup window is not what I see. It looks like that preview window is specific to the machine. – Pablo Jul 18 '22 at 06:57
  • I think the root cause is `page.locator('#printContainer')` cannot be queried from `page`, because it's not the same window you started with. – Pablo Jul 18 '22 at 06:58

1 Answers1

0

I figured this out by doing a combination of page.on('request') and polling

let requestCount = 0;
page.on('request', request => {
    if(request.url().includes('blob:https://mozilla.github.io/pdf.js/web/viewer.html')) {
        requestCount++;
    }
});
await printBtn.click();
await expect.poll(() => requestCount).toBe(8);

This way I wasn't worrying about having to look for DOM elements beyond the print dialog

kmancusi
  • 591
  • 3
  • 20