chore: upgrade puppeteer to v19 (#2478)

* chore: upgrade puppeteer to v19

* chore: update lockfile

* fix: selectors

design-system/src/theme-provider.visualspec.js

@@ -4,7 +4,7 @@ import { getDocument, queries } from 'pptr-testing-library';
 describe('ThemeProvider', () => {
   it('Default', async () => {
     await page.goto(`${globalThis.HOST}/theme-provider`);
-    await expect(page).toMatch('use global default theme');
+    await page.waitForSelector('text/use global default theme');
     await percySnapshot(page, 'ThemeProvider');
   });
 });

package.json

@@ -79,7 +79,7 @@
     "@manypkg/cli": "0.20.0",
     "@manypkg/get-packages": "1.1.3",
     "@percy/cli": "1.21.0",
-    "@percy/puppeteer": "2.0.0",
+    "@percy/puppeteer": "2.0.2",
     "@preconstruct/cli": "2.3.0",
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@svgr/cli": "6.5.1",
@@ -111,7 +111,7 @@
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
     "jest-localstorage-mock": "2.4.26",
-    "jest-puppeteer": "6.2.0",
+    "jest-puppeteer": "8.0.6",
     "jest-runner-eslint": "1.2.0",
     "jest-runner-stylelint": "2.3.7",
     "jest-silent-reporter": "0.5.0",
@@ -128,7 +128,7 @@
     "postcss-value-parser": "4.2.0",
     "pptr-testing-library": "0.7.0",
     "prettier": "2.8.6",
-    "puppeteer": "15.5.0",
+    "puppeteer": "19.8.3",
     "qs": "6.11.1",
     "rcfile": "1.0.3",
     "react": "17.0.2",

packages/components/avatar/src/avatar.visualspec.js

@@ -6,7 +6,7 @@ describe('Avatar', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('when gravatar hash is known');
+    await page.waitForSelector('text/when gravatar hash is known');
     await percySnapshot(page, 'Avatar');
   });
 });

packages/components/buttons/flat-button/src/flat-button.visualspec.js

@@ -6,7 +6,7 @@ describe('FlatButton', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('A label text');
+    await page.waitForSelector('text/A label text');
     await percySnapshot(page, 'FlatButton');
   });
 });

packages/components/buttons/icon-button/src/icon-button.visualspec.js

@@ -6,7 +6,7 @@ describe('IconButton', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('A label text');
+    await page.waitForSelector('text/A label text');
     await percySnapshot(page, 'IconButton');
   });
 });

packages/components/buttons/primary-button/src/primary-button.visualspec.js

@@ -6,7 +6,7 @@ describe('PrimaryButton', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('A label text');
+    await page.waitForSelector('text/A label text');
     await percySnapshot(page, 'PrimaryButton');
   });
 });

packages/components/buttons/secondary-icon-button/src/secondary-icon-button.visualspec.js

@@ -6,7 +6,7 @@ describe('SecondaryIconButton', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('A label text');
+    await page.waitForSelector('text/A label text');
     await percySnapshot(page, 'SecondaryIconButton');
   });
 });

packages/components/card/src/card.visualspec.js

@@ -6,7 +6,7 @@ describe('Card', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch(/InsetScale/);
+    await page.waitForSelector('text/InsetScale');
     await percySnapshot(page, 'Card');
   });
 });

packages/components/collapsible-panel/src/collapsible-panel.visualspec.js

@@ -6,7 +6,7 @@ describe('CollapsiblePanel', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('condensed');
+    await page.waitForSelector('text/condensed');
     await percySnapshot(page, 'CollapsiblePanel');
   });
 });

packages/components/constraints/src/horizontal/horizontal.visualspec.js

@@ -6,7 +6,7 @@ describe('Constraints.Horizontal', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('when max is 1');
+    await page.waitForSelector('text/when max is 1');
     await percySnapshot(page, 'Constraints.Horizontal');
   });
 });

packages/components/data-table/src/data-table.visualspec.js

@@ -6,7 +6,7 @@ describe('DataTable', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('default');
+    await page.waitForSelector('text/default');
     await percySnapshot(page, 'DataTable');
   });
 });

packages/components/field-label/src/field-label.visualspec.js

@@ -6,7 +6,7 @@ describe('FieldLabel', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Hello');
+    await page.waitForSelector('text/Hello');
     await percySnapshot(page, 'FieldLabel');
   });
 });

packages/components/fields/creatable-select-field/src/creatable-select-field.visualspec.js

