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

it( 'should send the block completely to the front on clicking that button', async () => {
			// Send the block completely to the front.
			await page.click( CODE_BLOCK_SELECTOR );
			await clickButton( 'Front' );

			// The code block should now be at the front, which means it'll be last in getAllBlocks().
			expect( last( ( await getAllBlocks() )[ 0 ].innerBlocks ).name ).toStrictEqual( CODE_BLOCK_NAME );
		} );

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

		await insertRowBlock();
		await selectRowBlock();

		// Change horizontal alignment
		await clickBlockToolbarButton( 'Change horizontal alignment of columns' );
		await clickButton( 'Align columns right' );
		expect( await page.$( '[data-type="wp-bootstrap-blocks/row"][data-alignment="right"]' ) ).not.toBeNull();
		expect( await getEditedPostContent() ).toMatchSnapshot();

		// Change vertical alignment
		await clickBlockToolbarButton( 'Change vertical alignment of columns' );
		await clickButton( 'Align columns bottom' );
		expect( await page.$( '[data-type="wp-bootstrap-blocks/row"][data-vertical-alignment="bottom"]' ) ).not.toBeNull();
		expect( await getEditedPostContent() ).toMatchSnapshot();
	} );

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

		await insertRowBlock();
		await selectRowBlock();

		// Change horizontal alignment
		await clickBlockToolbarButton( 'Change horizontal alignment of columns' );
		await clickButton( 'Align columns right' );
		expect( await page.$( '[data-type="wp-bootstrap-blocks/row"][data-alignment="right"]' ) ).not.toBeNull();
		expect( await getEditedPostContent() ).toMatchSnapshot();

		// Change vertical alignment
		await clickBlockToolbarButton( 'Change vertical alignment of columns' );
		await clickButton( 'Align columns bottom' );
		expect( await page.$( '[data-type="wp-bootstrap-blocks/row"][data-vertical-alignment="bottom"]' ) ).not.toBeNull();
		expect( await getEditedPostContent() ).toMatchSnapshot();
	} );

it( 'Should be possible to change alignment', async () => {
		await insertButtonBlock();
		await selectButtonBlock();

		// Change alignment
		await clickBlockToolbarButton( 'Change button alignment' );
		await clickButton( 'Align Text Center' );
		expect( await page.$( '[data-type="wp-bootstrap-blocks/button"][data-alignment="center"]' ) ).not.toBeNull();

		// Editor content should match snapshot
		expect( await getEditedPostContent() ).toMatchSnapshot();
	} );
} );

it( 'should send the block forward on clicking that button', async () => {
			// The Video block was the last added, so it should be at the front.
			expect( last( ( await getAllBlocks() )[ 0 ].innerBlocks ).name ).toStrictEqual( 'core/video' );

			// Send the code block forward, but not completely to the front.
			await page.click( CODE_BLOCK_SELECTOR );
			await clickButton( 'Forward' );

			// The code block should be have moved forward in the order, but is not yet at the front, that would be an index of 4.
			expect( ( await getAllBlocks() )[ 0 ].innerBlocks[ 3 ].name ).toStrictEqual( CODE_BLOCK_NAME );
		} );