From 267f9fb438db33540f7003bb252569ba209102bb Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 5 Oct 2023 18:08:24 -0400 Subject: [PATCH 1/4] using new headless mode where imagebitmap patterns work correctly https://developer.chrome.com/articles/new-headless/ --- test/index.test.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/test/index.test.js b/test/index.test.js index 564b860..bff8d8c 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -18,8 +18,7 @@ const height = 500; const args = process.env.CI ? [ '--no-sandbox', '--disable-setuid-sandbox' ] : []; -const headless = process.env.CI ? true : - process.env['CONFETTI_SHOW'] ? false : true; +const headless = (process.env.CI || !('CONFETTI_SHOW' in process.env)) ? '--headless=new' : ''; const mkdir = async (dir) => { return promisify(fs.mkdir)(dir) @@ -61,8 +60,7 @@ const testBrowser = (() => { } return puppeteer.launch({ - headless, - args: [ '--disable-background-timer-throttling' ].concat(args) + args: [ '--disable-background-timer-throttling', headless ].concat(args) }).then(thisBrowser => { browser = thisBrowser; return Promise.resolve(browser); @@ -784,7 +782,7 @@ test('[text] shapeFromText can optionally render text in a requested color', asy // this test renders a black canvas in a headless browser // but works fine when it is not headless // eslint-disable-next-line ava/no-skip-test -(headless ? test.skip : test)('[text] shoots confetti of an emoji shape', async t => { +test('[text] shoots confetti of an emoji shape', async t => { const page = t.context.page = await fixturePage(); const fontFace = await loadFont(page); From 0a3954a77e563d3cd7f91d10184c65f15dcbf76d Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Thu, 5 Oct 2023 18:15:02 -0400 Subject: [PATCH 2/4] upload artifacts on failed builds... that's really when we need them --- .github/workflows/ci.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index afe41f9..93a851d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,6 +26,7 @@ jobs: env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} - uses: actions/upload-artifact@v3 + if: ${{ failure() }} with: name: test-screenshots path: shots/ From 1f750a94946d93a4514152d930cc905e73c8c04e Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Sun, 19 Nov 2023 00:53:17 -0500 Subject: [PATCH 3/4] cleanup, correctly using the new headless value in puppeteer --- test/index.test.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/test/index.test.js b/test/index.test.js index bff8d8c..01e7b06 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -13,12 +13,15 @@ const PORT = 9999; const width = 500; const height = 500; +const args = ['--disable-background-timer-throttling']; + // Docker-based CIs need this disabled // https://github.com/Quramy/puppeteer-example/blob/c28a5aa52fe3968c2d6cfca362ec28c36963be26/README.md#with-docker-based-ci-services -const args = process.env.CI ? [ - '--no-sandbox', '--disable-setuid-sandbox' -] : []; -const headless = (process.env.CI || !('CONFETTI_SHOW' in process.env)) ? '--headless=new' : ''; +if (process.env.CI) { + args.push('--no-sandbox', '--disable-setuid-sandbox'); +} + +const headless = (process.env.CI || !('CONFETTI_SHOW' in process.env)) ? 'new' : false; const mkdir = async (dir) => { return promisify(fs.mkdir)(dir) @@ -60,7 +63,8 @@ const testBrowser = (() => { } return puppeteer.launch({ - args: [ '--disable-background-timer-throttling', headless ].concat(args) + headless, + args }).then(thisBrowser => { browser = thisBrowser; return Promise.resolve(browser); From 77113a578939db97db67839f6a0403e6ad54f3f0 Mon Sep 17 00:00:00 2001 From: Kiril Vatev Date: Sun, 26 Nov 2023 01:02:21 -0500 Subject: [PATCH 4/4] updating hash to match slightly different rendering in new headless mode --- test/index.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/index.test.js b/test/index.test.js index 3331128..7b17650 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -805,7 +805,7 @@ test('[text] shoots confetti of an emoji shape', async t => { }); t.context.image = await readImage(t.context.buffer); - t.is(t.context.image.hash(), '9CppCqpCmtC'); + t.is(t.context.image.hash(), 'cPpcSrcCjdC'); }); /*