How to use the @wordpress/e2e-test-utils.selectBlockByClientId function in @wordpress/e2e-test-utils

it( 'should keep text content height when resizing when max font size', async () => {
			// click to enable edit and input text to have non-empty textbox
			await page.click( '.wp-block-amp-story-text' );
			await page.keyboard.type( 'Hello' );

			// deselect element again by clicking the background and then reselect element (but now not in editable mode)
			await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
			await selectBlockByClassName( 'wp-block-amp-story-text' );

			// resize to make sure font-size will be maximum
			const resizableHandleBottom = await page.$( '.wp-block.is-selected .components-resizable-box__handle-bottom' );
			await dragAndResize( resizableHandleBottom, { x: 0, y: 100 } );

			const initialDimensions = await getSelectedTextBoxDimensions();

			await dragAndResize( resizableHandleBottom, { x: 0, y: 150 } );
			await getSelectedBlockDimensions();

			const newDimensions = await getSelectedTextBoxDimensions();

			expect( newDimensions.height ).toStrictEqual( initialDimensions.height );
		} );

it( 'should set the featured image on uploading a big enough image as the Background Media', async () => {
			await createNewPost( { postType: 'amp_story' } );

			// Select the default page block.
			await selectBlockByClientId(
				( await getAllBlocks() )[ 0 ].clientId,
			);

			// Click the media selection button.
			await page.waitForSelector( '.editor-amp-story-page-background' );
			await page.click( '.editor-amp-story-page-background' );
			const uploadedImage = await uploadMedia( LARGE_IMAGE );

			// Select the image from the Media Library.
			await page.waitForSelector( SELECT_BUTTON );
			await page.click( SELECT_BUTTON );

			await clickButton( 'Document' );
			await clickButton( 'Featured Image' );

			// The featured image warning notice text should not appear.

it( 'Should be possible to select padding', async () => {
		expect( console ).toHaveWarned();

		await insertRowBlock();

		// Select first column block
		const columnBlocks = await getColumnBlocks();
		const firstColumnBlockClientId = columnBlocks[ 0 ].clientId;
		await selectBlockByClientId( firstColumnBlockClientId );

		// Select padding
		await openSidebarPanelWithTitle( 'Padding (inside column)' );
		await selectOption( 'Size', 'p-2' );
		const columnData = await getDataValuesOfElement( `#block-${ firstColumnBlockClientId }` );
		expect( columnData.padding ).toMatch( 'p-2' );

		expect( await getEditedPostContent() ).toMatchSnapshot();
	} );
} );

