Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add some in-browser testing using playwright #10696

Open
3 of 5 tasks
Tracked by #4259
cderv opened this issue Sep 3, 2024 · 3 comments
Open
3 of 5 tasks
Tracked by #4259

Add some in-browser testing using playwright #10696

cderv opened this issue Sep 3, 2024 · 3 comments
Assignees
@cderv
Labels
enhancement New feature or request testing
Milestone
Future

Comments

@cderv
Copy link
Collaborator

cderv commented Sep 3, 2024 •
edited
Loading

Some of revealjs feature, and especially our quarto-support plugin can't be tested unless we do automated headless testing.

This issue is to store the potential test to implement.

Revealjs

Website

HTML

PDF snapshot ?

It seems we could leverage PDF.js directly (or through quarto preview ?) to have PDF loading in browser and then do screenshot. More at

  • Example 1 

    // HTML template string no-op for VS Code highlighting / formatting
function html(strings: TemplateStringsArray, ...values: unknown[]) {
  return strings.reduce((result, string, i) => {
    return result + string + (values[i] ?? '');
  }, '');
}

test('PDF has screenshot', async ({ page }) => {
  // Go to page without Content-Security-Policy header, to avoid CSP
  // prevention of script loading from https://mozilla.github.io
  await page.goto('about:blank');

  await page.setContent(html`
    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <canvas></canvas>
        <script src="https://mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>
        <script type="module">
          pdfjsLib.GlobalWorkerOptions.workerSrc =
            'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs';

          try {
            const pdf = await pdfjsLib.getDocument(
               'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
            ).promise;

            const page = await pdf.getPage(1);
            const viewport = page.getViewport({ scale: 1.5 });

            const canvas = document.querySelector('canvas');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            await page.render({
              canvasContext: canvas.getContext('2d'),
              viewport,
            }).promise;
          } catch (error) {
            console.error('Error loading PDF:', error);
          }
        </script>
      </body>
    </html>
  `);

  await page.waitForTimeout(1000);

  await expect(page).toHaveScreenshot({ fullPage: true });
});

  • Example 2

    [Feature] PDF snapshot tests microsoft/playwright#19253 (comment)
@cderv cderv added enhancement New feature or request revealjs Issues with the revealjs format testing labels Sep 3, 2024
@cderv cderv added this to the Future milestone Sep 3, 2024
@cderv cderv self-assigned this Sep 3, 2024
@mcanouil mcanouil added the puppeteer Issues with puppeteer and remote chromium rendering label Sep 3, 2024
@cscheid

This comment was marked as resolved.

Sign in to view
@cderv cderv changed the title Add some in-browser testing for revealjs using puppeteer Add some in-browser testing for revealjs using playwright Sep 5, 2024
@cderv

This comment was marked as resolved.

Sign in to view
@cderv cderv removed the puppeteer Issues with puppeteer and remote chromium rendering label Sep 5, 2024
@mcanouil

This comment was marked as resolved.

Sign in to view
@cderv cderv changed the title Add some in-browser testing for revealjs using playwright Add some in-browser testing using playwright Sep 5, 2024
@cderv cderv removed the revealjs Issues with the revealjs format label Sep 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cderv cderv

Labels
enhancement New feature or request testing
Projects
None yet
Milestone
Future
Development

No branches or pull requests
3 participants
@cscheid @cderv @mcanouil