Use Chrome with Cypress (Electron resulted in flaky dropdown test), save Puppeteer diff image even if pixelmatch throws error, update Chrome snapshot

.github/actions-scripts/puppeteer.js

@@ -11,8 +11,11 @@ const server = require('../../server');
 async function test() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
+  const artifactsPath = 'screenshot';
+  const snapshotName = `puppeteer-${process.platform}.png`;
   let error;
   let pixelDifference;
+  let diff;
 
   if (!server.listening) await once(server, 'listening');
 
@@ -32,8 +35,6 @@ async function test() {
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('ArrowDown');
 
-    const snapshotName = `puppeteer-${process.platform}.png`;
-    const artifactsPath = 'screenshot';
     mkdirSync(artifactsPath, { recursive: true });
     const imageBuffer = await page.screenshot({
       path: path.join(artifactsPath, snapshotName),
@@ -46,7 +47,7 @@ async function test() {
       readFileSync(path.resolve(__dirname, `./__snapshots__/${snapshotName}`)),
     );
     const { width, height } = screenshot;
-    const diff = new PNG({ width, height });
+    diff = new PNG({ width, height });
     pixelDifference = pixelmatch(
       screenshot.data,
       snapshot.data,
@@ -57,11 +58,13 @@ async function test() {
         threshold: 0.6,
       },
     );
-    writeFileSync(path.join(artifactsPath, 'diff.png'), PNG.sync.write(diff));
   } catch (err) {
     console.error(err);
     error = err;
   } finally {
+    if (diff) {
+      writeFileSync(path.join(artifactsPath, 'diff-' + snapshotName), PNG.sync.write(diff));
+    }
     await Promise.all([
       browser.close(),
       new Promise(resolve => server.close(resolve)),

cypress/integration/select-multiple.spec.ts

@@ -565,15 +565,13 @@ describe('Choices - select multiple', () => {
     });
 
     describe('dropdown scrolling', () => {
-      let choicesCount: number;
-      // let choicesItems: number[];
+      let choicesCount;
 
       beforeEach(() => {
         cy.get('[data-test-hook=scrolling-dropdown]')
           .find('.choices__list--dropdown .choices__list .choices__item')
           .then(($choices) => {
             choicesCount = $choices.length;
-            // choicesItems = Array.from({ length: 10 }, (_, i) => i + 1);
           });
 
         cy.get('[data-test-hook=scrolling-dropdown]')
@@ -590,13 +588,14 @@ describe('Choices - select multiple', () => {
       });
 
       it('scrolls to next choice on down arrow', () => {
-        for (let index = 0; index < choicesCount; index++) {
+        for (let index = 1; index <= choicesCount; index++) {
           cy.wait(100);
 
           cy.get('[data-test-hook=scrolling-dropdown]')
             .find('.choices__list--dropdown .choices__list .is-highlighted')
-            .should(($choice) => {
-              expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
+            .invoke('text')
+            .then((text) => {
+              expect(text.trim()).to.equal(`Choice ${index}`);
             });
 
           cy.get('[data-test-hook=scrolling-dropdown]')
@@ -619,8 +618,9 @@ describe('Choices - select multiple', () => {
 
           cy.get('[data-test-hook=scrolling-dropdown]')
             .find('.choices__list--dropdown .choices__list .is-highlighted')
-            .should(($choice) => {
-              expect($choice.text().trim()).to.equal(`Choice ${index}`);
+            .invoke('text')
+            .then((text) => {
+              expect(text.trim()).to.equal(`Choice ${index}`);
             });
 
           cy.get('[data-test-hook=scrolling-dropdown]')

package.json

@@ -9,7 +9,7 @@
     "build": "run-p js:build css:build",
     "lint": "eslint src/scripts/**/*.ts",
     "bundlesize": "bundlesize",
-    "cypress:run": "cypress run",
+    "cypress:run": "cypress run --browser chrome",
     "cypress:open": "cypress open",
     "cypress:ci": "cypress run --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
     "test": "run-s test:unit test:e2e",