it( 'should allow move to next page', async () => {
			const firstPageClientId = ( await getAllBlocks() )[ 0 ].clientId;
			await insertBlock( 'Page' );
			await insertBlock( 'Page' );
			await goToPreviousPage();
			await goToPreviousPage();

			await selectBlockByClientId( firstPageClientId );
			await page.$( `#block-${ firstPageClientId }` );
			// Wait for transition time 300ms.
			await page.waitFor( 300 );

			await page.$( ACTIVE_PAGE_SELECTOR );
			let block = await page.$( BLOCK_SELECTOR );
			await makeRightClick( block );

			await page.waitForSelector( POPOVER_SELECTOR );

			expect( page ).not.toMatchElement( POPOVER_SELECTOR + ' .right-click-previous-page' );
			expect( page ).toMatchElement( POPOVER_SELECTOR + ' .right-click-next-page' );

			await clickButton( 'Send block to next page' );
			await page.waitForSelector( ACTIVE_PAGE_SELECTOR + ' ' + BLOCK_SELECTOR );
			expect( page ).toMatchElement( ACTIVE_PAGE_SELECTOR + ' ' + BLOCK_SELECTOR );

it( 'should extract the poster image from a newly uploaded background video', async () => {
			await createNewPost( { postType: 'amp_story' } );

			// Select the default page block.
			await selectBlockByClientId(
				( await getAllBlocks() )[ 0 ].clientId,
			);

			// Click the media selection button.
			await page.waitForSelector( '.editor-amp-story-page-background' );
			await page.click( '.editor-amp-story-page-background' );
			await uploadMedia( 'clothes-hanged-to-dry-1295231.mp4' );

			// Insert the uploaded video.
			await page.click( '.media-modal button.media-button-select' );

			// Wait for video to be inserted.
			await page.waitForSelector( '.editor-amp-story-page-video' );

			// Wait for poster to be extracted.
			await expect( page ).toMatchElement( '#editor-amp-story-page-poster' );

it( 'should not display a warning in the Media Library for an appropriate video file size', async () => {
			await createNewPost( { postType: 'amp_story' } );

			// Select the default page block.
			await selectBlockByClientId(
				( await getAllBlocks() )[ 0 ].clientId,
			);

			// Click the media selection button.
			await page.waitForSelector( '.editor-amp-story-page-background' );
			await page.click( '.editor-amp-story-page-background' );
			await uploadMedia( CORRECT_VIDEO );

			// The warning Notice component should not appear.
			await expect( page ).not.toMatchElement( NOTICE_SELECTOR );

			// The warning notice text should not appear.
			await expect( page ).not.toMatch( EXPECTED_NOTICE_TEXT );

			// It should be possible to insert the uploaded video.
			await expect( page ).toClick( SELECT_BUTTON );

it( 'should save the page advancement setting correctly', async () => {
		const pageAdvancementSelector = '.components-select-control__input';
		await page.waitForSelector( pageAdvancementSelector );
		await page.select( pageAdvancementSelector, 'time' );

		const secondsSelector = 'input[aria-label="Time in seconds"]';
		await page.waitForSelector( secondsSelector );

		await clearInputValue( secondsSelector );
		await page.type( secondsSelector, '5' );

		await saveDraft();
		await page.reload();

		await selectBlockByClientId(
			( await getAllBlocks() )[ 0 ].clientId
		);
		await page.waitForSelector( secondsSelector );

		expect( await getInputValue( secondsSelector ) ).toBe( '5' );

		const editorPage = page;
		const previewPage = await openPreviewPage( editorPage, 'amp-story' );
		await previewPage.waitForSelector( '.amp-story-block-wrapper' );

		const [ elementHandle ] = await previewPage.$x( '//amp-story-page/@auto-advance-after' );
		const secondsHandle = await elementHandle.getProperty( 'value' );
		const seconds = await secondsHandle.jsonValue();
		expect( seconds ).toStrictEqual( '5s' );
	} );

it( 'should display validation error when CTA block is on the first Page', async () => {
		await createNewPost( { postType: 'amp_story' } );

		const firstPageClientId = ( await getAllBlocks() )[ 0 ].clientId;

		await insertBlock( 'Page' );

		await insertBlock( 'Call to Action' );
		await goToPreviousPage();

		await page.waitForSelector( `#block-${ firstPageClientId }.amp-page-active` );
		await selectBlockByClientId( firstPageClientId );

		await clickButtonByLabel( 'More options' );
		await clickButton( 'Remove Block' );

		const errorSelector = '.wp-block .block-editor-warning__message';
		await page.waitForSelector( errorSelector );
		const element = await page.$( errorSelector );
		const text = await ( await element.getProperty( 'textContent' ) ).jsonValue();
		expect( text ).toStrictEqual( 'Call to Action: This block can not be used on the first page.' );
	} );
} );

export const selectColumnBlock = async ( rowIndex = 0, columnIndex = 0 ) => {
	const columnBlocks = await getColumnBlocks( rowIndex );
	await selectBlockByClientId( columnBlocks[ columnIndex ].clientId );
};

export const selectBlockByName = async ( name, index = 0 ) => {
	await selectBlockByClientId(
		( await getBlockByName( name, index ) ).clientId
	);
};