From 150925f6f492aa6c9fef414cf9fb756ca13d0fc3 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 20 Jan 2021 01:19:52 +0800
Subject: [PATCH 01/11] Add puppeteer-testing-library

---
 package-lock.json                           | 10 ++++++++++
 packages/e2e-tests/jest.config.js           |  1 +
 packages/e2e-tests/package.json             |  1 +
 packages/scripts/config/puppeteer.config.js |  1 +
 4 files changed, 13 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 93558fe17b5188..51783c90c981a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13544,6 +13544,7 @@
 				"chalk": "^4.0.0",
 				"expect-puppeteer": "^4.4.0",
 				"lodash": "^4.17.19",
+				"puppeteer-testing-library": "^0.2.0",
 				"uuid": "^8.3.0"
 			}
 		},
@@ -49340,6 +49341,15 @@
 				}
 			}
 		},
+		"puppeteer-testing-library": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.2.0.tgz",
+			"integrity": "sha512-ykkSjFeOieDJ/G4lE+2I2GD9fW5Nb9vSgfABlYfY69JG4wKzAe4hOko1pECwK47Ia+xs1uqZY7xGDSfGJRJ5vg==",
+			"dev": true,
+			"requires": {
+				"jest-diff": "^26.6.2"
+			}
+		},
 		"q": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
diff --git a/packages/e2e-tests/jest.config.js b/packages/e2e-tests/jest.config.js
index a23def8c2e89d9..defc700dfbbefc 100644
--- a/packages/e2e-tests/jest.config.js
+++ b/packages/e2e-tests/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
 		'@wordpress/jest-console',
 		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',
+		'puppeteer-testing-library/extend-expect',
 	],
 	testPathIgnorePatterns: [
 		'/node_modules/',
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 7d4a29d587f870..edc71efec72152 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -31,6 +31,7 @@
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"lodash": "^4.17.19",
+		"puppeteer-testing-library": "^0.2.0",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
diff --git a/packages/scripts/config/puppeteer.config.js b/packages/scripts/config/puppeteer.config.js
index 48941d9e34210f..2ca9621040a64a 100644
--- a/packages/scripts/config/puppeteer.config.js
+++ b/packages/scripts/config/puppeteer.config.js
@@ -3,5 +3,6 @@ module.exports = {
 		devtools: process.env.PUPPETEER_DEVTOOLS === 'true',
 		headless: process.env.PUPPETEER_HEADLESS !== 'false',
 		slowMo: parseInt( process.env.PUPPETEER_SLOWMO, 10 ) || 0,
+		args: [ '--enable-blink-features=ComputedAccessibilityInfo' ],
 	},
 };

From 372c56581147dfef048eee4c7867d18ccf427014 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 20 Jan 2021 01:20:16 +0800
Subject: [PATCH 02/11] Convert queries in adding-widgets test to use
 puppeteer-testing-library

