Add some in-browser testing using playwright #10696
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
- tabby - Trigger event for shiny rendering when tab change #12316
- HTML and Revealjs
Revealjs
- [revealjs] Improve footer handling #10695
- [Revealjs] Correctly link to element in slide with an id #10688
Website
- listing - link activation for categories should work on any window.lo… #10712
- listjs - correctly patch list.min.js to support special character #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 }); });