quarto-dev / quarto-dev/quarto-cli
Add some in-browser testing using playwright
Open
@cderv is already working on this.
Since Sep 3, 2024.
enhancement
testing
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
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.
quarto serve for shiny
- https://github.com/quarto-dev/quarto-cli/pull/12316
- HTML and Revealjs
Revealjs
- https://github.com/quarto-dev/quarto-cli/pull/10695
- https://github.com/quarto-dev/quarto-cli/pull/10688
Website
- https://github.com/quarto-dev/quarto-cli/pull/10712
- https://github.com/quarto-dev/quarto-cli/pull/10725
HTML
- This should probably be a snapshot test
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 }); });
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.