CYS - E2E test: not use snapshot approach for color picker E2E tests (#46333)

* CYS - E2E test: not use snapshot approach for color picker E2E tests

* Add changefile(s) from automation for the following project(s): woocommerce

* remove comment

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce/changelog/46333-fix-improve-color-picker-e2e-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: CYS - E2E test: not use snapshot approach for color picker E2E tests
+

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js

@@ -16,8 +16,214 @@ const test = base.extend( {
 	},
 } );
 
-// These tests will be fixed by https://github.com/woocommerce/woocommerce/pull/46127.
-test.skip( 'Assembler -> Color Pickers', () => {
+const colorPalette = {
+	'Blueberry Sorbet': {
+		button: {
+			background: 'rgb(189, 64, 137)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(255, 255, 255)', 'rgb(32, 56, 182)' ],
+		},
+		header: {
+			color: [ 'rgb(255, 255, 255)', 'rgb(32, 56, 182)' ],
+		},
+	},
+	'Ancient Bronze': {
+		button: {
+			background: 'rgb(140, 131, 105)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(50, 56, 86)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(50, 56, 86)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Crimson Tide': {
+		button: {
+			background: 'rgb(236, 94, 63)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(16, 19, 23)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(16, 19, 23)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Purple Twilight': {
+		button: {
+			background: 'rgb(106, 94, 183)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(9, 9, 9)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(9, 9, 9)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Green Thumb': {
+		button: {
+			background: 'rgb(75, 123, 77)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(22, 74, 65)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(22, 74, 65)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Golden Haze': {
+		button: {
+			background: 'rgb(235, 181, 79)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(81, 81, 81)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(81, 81, 81)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Golden Indigo': {
+		button: {
+			background: 'rgb(192, 159, 80)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(64, 90, 167)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(64, 90, 167)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Arctic Dawn': {
+		button: {
+			background: 'rgb(221, 48, 29)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(13, 18, 99)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(13, 18, 99)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Raspberry Chocolate': {
+		button: {
+			background: 'rgb(214, 77, 104)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(36, 29, 26)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(36, 29, 26)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	Canary: {
+		button: {
+			background: 'rgb(102, 102, 102)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(15, 15, 5)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(15, 15, 5)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	Ice: {
+		button: {
+			background: 'rgb(18, 18, 63)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(18, 18, 63)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(18, 18, 63)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Rustic Rosewood': {
+		button: {
+			background: 'rgb(238, 121, 124)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(9, 9, 9)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(9, 9, 9)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Cinnamon Latte': {
+		button: {
+			background: 'rgb(188, 128, 52)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(9, 9, 9)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(9, 9, 9)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	Lightning: {
+		button: {
+			background: 'rgb(254, 254, 254)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(235, 255, 210)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(235, 255, 210)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	'Aquamarine Night': {
+		button: {
+			background: 'rgb(86, 251, 185)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(255, 255, 255)' ],
+		},
+	},
+	Charcoal: {
+		button: {
+			background: 'rgb(239, 239, 239)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(219, 219, 219)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(219, 219, 219)', 'rgb(255, 255, 255)' ],
+		},
+	},
+	Slate: {
+		button: {
+			background: 'rgb(255, 223, 109)',
+			color: 'rgb(253, 251, 239)',
+		},
+		paragraph: {
+			color: [ 'rgb(239, 242, 249)', 'rgb(255, 255, 255)' ],
+		},
+		header: {
+			color: [ 'rgb(239, 242, 249)', 'rgb(255, 255, 255)' ],
+		},
+	},
+};
+
+test.describe( 'Assembler -> Color Pickers', () => {
 	test.use( { storageState: process.env.ADMINSTATE } );
 
 	test.beforeAll( async ( { baseURL } ) => {
@@ -78,41 +284,89 @@ test.skip( 'Assembler -> Color Pickers', () => {
 		await expect( colorPickers ).toHaveCount( 18 );
 	} );
 
-	test( 'Picking a color should trigger an update of colors on the site preview', async ( {
+	for ( const [ colorPaletteName, colors ] of Object.entries(
+		colorPalette
+	) ) {
+		test( `Color palette ${ colorPaletteName } should be applied`, async ( {
 			assemblerPageObject,
-	}, testInfo ) => {
+			page,
+		} ) => {
 			const assembler = await assemblerPageObject.getAssembler();
 			const editor = await assemblerPageObject.getEditor();
-		testInfo.snapshotSuffix = '';
 
-		await assembler
-			.locator(
-				'.woocommerce-customize-store_global-styles-variations_item'
-			)
-			.waitFor( {
-				strict: false,
-			} );
+			const colorPicker = assembler.getByLabel( colorPaletteName );
 
-		const colorPickers = await assembler
-			.locator(
-				'.woocommerce-customize-store_global-styles-variations_item'
-			)
-			.all();
-
-		let index = 0;
-		for ( const colorPicker of colorPickers ) {
-			await colorPicker.waitFor();
 			await colorPicker.click();
-			// The snapshot is created in headless mode. Please make sure the browser is in headless mode to ensure the snapshot is correct.
-			await expect(
-				( await editor.locator( 'style' ).allInnerTexts() ).join( ',' )
-			).toMatchSnapshot( {
-				name: 'color-palette-' + index,
-			} );
 
-			index++;
+			const saveButton = assembler.getByText( 'Save' );
+
+			const waitResponse = page.waitForResponse(
+				( response ) =>
+					response.url().includes( 'wp-json/wp/v2/global-styles' ) &&
+					response.status() === 200
+			);
+
+			await saveButton.click();
+
+			await waitResponse;
+
+			const buttons = await editor
+				.locator( '.wp-block-button > .wp-block-button__link' )
+				.evaluateAll( ( elements ) =>
+					elements.map( ( element ) => {
+						const style = window.getComputedStyle( element );
+						return {
+							background: style.backgroundColor,
+							color: style.color,
+						};
+					} )
+				);
+
+			const paragraphs = await editor
+				.locator(
+					'p.wp-block.wp-block-paragraph:not([aria-label="Empty block; start writing or type forward slash to choose a block"])'
+				)
+				.evaluateAll( ( elements ) =>
+					elements.map( ( element ) => {
+						const style = window.getComputedStyle( element );
+						return {
+							background: style.backgroundColor,
+							color: style.color,
+						};
+					} )
+				);
+
+			const headers = await editor
+				.locator( 'h1, h2, h3, h4, h5, h6' )
+				.evaluateAll( ( elements ) =>
+					elements.map( ( element ) => {
+						const style = window.getComputedStyle( element );
+						return {
+							background: style.backgroundColor,
+							color: style.color,
+						};
+					} )
+				);
+
+			for ( const element of buttons ) {
+				await expect( element.background ).toEqual(
+					colors.button.background
+				);
+			}
+
+			for ( const element of paragraphs ) {
+				expect( colors.paragraph.color.includes( element.color ) ).toBe(
+					true
+				);
+			}
+
+			for ( const element of headers ) {
+				expect( colors.header.color.includes( element.color ) ).toBe(
+					true
+				);
 			}
 		} );
+	}
 
 	test( 'Color picker should be focused when a color is picked', async ( {
 		assemblerPageObject,
@@ -201,13 +455,61 @@ test.skip( 'Assembler -> Color Pickers', () => {
 		await waitResponse;
 
 		await page.goto( baseURL );
-		const style = await page
-			.locator( '#global-styles-inline-css' )
-			.innerHTML();
 
-		// The snapshot is created in headless mode. Please make sure the browser is in headless mode to ensure the snapshot is correct.
-		expect( style ).toMatchSnapshot( {
-			name: 'color-palette-frontend',
-		} );
+		const paragraphs = await page
+			.locator(
+				'p.wp-block.wp-block-paragraph:not([aria-label="Empty block; start writing or type forward slash to choose a block"])'
+			)
+			.evaluateAll( ( elements ) =>
+				elements.map( ( element ) => {
+					const style = window.getComputedStyle( element );
+					return {
+						background: style.backgroundColor,
+						color: style.color,
+					};
+				} )
+			);
+
+		const buttons = await page
+			.locator( '.wp-block-button > .wp-block-button__link' )
+			.evaluateAll( ( elements ) =>
+				elements.map( ( element ) => {
+					const style = window.getComputedStyle( element );
+					return {
+						background: style.backgroundColor,
+						color: style.color,
+					};
+				} )
+			);
+
+		const headers = await page
+			.locator( 'h1, h2, h3, h4, h5, h6' )
+			.evaluateAll( ( elements ) =>
+				elements.map( ( element ) => {
+					const style = window.getComputedStyle( element );
+					return {
+						background: style.backgroundColor,
+						color: style.color,
+					};
+				} )
+			);
+
+		for ( const element of buttons ) {
+			await expect( element.background ).toEqual(
+				colorPalette.Slate.button.background
+			);
+		}
+
+		for ( const element of paragraphs ) {
+			expect(
+				colorPalette.Slate.paragraph.color.includes( element.color )
+			).toBe( true );
+		}
+
+		for ( const element of headers ) {
+			expect(
+				colorPalette.Slate.header.color.includes( element.color )
+			).toBe( true );
+		}
 	} );
 } );