---
 .../specs/widgets/adding-widgets.test.js      | 174 +++++++++++-------
 1 file changed, 107 insertions(+), 67 deletions(-)

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index 3e7c75c171e0e9..bbcbe40bb6b9b5 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -14,6 +14,7 @@ import {
 /**
  * External dependencies
  */
+import { find, findAll } from 'puppeteer-testing-library';
 import { groupBy, mapValues } from 'lodash';
 
 /** @typedef {import('puppeteer').ElementHandle} ElementHandle */
@@ -22,9 +23,10 @@ describe( 'Widgets screen', () => {
 	beforeEach( async () => {
 		await visitAdminPage( 'themes.php', 'page=gutenberg-widgets' );
 		// Wait for the widget areas to load.
-		await page.waitForSelector(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
+		await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
 	} );
 
 	afterEach( async () => {
@@ -48,20 +50,38 @@ describe( 'Widgets screen', () => {
 	} );
 
 	async function getBlockInGlobalInserter( blockName ) {
-		await page.click(
-			'button[aria-pressed="false"][aria-label="Add block"]'
-		);
+		const addBlockButton = await find( {
+			role: 'button',
+			name: 'Add block',
+			pressed: false,
+		} );
+		await addBlockButton.click();
 
-		const blockLibrary = await page.waitForSelector(
-			'[aria-label="Block Library"][role="region"]'
-		);
+		const blockLibrary = await find( {
+			role: 'region',
+			name: 'Block Library',
+		} );
 
 		// Check that there are categorizations in the inserter (#26329).
-		const categoryHeader = await blockLibrary.$$( 'h2' );
-		expect( categoryHeader.length > 0 ).toBe( true );
+		const categoryHeaders = await findAll(
+			{
+				role: 'heading',
+				level: 2,
+			},
+			{
+				root: blockLibrary,
+			}
+		);
+		expect( categoryHeaders.length > 0 ).toBe( true );
 
-		const [ addBlock ] = await blockLibrary.$x(
-			`//*[@role="option"][*[text()="${ blockName }"]]`
+		const addBlock = await find(
+			{
+				role: 'option',
+				name: blockName,
+			},
+			{
+				root: blockLibrary,
+			}
 		);
 
 		return addBlock;
@@ -70,14 +90,17 @@ describe( 'Widgets screen', () => {
 	async function expectInsertionPointIndicatorToBeBelowLastBlock(
 		widgetArea
 	) {
-		const childBlocks = await widgetArea.$$( '[data-block]' );
+		const childBlocks = await findAll(
+			{ selector: '[data-block]' },
+			{ root: widgetArea }
+		);
 		const lastBlock = childBlocks[ childBlocks.length - 1 ];
 		const lastBlockBoundingBox = await lastBlock.boundingBox();
 
 		// TODO: Probably need a more accessible way to select this, maybe a test ID or data attribute.
-		const insertionPointIndicator = await page.$(
-			'.block-editor-block-list__insertion-point-indicator'
-		);
+		const insertionPointIndicator = await find( {
+			selector: '.block-editor-block-list__insertion-point-indicator',
+		} );
 		const insertionPointIndicatorBoundingBox = await insertionPointIndicator.boundingBox();
 
 		expect(
@@ -86,18 +109,18 @@ describe( 'Widgets screen', () => {
 	}
 
 	async function getInlineInserterButton() {
-		return await page.waitForSelector(
-			'button[aria-label="Add block"][aria-haspopup="true"]',
-			{
-				visible: true,
-			}
-		);
+		return await find( {
+			role: 'combobox',
+			name: 'Add block',
+			haspopup: 'menu',
+		} );
 	}
 
 	it( 'Should insert content using the global inserter', async () => {
-		const widgetAreas = await page.$$(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
+		const widgetAreas = await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
 		const [ firstWidgetArea ] = widgetAreas;
 
 		let addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
@@ -110,9 +133,16 @@ describe( 'Widgets screen', () => {
 
 		await addParagraphBlock.click();
 
-		let addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
-			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+		let addedParagraphBlockInFirstWidgetArea = await find(
+			{
+				name: /^Empty block/,
+				selector: '[data-block][data-type="core/paragraph"]',
+			},
+			{
+				root: firstWidgetArea,
+			}
 		);
+
 		await addedParagraphBlockInFirstWidgetArea.focus();
 
 		await page.keyboard.type( 'First Paragraph' );
@@ -189,9 +219,10 @@ describe( 'Widgets screen', () => {
 	} );
 
 	it( 'Should insert content using the inline inserter', async () => {
-		const firstWidgetArea = await page.$(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
+		const [ firstWidgetArea ] = await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
 
 		// Scroll to the end of the first widget area.
 		await firstWidgetArea.evaluate( ( node ) =>
@@ -211,22 +242,30 @@ describe( 'Widgets screen', () => {
 		let inlineInserterButton = await getInlineInserterButton();
 		await inlineInserterButton.click();
 
-		const inlineQuickInserter = await page.waitForSelector(
-			'[aria-label="Blocks"][role="listbox"]'
-		);
+		let inlineQuickInserter = await find( {
+			role: 'listbox',
+			name: 'Blocks',
+		} );
 
-		const [ paragraphBlock ] = await inlineQuickInserter.$x(
-			'//*[@role="option"][*[text()="Paragraph"]]'
+		const paragraphBlock = await find(
+			{
+				role: 'option',
+				name: 'Paragraph',
+			},
+			{
+				root: inlineQuickInserter,
+			}
 		);
 		await paragraphBlock.click();
 
-		const firstParagraphBlock = await page.waitForFunction(
-			( widgetArea ) =>
-				widgetArea.querySelector(
-					'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
-				),
-			{},
-			firstWidgetArea
+		const firstParagraphBlock = await find(
+			{
+				name: /^Empty block/,
+				selector: '[data-block][data-type="core/paragraph"]',
+			},
+			{
+				root: firstWidgetArea,
+			}
 		);
 
 		await firstParagraphBlock.focus();
@@ -238,7 +277,9 @@ describe( 'Widgets screen', () => {
 		const secondParagraphBlock = await page.evaluateHandle(
 			() => document.activeElement
 		);
-		expect( secondParagraphBlock ).not.toBe( firstParagraphBlock );
+		await expect( secondParagraphBlock ).not.toBeElement(
+			firstParagraphBlock
+		);
 
 		const secondParagraphBlockBoundingBox = await secondParagraphBlock.boundingBox();
 
@@ -262,22 +303,26 @@ describe( 'Widgets screen', () => {
 		await inlineInserterButton.click();
 
 		// TODO: The query should be rewritten with role and label.
-		const inserterSearchBox = await page.waitForSelector(
-			'input[type="search"][placeholder="Search"]'
-		);
-		expect(
-			await inserterSearchBox.evaluate(
-				( node ) => node === document.activeElement
-			)
-		).toBe( true );
+		const inserterSearchBox = await find( {
+			role: 'searchbox',
+			name: 'Search for blocks and patterns',
+		} );
+		await expect( inserterSearchBox ).toHaveFocus();
 
 		await page.keyboard.type( 'Heading' );
 
-		const inserterListBox = await page.$(
-			'[role="listbox"][aria-label="Blocks"]'
-		);
-		const [ headingBlockOption ] = await inserterListBox.$x(
-			'//*[@role="option"][*[text()="Heading"]]'
+		inlineQuickInserter = await find( {
+			role: 'listbox',
+			name: 'Blocks',
+		} );
+		const headingBlockOption = await find(
+			{
+				role: 'option',
+				name: 'Heading',
+			},
+			{
+				root: inlineQuickInserter,
+			}
 		);
 		await headingBlockOption.click();
 
@@ -286,20 +331,15 @@ describe( 'Widgets screen', () => {
 			( node ) => node.previousSibling
 		);
 
-		expect(
-			await addedHeadingBlock.evaluate(
-				( node ) => node === document.activeElement
-			)
-		).toBe( true );
+		await expect( addedHeadingBlock ).toHaveFocus();
 
 		await page.keyboard.type( 'My Heading' );
 
-		const addedHeadingBlockSnapshot = await page.accessibility.snapshot( {
-			root: addedHeadingBlock,
+		await expect( addedHeadingBlock ).toMatchQuery( {
+			name: 'Block: Heading',
+			level: 2,
+			value: 'My Heading',
 		} );
-		expect( addedHeadingBlockSnapshot.name ).toBe( 'Block: Heading' );
-		expect( addedHeadingBlockSnapshot.level ).toBe( 2 );
-		expect( addedHeadingBlockSnapshot.value ).toBe( 'My Heading' );
 
 		await saveWidgets();
 		const serializedWidgetAreas = await getSerializedWidgetAreas();

From 55686df80c5735abd41eb5e9e4ea5de5316eefda Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Thu, 21 Jan 2021 15:36:52 +0800
Subject: [PATCH 03/11] Use launchArgs

---
 package-lock.json                           | 12 ++++++++++++
 packages/scripts/config/puppeteer.config.js |  4 +++-
 packages/scripts/package.json               |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 51783c90c981a5..8e5adb709c8284 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14268,6 +14268,7 @@
 				"postcss-loader": "^4.2.0",
 				"prettier": "npm:wp-prettier@2.2.1-beta-1",
 				"puppeteer-core": "^5.5.0",
+				"puppeteer-testing-library": "^0.3.0",
 				"read-pkg-up": "^1.0.1",
 				"resolve-bin": "^0.4.0",
 				"sass": "^1.26.11",
@@ -14282,6 +14283,17 @@
 				"webpack-cli": "^3.3.11",
 				"webpack-livereload-plugin": "^2.3.0",
 				"webpack-sources": "^2.2.0"
+			},
+			"dependencies": {
+				"puppeteer-testing-library": {
+					"version": "0.3.0",
+					"resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.0.tgz",
+					"integrity": "sha512-iLD2zaz+d+GYUhZ8DgBL3wyg1KsWUOXUMRQEYgRnjmR6uPJJn6XfZRohQUIqExu2D0rPFNA3PDyqgXHDqeqc6w==",
+					"dev": true,
+					"requires": {
+						"jest-diff": "^26.6.2"
+					}
+				}
 			}
 		},
 		"@wordpress/server-side-render": {
diff --git a/packages/scripts/config/puppeteer.config.js b/packages/scripts/config/puppeteer.config.js
index 2ca9621040a64a..d8d7e260718003 100644
--- a/packages/scripts/config/puppeteer.config.js
+++ b/packages/scripts/config/puppeteer.config.js
@@ -1,8 +1,10 @@
+const { launchArgs } = require( 'puppeteer-testing-library' );
+
 module.exports = {
 	launch: {
 		devtools: process.env.PUPPETEER_DEVTOOLS === 'true',
 		headless: process.env.PUPPETEER_HEADLESS !== 'false',
 		slowMo: parseInt( process.env.PUPPETEER_SLOWMO, 10 ) || 0,
-		args: [ '--enable-blink-features=ComputedAccessibilityInfo' ],
+		args: launchArgs(),
 	},
 };
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index c1fe549c787464..06b5247776c65f 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -67,6 +67,7 @@
 		"postcss-loader": "^4.2.0",
 		"prettier": "npm:wp-prettier@2.2.1-beta-1",
 		"puppeteer-core": "^5.5.0",
+		"puppeteer-testing-library": "^0.3.0",
 		"read-pkg-up": "^1.0.1",
 		"resolve-bin": "^0.4.0",
 		"sass": "^1.26.11",

From d4bbf1171cfa4b697f70b12bc0230b10ff2c7930 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 22 Jan 2021 11:57:56 +0800
Subject: [PATCH 04/11] Fix query and remove TODO comment

---
 packages/e2e-tests/specs/widgets/adding-widgets.test.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index bbcbe40bb6b9b5..11128e6e345d73 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -112,7 +112,6 @@ describe( 'Widgets screen', () => {
 		return await find( {
 			role: 'combobox',
 			name: 'Add block',
-			haspopup: 'menu',
 		} );
 	}
 
@@ -302,7 +301,6 @@ describe( 'Widgets screen', () => {
 		inlineInserterButton = await getInlineInserterButton();
 		await inlineInserterButton.click();
 
-		// TODO: The query should be rewritten with role and label.
 		const inserterSearchBox = await find( {
 			role: 'searchbox',
 			name: 'Search for blocks and patterns',

From 8d145e007414281dbc9a6fe05e9ec596e31fcf59 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 8 Feb 2021 13:58:49 +0800
Subject: [PATCH 05/11] Remove puppeteer-testing-library in scripts

---
 package-lock.json                           | 36 +++++----------------
 packages/scripts/config/puppeteer.config.js |  4 +--
 packages/scripts/package.json               |  1 -
 3 files changed, 9 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8e5adb709c8284..0344072666220f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11838,8 +11838,7 @@
 		"@types/node": {
 			"version": "14.14.22",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.22.tgz",
-			"integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==",
-			"dev": true
+			"integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw=="
 		},
 		"@types/node-fetch": {
 			"version": "2.5.10",
@@ -14268,7 +14267,6 @@
 				"postcss-loader": "^4.2.0",
 				"prettier": "npm:wp-prettier@2.2.1-beta-1",
 				"puppeteer-core": "^5.5.0",
-				"puppeteer-testing-library": "^0.3.0",
 				"read-pkg-up": "^1.0.1",
 				"resolve-bin": "^0.4.0",
 				"sass": "^1.26.11",
@@ -14289,7 +14287,6 @@
 					"version": "0.3.0",
 					"resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.0.tgz",
 					"integrity": "sha512-iLD2zaz+d+GYUhZ8DgBL3wyg1KsWUOXUMRQEYgRnjmR6uPJJn6XfZRohQUIqExu2D0rPFNA3PDyqgXHDqeqc6w==",
-					"dev": true,
 					"requires": {
 						"jest-diff": "^26.6.2"
 					}
@@ -25238,7 +25235,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
 			"integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
-			"dev": true,
 			"requires": {
 				"ansi-styles": "^4.1.0",
 				"supports-color": "^7.1.0"
@@ -25248,7 +25244,6 @@
 					"version": "4.2.1",
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
 					"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-					"dev": true,
 					"requires": {
 						"@types/color-name": "^1.1.1",
 						"color-convert": "^2.0.1"
@@ -25258,7 +25253,6 @@
 					"version": "2.0.1",
 					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
 					"requires": {
 						"color-name": "~1.1.4"
 					}
@@ -25266,20 +25260,17 @@
 				"color-name": {
 					"version": "1.1.4",
 					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 				},
 				"has-flag": {
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
 				},
 				"supports-color": {
 					"version": "7.1.0",
 					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
 					"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-					"dev": true,
 					"requires": {
 						"has-flag": "^4.0.0"
 					}
@@ -28368,8 +28359,7 @@
 		"diff-sequences": {
 			"version": "26.6.2",
 			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-			"integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-			"dev": true
+			"integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q=="
 		},
 		"diffie-hellman": {
 			"version": "5.0.3",
@@ -36593,7 +36583,6 @@
 			"version": "26.6.2",
 			"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
 			"integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-			"dev": true,
 			"requires": {
 				"chalk": "^4.0.0",
 				"diff-sequences": "^26.6.2",
@@ -36605,7 +36594,6 @@
 					"version": "26.6.2",
 					"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
 					"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-					"dev": true,
 					"requires": {
 						"@types/istanbul-lib-coverage": "^2.0.0",
 						"@types/istanbul-reports": "^3.0.0",
@@ -36618,7 +36606,6 @@
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
 					"integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-					"dev": true,
 					"requires": {
 						"@types/istanbul-lib-report": "*"
 					}
@@ -36626,14 +36613,12 @@
 				"ansi-regex": {
 					"version": "5.0.0",
 					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-					"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-					"dev": true
+					"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
 				},
 				"ansi-styles": {
 					"version": "4.3.0",
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
 					"requires": {
 						"color-convert": "^2.0.1"
 					}
@@ -36642,7 +36627,6 @@
 					"version": "2.0.1",
 					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
 					"requires": {
 						"color-name": "~1.1.4"
 					}
@@ -36650,20 +36634,17 @@
 				"color-name": {
 					"version": "1.1.4",
 					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 				},
 				"jest-get-type": {
 					"version": "26.3.0",
 					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-					"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-					"dev": true
+					"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig=="
 				},
 				"pretty-format": {
 					"version": "26.6.2",
 					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
 					"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-					"dev": true,
 					"requires": {
 						"@jest/types": "^26.6.2",
 						"ansi-regex": "^5.0.0",
@@ -36674,8 +36655,7 @@
 				"react-is": {
 					"version": "17.0.1",
 					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
-					"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
-					"dev": true
+					"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
 				}
 			}
 		},
diff --git a/packages/scripts/config/puppeteer.config.js b/packages/scripts/config/puppeteer.config.js
index d8d7e260718003..2ca9621040a64a 100644
--- a/packages/scripts/config/puppeteer.config.js
+++ b/packages/scripts/config/puppeteer.config.js
@@ -1,10 +1,8 @@
-const { launchArgs } = require( 'puppeteer-testing-library' );
-
 module.exports = {
 	launch: {
 		devtools: process.env.PUPPETEER_DEVTOOLS === 'true',
 		headless: process.env.PUPPETEER_HEADLESS !== 'false',
 		slowMo: parseInt( process.env.PUPPETEER_SLOWMO, 10 ) || 0,
-		args: launchArgs(),
+		args: [ '--enable-blink-features=ComputedAccessibilityInfo' ],
 	},
 };
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 06b5247776c65f..c1fe549c787464 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -67,7 +67,6 @@
 		"postcss-loader": "^4.2.0",
 		"prettier": "npm:wp-prettier@2.2.1-beta-1",
 		"puppeteer-core": "^5.5.0",
-		"puppeteer-testing-library": "^0.3.0",
 		"read-pkg-up": "^1.0.1",
 		"resolve-bin": "^0.4.0",
 		"sass": "^1.26.11",

From 431e30b59e4a6339a5a9805c0aa938b59a2c1f41 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 21 Apr 2021 11:08:56 +0800
Subject: [PATCH 06/11] Upgrade puppeteer-testing-library

---
 package-lock.json               | 8 ++++----
 packages/e2e-tests/package.json | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0344072666220f..49c61026f6cdd1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13543,7 +13543,7 @@
 				"chalk": "^4.0.0",
 				"expect-puppeteer": "^4.4.0",
 				"lodash": "^4.17.19",
-				"puppeteer-testing-library": "^0.2.0",
+				"puppeteer-testing-library": "^0.3.1",
 				"uuid": "^8.3.0"
 			}
 		},
@@ -49334,9 +49334,9 @@
 			}
 		},
 		"puppeteer-testing-library": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.2.0.tgz",
-			"integrity": "sha512-ykkSjFeOieDJ/G4lE+2I2GD9fW5Nb9vSgfABlYfY69JG4wKzAe4hOko1pECwK47Ia+xs1uqZY7xGDSfGJRJ5vg==",
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.1.tgz",
+			"integrity": "sha512-k2hRLIPEL+BKBHFncEfs1SSICKa9gfEzdxGa5wO3jHofMszJJnIRg9rNEFVx3+K7OOU8gZEqd+zFGICMZNQ9QA==",
 			"dev": true,
 			"requires": {
 				"jest-diff": "^26.6.2"
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index edc71efec72152..c993424b4274e5 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -31,7 +31,7 @@
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"lodash": "^4.17.19",
-		"puppeteer-testing-library": "^0.2.0",
+		"puppeteer-testing-library": "^0.3.1",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {

From df28ee82724354a95ebb6894dc53ced2fa40561a Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 21 Apr 2021 15:23:32 +0800
Subject: [PATCH 07/11] Update to use puppeteer-testing-library queries

---
 .../specs/widgets/adding-widgets.test.js      | 158 ++++++++++++------
 1 file changed, 107 insertions(+), 51 deletions(-)

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index 11128e6e345d73..9390c181c4a434 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -468,14 +468,22 @@ describe( 'Widgets screen', () => {
 	it( 'Should display legacy widgets', async () => {
 		await visitAdminPage( 'widgets.php' );
 
-		const [ searchWidget ] = await page.$x(
-			'//*[@id="widget-list"]//h3[text()="Search"]'
+		const searchWidget = await find(
+			{
+				role: 'heading',
+				name: 'Search',
+				level: 3,
+			},
+			{
+				root: await page.$( '#widget-list' ),
+			}
 		);
 		await searchWidget.click();
 
-		const [ addWidgetButton ] = await page.$x(
-			'//button[text()="Add Widget"]'
-		);
+		const addWidgetButton = await find( {
+			role: 'button',
+			name: 'Add Widget',
+		} );
 		await addWidgetButton.click();
 
 		// Wait for the changes to be saved.
@@ -497,64 +505,87 @@ describe( 'Widgets screen', () => {
 
 		await visitAdminPage( 'themes.php', 'page=gutenberg-widgets' );
 		// Wait for the widget areas to load.
-		await page.waitForSelector(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
+		await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
 
 		// Wait for the widget's form to load.
-		await page.waitForSelector(
-			'[data-block][data-type="core/legacy-widget"] input'
-		);
+		// await page.waitForSelector(
+		// 	'[data-block][data-type="core/legacy-widget"] input'
+		// );
 
-		const legacyWidget = await page.$(
-			'[data-block][data-type="core/legacy-widget"]'
-		);
+		const legacyWidget = await find( {
+			role: 'group',
+			name: 'Block: Legacy Widget',
+		} );
 
-		const legacyWidgetName = await legacyWidget.$( 'h3' );
-		expect(
-			await legacyWidgetName.evaluate( ( node ) => node.textContent )
-		).toBe( 'Search' );
+		const legacyWidgetName = await find(
+			{
+				role: 'heading',
+				level: 3,
+			},
+			{
+				root: legacyWidget,
+			}
+		);
+		expect( legacyWidgetName ).toMatchQuery( { text: 'Search' } );
 
 		await legacyWidget.focus();
 
 		// Trigger the toolbar to appear.
 		await pressKeyWithModifier( 'shift', 'Tab' );
 
-		let [ previewButton ] = await page.$x(
-			'//button[*[contains(text(), "Preview")]]'
-		);
+		let previewButton = await find( {
+			role: 'button',
+			name: 'Preview',
+		} );
 		await previewButton.click();
 
 		const iframe = await legacyWidget.$( 'iframe' );
 		const frame = await iframe.contentFrame();
 
 		// Expect to have search input.
-		await frame.waitForSelector( 'input[type="search"]' );
-
-		const [ editButton ] = await page.$x(
-			'//button[*[contains(text(), "Edit")]]'
+		await find(
+			{
+				role: 'searchbox',
+			},
+			{
+				page: frame,
+			}
 		);
+
+		const editButton = await find( {
+			role: 'button',
+			name: 'Edit',
+		} );
 		await editButton.click();
 
-		const [ titleLabel ] = await legacyWidget.$x(
-			'//label[contains(text(), "Title")]'
-		);
-		const titleInputId = await titleLabel.evaluate( ( node ) =>
-			node.getAttribute( 'for' )
-		);
-		const titleInput = await page.$( `#${ titleInputId }` );
+		const titleInput = await find( {
+			role: 'textbox',
+			name: /^Title/,
+		} );
 		await titleInput.type( 'Search Title' );
 
 		// Trigger the toolbar to appear.
 		await pressKeyWithModifier( 'shift', 'Tab' );
 
-		[ previewButton ] = await page.$x(
-			'//button[*[contains(text(), "Preview")]]'
-		);
+		previewButton = await find( {
+			role: 'button',
+			name: 'Preview',
+		} );
 		await previewButton.click();
 
 		// Expect to have search title.
-		await frame.waitForXPath( '//h2[text()="Search Title"]' );
+		await find(
+			{
+				role: 'heading',
+				name: 'Search Title',
+			},
+			{
+				page: frame,
+			}
+		);
 
 		await saveWidgets();
 		const serializedWidgetAreas = await getSerializedWidgetAreas();
@@ -573,10 +604,11 @@ describe( 'Widgets screen', () => {
 	} );
 
 	it( 'allows widgets to be moved between widget areas using the dropdown in the block toolbar', async () => {
-		const widgetAreas = await page.$$(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
-		const [ firstWidgetArea ] = widgetAreas;
+		const widgetAreas = await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
+		const [ firstWidgetArea, secondWidgetArea ] = widgetAreas;
 
 		// Insert a paragraph it should be in the first widget area.
 		const inserterParagraphBlock = await getBlockInGlobalInserter(
@@ -584,28 +616,47 @@ describe( 'Widgets screen', () => {
 		);
 		await inserterParagraphBlock.hover();
 		await inserterParagraphBlock.click();
-		const addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
-			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+		const addedParagraphBlockInFirstWidgetArea = await find(
+			{
+				role: 'group',
+				name: /^Empty block/,
+			},
+			{ root: firstWidgetArea }
 		);
 		await addedParagraphBlockInFirstWidgetArea.focus();
 		await page.keyboard.type( 'First Paragraph' );
 
 		// Check that the block exists in the first widget area.
-		await page.waitForXPath(
-			'//*[@aria-label="Block: Widget Area"][@role="group"][1]//p[@data-type="core/paragraph"][.="First Paragraph"]'
+		await find(
+			{
+				role: 'group',
+				name: 'Paragraph block',
+				value: 'First Paragraph',
+			},
+			{
+				root: firstWidgetArea,
+			}
 		);
 
 		// Move the block to the second widget area.
 		await showBlockToolbar();
 		await clickBlockToolbarButton( 'Move to widget area' );
-		const widgetAreaButton = await page.waitForXPath(
-			'//button[@role="menuitemradio"][contains(.,"Footer #2")]'
-		);
+		const widgetAreaButton = await find( {
+			role: 'menuitemradio',
+			name: /^Footer #2/,
+		} );
 		await widgetAreaButton.click();
 
 		// Check that the block exists in the second widget area.
-		await page.waitForXPath(
-			'//*[@aria-label="Block: Widget Area"][@role="group"][2]//p[@data-type="core/paragraph"][.="First Paragraph"]'
+		await find(
+			{
+				role: 'group',
+				name: 'Paragraph block',
+				value: 'First Paragraph',
+			},
+			{
+				root: secondWidgetArea,
+			}
 		);
 
 		// Assert that the serialized widget areas shows the block as in the second widget area.
@@ -622,10 +673,15 @@ describe( 'Widgets screen', () => {
 } );
 
 async function saveWidgets() {
-	const [ updateButton ] = await page.$x( '//button[text()="Update"]' );
+	const updateButton = await find( {
+		role: 'button',
+		name: 'Update',
+	} );
 	await updateButton.click();
 
-	await page.waitForXPath( '//*[text()="Widgets saved."]' );
+	await findAll( {
+		text: 'Widgets saved.',
+	} );
 
 	// FIXME: The snackbar above is enough for the widget areas to get saved,
 	// but not enough for the widgets to get saved.

From 3ccd87c329298ca7e869388b2baa0f45f777de2f Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 21 Apr 2021 16:22:18 +0800
Subject: [PATCH 08/11] Delete unused code

---
 packages/e2e-tests/specs/widgets/adding-widgets.test.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index 9390c181c4a434..2f152acc25c0ab 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -510,11 +510,6 @@ describe( 'Widgets screen', () => {
 			name: 'Block: Widget Area',
 		} );
 
-		// Wait for the widget's form to load.
-		// await page.waitForSelector(
-		// 	'[data-block][data-type="core/legacy-widget"] input'
-		// );
-
 		const legacyWidget = await find( {
 			role: 'group',
 			name: 'Block: Legacy Widget',

From 1501b73ac374c5f8e2185878b889febad617cc46 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 21 Apr 2021 17:34:23 +0800
Subject: [PATCH 09/11] Try to fix test

---
 .../specs/widgets/adding-widgets.test.js       | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index 2f152acc25c0ab..aba4827747b449 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -510,6 +510,11 @@ describe( 'Widgets screen', () => {
 			name: 'Block: Widget Area',
 		} );
 
+		// Wait for the widget's form to load.
+		await page.waitForSelector(
+			'[data-block][data-type="core/legacy-widget"] input'
+		);
+
 		const legacyWidget = await find( {
 			role: 'group',
 			name: 'Block: Legacy Widget',
@@ -556,10 +561,15 @@ describe( 'Widgets screen', () => {
 		} );
 		await editButton.click();
 
-		const titleInput = await find( {
-			role: 'textbox',
-			name: /^Title/,
-		} );
+		const titleInput = await find(
+			{
+				role: 'textbox',
+				name: /^Title/,
+			},
+			{
+				root: legacyWidget,
+			}
+		);
 		await titleInput.type( 'Search Title' );
 
 		// Trigger the toolbar to appear.

From f5a1cba0ab8af49f595260b681bcb63d79cfb6a8 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 21 Apr 2021 19:53:20 +0800
Subject: [PATCH 10/11] Switch to use showBlockToolbar

---
 .../specs/widgets/adding-widgets.test.js        | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index aba4827747b449..260b32ab516d2a 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -6,7 +6,6 @@ import {
 	activateTheme,
 	clickBlockToolbarButton,
 	deactivatePlugin,
-	pressKeyWithModifier,
 	showBlockToolbar,
 	visitAdminPage,
 } from '@wordpress/e2e-test-utils';
@@ -395,8 +394,7 @@ describe( 'Widgets screen', () => {
 		);
 		await firstParagraphBlock.focus();
 
-		// Trigger the toolbar to appear.
-		await pressKeyWithModifier( 'shift', 'Tab' );
+		await showBlockToolbar();
 
 		const blockToolbar = await page.waitForSelector(
 			'[role="toolbar"][aria-label="Block tools"]'
@@ -533,9 +531,7 @@ describe( 'Widgets screen', () => {
 
 		await legacyWidget.focus();
 
-		// Trigger the toolbar to appear.
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
+		await showBlockToolbar();
 		let previewButton = await find( {
 			role: 'button',
 			name: 'Preview',
@@ -572,14 +568,15 @@ describe( 'Widgets screen', () => {
 		);
 		await titleInput.type( 'Search Title' );
 
-		// Trigger the toolbar to appear.
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
+		await showBlockToolbar();
 		previewButton = await find( {
 			role: 'button',
 			name: 'Preview',
 		} );
-		await previewButton.click();
+		await Promise.all( [
+			previewButton.click(),
+			frame.waitForNavigation(),
+		] );
 
 		// Expect to have search title.
 		await find(

From 67f0555aed0f55764a6edb2797977b3c83789e49 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Thu, 22 Apr 2021 19:05:15 +0800
Subject: [PATCH 11/11] Mark as experimental and restrict usage

---
 .eslintrc.js                                            | 5 +++++
 packages/e2e-tests/specs/widgets/adding-widgets.test.js | 1 +
 2 files changed, 6 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index bac9e84341434e..5360d8117321fd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -89,6 +89,11 @@ module.exports = {
 						message:
 							'Please use `combineReducers` from `@wordpress/data` instead.',
 					},
+					{
+						name: 'puppeteer-testing-library',
+						message:
+							'`puppeteer-testing-library` is still experimental.',
+					},
 				],
 			},
 		],
diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index 260b32ab516d2a..d01a52eddfe9c6 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -13,6 +13,7 @@ import {
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import { find, findAll } from 'puppeteer-testing-library';
 import { groupBy, mapValues } from 'lodash';