diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
index 2aefea35ca1c23..2c6c9bf3481188 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
@@ -2,21 +2,23 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
+import {
+ headerBlockEmpty,
+ imageBlockEmpty,
+ listBlockEmpty,
+ moreBlockEmpty,
+ paragraphBlockEmpty,
+ separatorBlockEmpty,
+} from './helpers/test-data';
describe( 'Gutenberg Editor tests for Block insertion 2', () => {
it( 'adds new block at the end of post', async () => {
await editorPage.addNewBlock( blockNames.heading );
-
await editorPage.addNewBlock( blockNames.list );
- const expectedHtml = `
-
-
-
-
-
-`;
-
+ const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join(
+ '\n\n'
+ );
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
} );
@@ -27,20 +29,13 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
);
await headingBlockElement.click();
-
await editorPage.addNewBlock( blockNames.separator );
- const expectedHtml = `
-
-
-
-
-
-
-
-
-
-`;
+ const expectedHtml = [
+ headerBlockEmpty,
+ separatorBlockEmpty,
+ listBlockEmpty,
+ ].join( '\n\n' );
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
@@ -54,24 +49,14 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
await separatorBlockElement.click();
await editorPage.addNewBlock( blockNames.image, 'before' );
- await editorPage.driver.sleep( 1000 );
await editorPage.closePicker();
- const expectedHtml = `
-
-
-
-
-![]()
-
-
-
-
-
-
-
-
-`;
+ const expectedHtml = [
+ headerBlockEmpty,
+ imageBlockEmpty,
+ separatorBlockEmpty,
+ listBlockEmpty,
+ ].join( '\n\n' );
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
@@ -80,25 +65,13 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
it( 'inserts block at the end of post when no block is selected', async () => {
await editorPage.addNewBlock( blockNames.more );
- const expectedHtml = `
-
-
-
-
-![]()
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+ const expectedHtml = [
+ headerBlockEmpty,
+ imageBlockEmpty,
+ separatorBlockEmpty,
+ listBlockEmpty,
+ moreBlockEmpty,
+ ].join( '\n\n' );
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
@@ -107,29 +80,14 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
- const expectedHtml = `
-
-
-
-
-![]()
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+ const expectedHtml = [
+ headerBlockEmpty,
+ imageBlockEmpty,
+ separatorBlockEmpty,
+ listBlockEmpty,
+ moreBlockEmpty,
+ paragraphBlockEmpty,
+ ].join( '\n\n' );
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js
index d0bcea763a7c0b..2c851aa195d911 100644
--- a/packages/react-native-editor/__device-tests__/helpers/test-data.js
+++ b/packages/react-native-editor/__device-tests__/helpers/test-data.js
@@ -141,3 +141,27 @@ exports.fileBlockPlaceholder = `
`;
+
+exports.headerBlockEmpty = `
+
+`;
+
+exports.separatorBlockEmpty = `
+
+`;
+
+exports.listBlockEmpty = `
+
+`;
+
+exports.imageBlockEmpty = `
+![]()
+`;
+
+exports.moreBlockEmpty = `
+
+`;
+
+exports.paragraphBlockEmpty = `
+
+`;
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index 202f0db13ce1ea..5486f5b31c327f 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -258,22 +258,25 @@ class EditorPage {
// =========================
async addNewBlock( blockName, relativePosition ) {
- // Click add button.
- let identifier = 'Add block';
- if ( isAndroid() ) {
- identifier = 'Add block, Double tap to add a block';
- }
- const addButton = await this.driver.elementByAccessibilityId(
- identifier
+ const addBlockButtonLocator = isAndroid()
+ ? '//android.widget.Button[@content-desc="Add block, Double tap to add a block"]'
+ : '//XCUIElementTypeButton[@name="add-block-button"]';
+
+ const addButton = await waitForVisible(
+ this.driver,
+ addBlockButtonLocator
);
if ( relativePosition === 'before' ) {
await longPressMiddleOfElement( this.driver, addButton );
+ const addBlockBeforeButtonLocator = isAndroid()
+ ? '//android.widget.Button[@content-desc="Add Block Before"]'
+ : '//XCUIElementTypeButton[@name="Add Block Before"]';
- const addBlockBeforeButton = await this.driver.elementByAccessibilityId(
- 'Add Block Before'
+ const addBlockBeforeButton = await waitForVisible(
+ this.driver,
+ addBlockBeforeButtonLocator
);
-
await addBlockBeforeButton.click();
} else {
await addButton.click();
@@ -281,6 +284,7 @@ class EditorPage {
// Click on block of choice.
const blockButton = await this.findBlockButton( blockName );
+
if ( isAndroid() ) {
await blockButton.click();
} else {
@@ -299,6 +303,12 @@ class EditorPage {
// Attempts to find the given block button in the block inserter control.
async findBlockButton( blockName ) {
+ // Wait for the first block, Paragraph block, to load before looking for other blocks
+ const paragraphBlockLocator = isAndroid()
+ ? '//android.widget.Button[@content-desc="Paragraph block"]/android.widget.TextView'
+ : '//XCUIElementTypeButton[@name="Paragraph block"]';
+
+ await waitForVisible( this.driver, paragraphBlockLocator );
const blockAccessibilityLabel = `${ blockName } block`;
const blockAccessibilityLabelNewBlock = `${ blockAccessibilityLabel }, newly available`;
@@ -611,10 +621,16 @@ class EditorPage {
async closePicker() {
if ( isAndroid() ) {
+ // Wait for media block picker to load before closing
+ const locator =
+ '//android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup';
+ await waitForVisible( this.driver, locator );
+
await swipeDown( this.driver );
} else {
- const cancelButton = await this.driver.elementByAccessibilityId(
- 'Cancel'
+ const cancelButton = await waitForVisible(
+ this.driver,
+ '//XCUIElementTypeButton[@name="Cancel"]'
);
await cancelButton.click();
}