@@ -6,7 +6,7 @@ describe('CreatableSelectField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('State');
+    await page.waitForSelector('text/State');
     await percySnapshot(page, 'CreatableSelectField');
   });
 });

packages/components/fields/date-field/src/date-field.visualspec.js

@@ -6,7 +6,7 @@ describe('DateField', () => {
   });
 
   it('DateField', async () => {
-    await expect(page).toMatch('Release Date');
+    await page.waitForSelector('text/Release Date');
     await percySnapshot(page, 'DateField');
   });
 });

packages/components/fields/date-range-field/src/date-range-field.visualspec.js

@@ -6,7 +6,7 @@ describe('DateRangeField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Discounted days');
+    await page.waitForSelector('text/Discounted days');
     await percySnapshot(page, 'DateRangeField');
   });
 });

packages/components/fields/date-time-field/src/date-time-field.visualspec.js

@@ -6,7 +6,7 @@ describe('DateTimeField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Release Date');
+    await page.waitForSelector('text/Release Date');
     await percySnapshot(page, 'DateTimeField');
   });
 });

packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.visualspec.js

@@ -6,7 +6,7 @@ describe('LocalizedMultilineTextField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Welcome Text');
+    await page.waitForSelector('text/Welcome Text');
     await percySnapshot(page, 'LocalizedMultilineTextField');
   });
 });

packages/components/fields/localized-text-field/src/localized-text-field.visualspec.js

@@ -6,7 +6,7 @@ describe('LocalizedTextField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Welcome Text');
+    await page.waitForSelector('text/Welcome Text');
     await percySnapshot(page, 'LocalizedTextField');
   });
 });

packages/components/fields/money-field/src/money-field.visualspec.js

@@ -6,7 +6,7 @@ describe('MoneyField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Price');
+    await page.waitForSelector('text/Price');
     await percySnapshot(page, 'MoneyField');
   });
 });

packages/components/fields/multiline-text-field/src/multiline-text-field.visualspec.js

@@ -6,7 +6,7 @@ describe('MultilineTextField', () => {
   });
 
   it('MultilineTextField', async () => {
-    await expect(page).toMatch('Welcome Text');
+    await page.waitForSelector('text/Welcome Text');
     await percySnapshot(page, 'MultilineTextField');
   });
 });

packages/components/fields/number-field/src/number-field.visualspec.js

@@ -6,7 +6,7 @@ describe('NumberField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Age');
+    await page.waitForSelector('text/Age');
     await percySnapshot(page, 'NumberField');
   });
 });

packages/components/fields/password-field/src/password-field.visualspec.js

@@ -6,7 +6,7 @@ describe('PasswordField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Welcome Text');
+    await page.waitForSelector('text/Welcome Text');
     await percySnapshot(page, 'PasswordField');
   });
 });

packages/components/fields/radio-field/src/radio-field.visualspec.js

@@ -6,7 +6,7 @@ describe('RadioField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Welcome Text');
+    await page.waitForSelector('text/Welcome Text');
     await percySnapshot(page, 'RadioField');
   });
 });

packages/components/fields/select-field/src/select-field.visualspec.js

@@ -6,7 +6,7 @@ describe('SelectField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('State');
+    await page.waitForSelector('text/State');
     await percySnapshot(page, 'SelectField');
   });
 });

packages/components/fields/text-field/src/text-field.visualspec.js

@@ -6,7 +6,7 @@ describe('TextField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Welcome Text');
+    await page.waitForSelector('text/Welcome Text');
     await percySnapshot(page, 'TextField');
   });
 });

packages/components/fields/time-field/src/time-field.visualspec.js

@@ -6,7 +6,7 @@ describe('TimeField', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('Release Time');
+    await page.waitForSelector('text/Release Time');
     await percySnapshot(page, 'TimeField');
   });
 });

packages/components/grid/src/grid.visualspec.js

@@ -6,7 +6,7 @@ describe('Grid', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('1');
+    await page.waitForSelector('text/1');
     await percySnapshot(page, 'Grid');
   });
 });

packages/components/icons/src/icons.visualspec.js

@@ -20,14 +20,14 @@ describe('Icons', () => {
     colors.map((color) =>
       it(`Color ${color}`, async () => {
         await page.goto(`${globalThis.HOST}/icons/${color}`);
-        await expect(page).toMatch(color);
+        await page.waitForSelector(`text/${color}`);
         await snapshot(page, `Icons - Color: ${color}`);
       })
     );
   });
   it('Inline SVG', async () => {
     await page.goto(`${globalThis.HOST}/icons/inline-svg`);
-    await expect(page).toMatch('Inline SVG');
+    await page.waitForSelector('text/Inline SVG');
     await percySnapshot(page, `Icons - Inline SVG`);
   });
 });

packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.visualspec.js

@@ -4,7 +4,7 @@ import { getDocument, queries } from 'pptr-testing-library';
 describe('AsyncCreatableSelectInput', () => {
   it('Default', async () => {
     await page.goto(`${globalThis.HOST}/async-creatable-select-input`);
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'AsyncCreatableSelectInput');
   });
 

packages/components/inputs/async-select-input/src/async-select-input.visualspec.js

@@ -4,7 +4,7 @@ import { getDocument, queries } from 'pptr-testing-library';
 describe('AsyncSelectInput', () => {
   it('Default', async () => {
     await page.goto(`${globalThis.HOST}/async-select-input`);
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'AsyncSelectInput');
   });
 

packages/components/inputs/checkbox-input/src/checkbox-input.visualspec.js

@@ -6,7 +6,7 @@ describe('CheckboxInput', () => {
   });
 
   it('CheckboxInput', async () => {
-    await expect(page).toMatch('when default');
+    await page.waitForSelector('text/when default');
     await percySnapshot(page, 'Checkbox');
   });
 });

packages/components/inputs/creatable-select-input/src/creatable-select-input.visualspec.js

@@ -3,14 +3,14 @@ import percySnapshot from '@percy/puppeteer';
 describe('CreatableSelectInput', () => {
   it('CreatableSelectInput', async () => {
     await page.goto(`${globalThis.HOST}/creatable-select-input`);
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'CreatableSelectInput');
   });
 
   it('Open', async () => {
     await page.goto(`${globalThis.HOST}/creatable-select-input-open`);
     await page.click('#creatable-select-input');
-    await expect(page).toMatch('One');
+    await page.waitForSelector('text/One');
     // TODO: uncomment when issue with Percy is resolved
     // await percySnapshot(page, 'CreatableSelectInput - open');
   });

packages/components/inputs/date-input/src/date-input.visualspec.js

@@ -4,13 +4,13 @@ import { getDocument, queries } from 'pptr-testing-library';
 describe('DateInput', () => {
   it('Default', async () => {
     await page.goto(`${globalThis.HOST}/date-input`);
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'DateInput');
   });
   it('Open', async () => {
     await page.goto(`${globalThis.HOST}/date-input-open`);
     await page.click('#date-input');
-    await expect(page).toMatch('November');
+    await page.waitForSelector('text/November');
     // TODO: uncomment when issue with Percy is resolved
     // await percySnapshot(page, 'DateInput - open');
 

packages/components/inputs/date-time-input/src/date-time-input.visualspec.js

@@ -3,13 +3,13 @@ import percySnapshot from '@percy/puppeteer';
 describe('DateTimeInput', () => {
   it('Default', async () => {
     await page.goto(`${globalThis.HOST}/date-time-input`);
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'DateTimeInput');
   });
   it('Open', async () => {
     await page.goto(`${globalThis.HOST}/date-time-input-open`);
     await page.click('#date-time-input');
-    await expect(page).toMatch('November');
+    await page.waitForSelector('text/November');
     // TODO: uncomment when issue with Percy is resolved
     // await percySnapshot(page, 'DateTimeInput - open');
   });

packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualspec.js

@@ -6,7 +6,7 @@ describe('LocalizedMultilineTextInput', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'LocalizedMultilineTextInput');
   });
 });

packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.visualspec.js

@@ -48,7 +48,7 @@ describe('LocalizedRichTextInput', () => {
 
   it('Default', async () => {
     await page.goto(`${globalThis.HOST}/localized-rich-text-input`);
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'LocalizedRichTextInput');
   });
 

packages/components/inputs/localized-text-input/src/localized-text-input.visualspec.js

@@ -6,7 +6,7 @@ describe('LocalizedTextInput', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('hello world');
+    await page.waitForSelector('text/hello world');
     await percySnapshot(page, 'LocalizedTextInput');
   });
 });

packages/components/inputs/money-input/src/money-input.visualspec.js

@@ -6,7 +6,7 @@ describe('MoneyInput', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'MoneyInput');
   });
 });

packages/components/inputs/multiline-text-input/src/multiline-text-input.visualspec.js

@@ -6,7 +6,7 @@ describe('MultilineTextInput', () => {
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('minimal');
+    await page.waitForSelector('text/minimal');
     await percySnapshot(page, 'MultilineTextInput');
   });
 });