Fix failed E2E tests related to attribute filter block (#7472)

Author: dinhtungdu

tests/e2e/specs/backend/attribute-filter.test.js

@@ -23,16 +23,26 @@ describe( `${ block.name } Block`, () => {
 		await switchUserToAdmin();
 		await visitBlockPage( `${ block.name } Block` );
 
+		await page.waitForSelector( 'span.woocommerce-search-list__item-name' );
+
 		// eslint-disable-next-line jest/no-standalone-expect
 		await expect( page ).toClick(
 			'span.woocommerce-search-list__item-name',
 			{ text: 'Capacity' }
 		);
-		//needed for attributes list to load correctly
-		await page.waitForTimeout( 1000 );
 
 		// eslint-disable-next-line jest/no-standalone-expect
-		await expect( page ).toClick( 'button', { text: 'Done' } );
+		await expect( page ).toClick(
+			'span.woocommerce-search-list__item-name',
+			{ text: 'Capacity' }
+		);
+
+		// eslint-disable-next-line jest/no-standalone-expect
+		await expect( page ).toClick(
+			'.wp-block-woocommerce-attribute-filter button',
+			{ text: 'Done' }
+		);
+		await page.waitForTimeout( 30000 );
 		await page.waitForNetworkIdle();
 	} );
 

tests/e2e/specs/shopper/filter-products-by-attribute.test.ts

@@ -67,8 +67,14 @@ describe( `${ block.name } Block`, () => {
 
 			await insertBlock( 'All Products' );
 			await insertBlock( block.name );
-			await page.click( selectors.editor.firstAttributeInTheList );
-			await page.click( selectors.editor.doneButton );
+			const canvasEl = canvas();
+
+			// It seems that .click doesn't work well with radio input element.
+			await canvasEl.$eval(
+				block.selectors.editor.firstAttributeInTheList,
+				( el ) => ( el as HTMLInputElement ).click()
+			);
+			await canvasEl.click( selectors.editor.doneButton );
 			await publishPost();
 
 			const link = await page.evaluate( () =>