[Mobile] - E2E tests - Add new helpers (#48358)

* Mobile - Editor Page - Add getButtonBlockTextInputAtPosition

* Mobile - Buttons block - Fix issue when creating a new button using the inline appender and the formatting options not showing up when the button gets automatically focused

* Mobile - E2E Tests - Adds selectTextFromTextInput util, toggleFormatting, openLintSettings, getButtonBlockTextInputAtPosition, addButtonWithInlineAppender and waitForElementToBeDisplayedByXPath helpers

* Mobile - E2E Editor Page - Update dismissKeyboard to support landscape orientation

* Mobile - E2E Utils - Wait for selection toolbar to show up

* Mobile - E2E helpers - Add getToobal helper

* Mobile - E2E utils - Rename selectTextFromTextInput to selectTextFromElement

packages/block-library/src/buttons/edit.native.js

@@ -103,7 +103,7 @@ export default function ButtonsEdit( {
 
 			const insertedBlock = createBlock( 'core/button' );
 
-			insertBlock( insertedBlock, index, clientId );
+			insertBlock( insertedBlock, index, clientId, false );
 			selectBlock( insertedBlock.clientId );
 		}, 200 ),
 		[]

packages/edit-post/src/components/header/header-toolbar/index.native.js

@@ -99,8 +99,13 @@ function HeaderToolbar( {
 		? wasNoContentSelected.current
 		: noContentSelected;
 
+	/* translators: accessibility text for the editor toolbar */
+	const toolbarAriaLabel = __( 'Document tools' );
+
 	return (
 		<View
+			testID={ toolbarAriaLabel }
+			accessibilityLabel={ toolbarAriaLabel }
 			style={ [
 				getStylesFromColorScheme(
 					styles[ 'header-toolbar__container' ],

packages/react-native-editor/__device-tests__/helpers/utils.js

@@ -375,6 +375,19 @@ const tapPasteAboveElement = async ( driver, element ) => {
 	}
 };
 
+const selectTextFromElement = async ( driver, element ) => {
+	if ( isAndroid() ) {
+		await longPressMiddleOfElement( driver, element, 0 );
+	} else {
+		await doubleTap( driver, element );
+		await driver.waitForElementByXPath(
+			'//XCUIElementTypeMenuItem[@name="Copy"]',
+			wd.asserters.isDisplayed,
+			4000
+		);
+	}
+};
+
 // Starts from the middle of the screen or the element(if specified)
 // and swipes upwards.
 const swipeUp = async (
@@ -684,6 +697,7 @@ module.exports = {
 	longPressMiddleOfElement,
 	setClipboard,
 	setupDriver,
+	selectTextFromElement,
 	stopDriver,
 	swipeDown,
 	swipeFromTo,

packages/react-native-editor/__device-tests__/pages/editor-page.js

@@ -315,8 +315,20 @@ class EditorPage {
 		const { addButtonLocation } = this.initialValues;
 		const addButton = await this.getAddBlockButton();
 		const location = await addButton.getLocation();
+		let YLocation = addButtonLocation?.y;
+		const currentOrientation = await this.driver.getOrientation();
+		const isLandscape = currentOrientation === 'LANDSCAPE';
+
+		if ( isLandscape ) {
+			const windowSize = await this.driver.getWindowSize();
+			const safeAreaOffset = 32;
+			YLocation = Math.floor(
+				( windowSize.height * YLocation ) / windowSize.width -
+					safeAreaOffset
+			);
+		}
 
-		if ( location.y < addButtonLocation?.y ) {
+		if ( location.y < YLocation ) {
 			await this.waitForKeyboardToBeHidden();
 		}
 	}
@@ -369,6 +381,10 @@ class EditorPage {
 	// Block toolbar functions
 	// =========================
 
+	async getToolbar() {
+		return await this.driver.elementsByAccessibilityId( 'Document tools' );
+	}
+
 	async addNewBlock( blockName, relativePosition ) {
 		const addButton = await this.getAddBlockButton();
 
@@ -574,6 +590,28 @@ class EditorPage {
 		await removeActionButton.click();
 	}
 
+	// =========================
+	// Formatting toolbar functions
+	// =========================
+
+	async toggleFormatting( formatting ) {
+		const identifier = isAndroid()
+			? `//android.widget.Button[@content-desc="${ formatting }"]/android.view.ViewGroup`
+			: `//XCUIElementTypeButton[@name="${ formatting }"]`;
+		const toggleElement = await this.waitForElementToBeDisplayedByXPath(
+			identifier
+		);
+		return await toggleElement.click();
+	}
+
+	async openLinkToSettings() {
+		const element = await this.waitForElementToBeDisplayedById(
+			'Link to, Search or type URL'
+		);
+
+		await element.click();
+	}
+
 	// =========================
 	// Paragraph Block functions
 	// =========================
@@ -882,6 +920,27 @@ class EditorPage {
 		return await waitForVisible( this.driver, blockLocator );
 	}
 
+	// =========================
+	// Button Block functions
+	// =========================
+
+	async getButtonBlockTextInputAtPosition( position = 1 ) {
+		const blockLocator = isAndroid()
+			? `//android.view.ViewGroup[@content-desc="Button Block. Row ${ position }"]/android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup/android.widget.EditText`
+			: `//XCUIElementTypeButton[contains(@name, "Button Block. Row ${ position }")]//XCUIElementTypeTextView`;
+
+		return await this.waitForElementToBeDisplayedByXPath( blockLocator );
+	}
+
+	async addButtonWithInlineAppender( position = 1 ) {
+		const appenderButton = isAndroid()
+			? await this.waitForElementToBeDisplayedByXPath(
+					`//android.view.ViewGroup[@content-desc="block-list"]/android.view.ViewGroup[${ position }]/android.widget.Button`
+			  )
+			: await this.waitForElementToBeDisplayedById( 'appender-button' );
+		await appenderButton.click();
+	}
+
 	async waitForElementToBeDisplayedById( id, timeout = 2000 ) {
 		return await this.driver.waitForElementByAccessibilityId(
 			id,
@@ -919,6 +978,8 @@ const blockNames = {
 	verse: 'Verse',
 	shortcode: 'Shortcode',
 	group: 'Group',
+	buttons: 'Buttons',
+	button: 'Button',
 };
 
 module.exports = { initializeEditorPage, blockNames };