Skip to content

Commit

Permalink
[Mobile] Appium 2 Migration (#55166)
Browse files Browse the repository at this point in the history
* Dependencies update:
- Bumps Appium to version 2.0.0
- Removes wd in favor of WebdriverIO

* - Adds appium:setup script to install needed drivers for Appium.
- Updates test:e2e:build-wda with the new Appium home path for the xcuitest driver.
- Updates test:e2e:android:local and test:e2e:ios:local to add the newly added appium:setup script to install drivers if needed.

* Update Android Runner to cache the Appium drivers

* Update iOS Runner - Bump Xcode to 14.2

* Update iOS Runner with these changes:

- Move the Launch of the simulator step to the top so it starts booting up the simulator in the background, so it doesn't block the next steps while it's stating.
- Install and cache the Appium drivers.

* Updates the E2E capabilities settings:

- It removes unneeded values after the migration.
- Bumps the iOS platform version to 16.2.
- Adds specific SauceLabs configuration that sets the Appium version to 2.0.0.
- Adds a prefixKeysWithAppium util to append the "appium:" prefix for the Appium capabilities settings. This is added to simplify the modifications we do for some of the settings in runtime.

* Updates the E2E serverConfigs file with the updated SauceLabs settings for Appium 2 and WebdriverIO

* E2E Utils:

- Remove import of wd and set it as null temporarily while we migrate its usage to WebdriverIO

* E2E Utils:

Update getIOSPlatformVersions to get the desired platform version from the capabilities settings instead of an inline value

* E2E Utils:

- Update Remote configuration with the new structure for WebdriverIO and Appium 2
- Uses the prefixKeysWithAppium util for the Appium capabilities, we cannot use "appium:options" since that's only available for real devices and we use simulators instead.
- The app capability value was updated to the new storage:filename= prefix this was important to make SauceLabs to work correctly

* E2E Utils - Update the stopDriver function with:

- Changes sessionID to sessionId
- Removes the hash value to append in the Job URL, these URLs are public so it's not needed to append the auth param.
- Updates driver.quit() to driver.deleteSession()

* E2E Utils - Updates swipeFromTo to WebdriverIO

* E2E Utils - Updates isEditorVisible to WebdriverIO

It adds a custom timeout to waitForDisplayed, the simulators in CI are slow so we need to give enough time to find the post title locator.

* Remove usage of sauceJobStatus, WebdriverIO internally handles this

* EditorPage - Remove import of wd and keep a null value while we migrate to WebdriverIO

* EditorPage - Migrate initializeEditor to WebdriverIO

* Gutenberg Editor Rendering Media Blocks test - Migrate to WebdriverIO

* E2E Utils - Revert removing passing the auth token for the jobURL, it also updates the logic to the latest implementation from SauceLabs docs.

* Remove idleTimeout desktop-only SauceLabs option

* [Mobile] - Update E2E Block Insertion tests (#55167)

* E2E Utils, updates the typing helpers:

- Removes the platform specfic typing functionality in favor of WebdriverIO's addValue

* E2E Utils - Updates getKeycode and pressKeycode to WebdriverIO

* E2E Utils - Update tapStatusBariOS to WebdriverIO

* E2E Utils - Update toggleHtmlMode to WebdriverIO

* E2E Utils - Update waitForVisible to WebdriverIO

* E2E Editor Page - Update getBlockAtPosition to WebdriverIO

* E2E Editor Page - Update getTitleElement to WebdriverIO

* E2E Editor Page - Update getHtmlContent to WebdriverIO

* E2E Editor Page - Update swipeToolbarToElement to WebdriverIO

* E2E Editor Page - Update addNewBlock to WebdriverIO

* E2E Editor Page - Update findBlockButton to WebdriverIO

* E2E Editor Page - Update assertSlashInserterPresent to WebdriverIO

* E2E EditorPage - Update waitForElementToBeDisplayedById to WebdriverIO

* E2E Test - Block Insertion - Update to WebdriverIO

* Update typeString scroll delay comment

Co-authored-by: David Calhoun <github@davidcalhoun.me>

---------

Co-authored-by: David Calhoun <github@davidcalhoun.me>

* test: Update Search tests for Appium 2 (#55170)

* test: Update getSearchBlockTextElement query

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Update waitForElementToBeDisplayedByXPath query

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Update verifySearchElementText query

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Update getSearchBlockTextElement query

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* E2E Editor Page - Update dismissKeyboard to use WebdiverIO's hideKeyboard (#55211)

* test: Update Media Blocks tests for Appium 2 (#55222)

* test: Replace sleep with pause utility

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Replace elementsByAccessibilityId usage

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Replace elementByXPath usage

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Repair enterCaptionToSelectedImageBlock utility

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

Additionally, the `clearValue` method did not succeed on the caption
Button element. Hence, the utility was expanded to instead type into the
TextView.

* test: Update Paragraph tests for Appium 2 (#55215)

* test: Update clickMiddleOfElement helper

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Update clickBeginningOfElement helper

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Update getTextForParagraphBlockAtPosition helper

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Replace elementsByXPath usage

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* E2E Utils - Migrate dragAndDropAfterElement to WebdriverIO (#55254)

* [Mobile] - Move Appium drivers setup to bash script (#55257)

* Move Appium drivers setup to bash script

* Update drivers' names casing for consistency

* Rename appium:setup to test:e2e:setup

* test: Update E2E utilities (#55322)

* test: Set static device pixel ratio

WebdriverIO (the replacement for the deprecated WD driver library) does
not have a method for retrieving a device's pixel ratio. Therefore, this
sets an explicit value for each of our test devices.

* test: Update the `getAddBlockButton` utility

Update syntax for WebdriverIO, which is a part of the Appium 2 upgrade.

* test: Update toggleDarkMode utility

Seems this method has changed or been removed for Android.

* test: Increase robustness of waitForKeyboardToBeHidden utility

This utility appeared to fail occasionally due to an empty `addButton`
value.

* test: toggleDarkMode uses consistent approach across platforms

This updates the iOS variant to mirror the structure of the Android
variant in the name of consistency.

* refactor: Rename devicePixelRatio to pixelRatio

Mirror Android implementation found in Appium 2.

* test: Increase logging levels

Attempt to debug CI failures.

```
FAIL __device-tests__/gutenberg-editor-rendering-media-blocks.test.js (73.496 s)
  ● Gutenberg Editor Rendering Media Blocks test › should be able to render blocks correctly

    unknown method: Not implemented

      at getErrorFromResponseBody (file:/Users/runner/work/gutenberg/gutenberg/node_modules/webdriver/build/utils.js:194:12)
      at NodeJSRequest._request (file:/Users/runner/work/gutenberg/gutenberg/node_modules/webdriver/build/request/index.js:164:23)
      at Browser.wrapCommandFn (file:/Users/runner/work/gutenberg/gutenberg/node_modules/@wdio/utils/build/shim.js:81:29)
```

* refactor: Prefer `action` to `touchAction`

Avoid the deprecated `touchAction` command.

> The `touchAction` command is deprecated and will be removed in a future version. We recommend to use the action command instead with pointer type touch, e.g.:
>
> await browser.action('pointer', {
>   parameters: { pointerType: 'touch' }
> })

https://webdriver.io/docs/api/element/touchAction/

This may also relate to the fact that Mobile JSON Wire Protocol is
deprecated as well.

> Mobile JSON Wire Protocol
>
> The Mobile JSON Wire Protocol is a super set of mobile commands on top of the JSON Wire Protocol. Given this one is deprecated the Mobile JSON Wire Protocol also got deprecated. Appium might still support some of its commands but it is not recommended to use them.

https://webdriver.io/docs/api/protocols#mobile-json-wire-protocol

* Revert "test: Increase logging levels"

This reverts commit 7bb46de.

* test: Set default `swipeFromTo` delay value

This prevents `pause` from being called without a parameter, which
throws an error.

* test: Replace swipe gesture with simple tap (#55427)

It was unclear as to why the swipe gesture failed to close the bottom
sheet, but a simple tap towards the middle-top of the display achieves
the same result.

* [Mobile] - Appium 2 Migration - Updating more utils (#55420)

* Updates the longPressMiddleOfElement util by using WebdriverIO's action. It adds tapping on the element first before long-pressing due to an issue with iOS not triggering the long-press event. The default waitTime was reduced as well to 1000.

* Update selectTextFromElement to WebdriverIO. It also changes the logic for iOS where it uses the "Select All" option from the context menu instead of using "doubleTap". Timeouts have been reduced as well.

* Refactors selectTextFromElement for Android, the previous implementation would only select the word that was located in the middle of the element, with the new changes it will select all text by long-pressing from the start of the element to the end. Unfortunately we can't access the context menu as we do on iOS so it has to be done manually.

* Add inline duration value and adds inline comments to explain the functionality

* [Mobile] - Update closePicker util and updates Image Block test data (#55484)

* Update closePicker util name to closeMediaPicker, it also unifies the logic for both platforms by having the same locator and using WebdriverIO's waitForDisplayed.

* Update test data for the image block, by changing the image caption to avoid issues in CI and autocorrect

* [Mobile] Improve Screen recording on Android for Appium 2 (#55443)

* Improve Screenrecording on Android by making sure of the following:

The sdcard folder should exist in the emulator, if not there's a script that will create it.

For skipped tests, it will remove empty folders that weren't needed.

When having multiple Android emulators opened, it will use the deviceID that Appium is currently using.

* Rename getAndroidDeviceID function to getDeviceID since it's not platform specific

* Fix comment

* Temp: log session

* Use adb devices list to get the first active android emulator

* Moves getAndroidEmulatorID to its own file and replaces its usage. It also adds specifying the device ID for Android local builds for cases when multiple devices/emulators are connected.

* Remove unneeded filtering

* Move setting the androidDeviceID value for Android cases only

* docs: Update E2E test documentation (#55519)

* docs: Rewrite end-to-end testing documentation

Update for breaking changes from upgrading Appium 2. Reduce verbosity
and duplication to improve the approachability and maintainability of
the documentation.

* docs: Remove E2E test contributing documentation

This was replaced by a section in the directory's README documentation.

* docs: Rewrite end-to-end testing Getting Started section

Update for breaking changes from upgrading Appium 2. Reduce verbosity
and duplication between the `WordPress/gutenberg` repository to improve
the approachability and maintainability of the documentation.

* docs: Update links in Gutenberg for Mobile Apps code documentation

Documents have been updated and consolidated to reduce verbosity
and duplication to improve the approachability and maintainability of
the documentation.

* [Mobile] Remove `wd` usage and removes disabled tests (#55541)

* Device tests - Removes skipped tests that haven't been enabled back for a while. These were disabled due to flakiness most likely to the interactions with the context menu to copy/paste text. If needed this can be restored once the flakiness issues are worked on.

* Device Tests - Drag & Drop: removes disabled tests. These used utils that were flaky and have been disabled for a long time, they can be added back once stable utils are in place for pasting content.

* Editor Page - Removes setHtmlContent since this util is not being used anymore. It can be added back if its needed.

* Device Tests Utils - Removes usage of the wd library. It also removes, doubleTap, clickElementOutsideOfTextInput, and related utils to the context menu due to them being flaky and not currenlty in use: tapSelectAllAboveElement, tapCopyAboveElement and tapPasteAboveElement.

* test: Improve E2E test consistency (#55554)

* test: Mitigate conflicts between development server caches

Occasionally, cryptic npm package dependency errors can occur between
test runs. They appear to originate from stale development caches, e.g.
Metro server. Clearing these caches, which E2E tests should not rely
upon mitigates the likelihood of these errors.

* test: Prefix informative E2E test setup logs

Merely an attempt to add structure to the outputted logs.

* test: Avoid setup scripts during test runs

There may be clarity and efficiency by having an explicit setup script.
It was avoid running unnecessary scripts during test runs. It is also
referenced in the current documentation as a script to run
intentionally.

* build: Ignore generated Android files (#55569)

These assets are generated at build time for E2E testing. Seemingly, we
do not leverage these generated files for the binary/bundle that we
provide to the host apps. Therefore, we can safely ignore these files.

* docs: Avoid GMA project name until it is approved

Use of the "Gutenberg for Mobile Apps" name is still under review. In
the meantime, we should use the existing "Mobile Gutenberg" project
name.

---------

Co-authored-by: David Calhoun <github@davidcalhoun.me>
  • Loading branch information
Gerardo Pacheco and dcalhoun authored Oct 24, 2023
1 parent 187224a commit ae7df52
Show file tree
Hide file tree
Showing 26 changed files with 26,867 additions and 31,185 deletions.
10 changes: 10 additions & 0 deletions .github/workflows/rnmobile-android-runner.yml
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,16 @@ jobs:
- name: Setup Node.js and install dependencies
uses: ./.github/setup-node

- name: Restore tests setup cache
uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
with:
path: |
~/.appium
key: ${{ runner.os }}-tests-setup-${{ hashFiles('package-lock.json') }}

- name: Prepare tests setup
run: npm run native test:e2e:setup

- name: Gradle cache
uses: gradle/gradle-build-action@b5126f31dbc19dd434c3269bf8c28c315e121da2 # v2.8.1

Expand Down
24 changes: 17 additions & 7 deletions .github/workflows/rnmobile-ios-runner.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ jobs:
if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
strategy:
matrix:
xcode: ['13.3.1']
xcode: ['14.2']
device: ['iPhone 13']
native-test-name: [gutenberg-editor-rendering]

Expand All @@ -27,9 +27,25 @@ jobs:
with:
show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}

- name: Switch Xcode version to ${{ matrix.xcode }}
run: sudo xcode-select --switch /Applications/Xcode_${{ matrix.xcode }}.app

- name: Launch simulator
run: (open -a Simulator && xcrun simctl boot '${{ matrix.device }}') &

- name: Setup Node.js and install dependencies
uses: ./.github/setup-node

- name: Restore tests setup cache
uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
with:
path: |
~/.appium
key: ${{ runner.os }}-tests-setup-${{ hashFiles('package-lock.json') }}

- name: Prepare tests setup
run: npm run native test:e2e:setup

- name: Prepare build cache key
run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt

Expand All @@ -54,18 +70,12 @@ jobs:
- name: Bundle iOS
run: npm run native test:e2e:bundle:ios

- name: Switch Xcode version to ${{ matrix.xcode }}
run: sudo xcode-select --switch /Applications/Xcode_${{ matrix.xcode }}.app

- name: Build (if needed)
run: test -e packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/GutenbergDemo || npm run native test:e2e:build-app:ios

- name: Build Web Driver Agent (if needed)
run: test -d packages/react-native-editor/ios/build/WDA || npm run native test:e2e:build-wda

- name: Launch simulator
run: open -a Simulator && xcrun simctl boot '${{ matrix.device }}'

- name: Run iOS Device Tests
run: TEST_RN_PLATFORM=ios npm run native device-tests:local ${{ matrix.native-test-name }}

Expand Down
6 changes: 3 additions & 3 deletions docs/contributors/code/react-native/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ Also, the mobile client is packaged and released via the [official WordPress app

If you encounter a failed Android/iOS test on your pull request, we recommend the following steps:

1. Re-running the failed GitHub Action job ([guide for how to re-run](https://docs.github.com/en/actions/configuring-and-managing-workflows/managing-a-workflow-run#viewing-your-workflow-history)) - This should fix failed tests the majority of the time. Cases where you need to re-run tests for a pass should go down in the near future as flakiness in tests is actively being worked on. See the following GitHub issue for updated info on known failures: https://github.com/WordPress/gutenberg/issues/23949
2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the [mobile getting started guide](/docs/contributors/code/react-native/getting-started-react-native.md#ui-tests), with even more relevant info in the [relevant directory README.md](https://github.com/WordPress/gutenberg/tree/HEAD/packages/react-native-editor/__device-tests__#running-the-tests-locally)
1. Re-running the failed GitHub Action job ([guide for how to re-run](https://docs.github.com/en/actions/configuring-and-managing-workflows/managing-a-workflow-run#viewing-your-workflow-history)) - This should fix failed tests the majority of the time.
2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the [E2E testing documentation](/packages/react-native-editor/__device-tests__/README.md).
3. In addition to reading the logs from the E2E test, you can download a video recording from the Artifacts section of the GitHub job that may have additional useful information.
4. Check if any changes in your PR would require corresponding changes to `.native.js` versions of files.
5. Lastly, if you're stuck on a failing mobile test, feel free to reach out to contributors on Slack in the #mobile or #core-editor chats in the WordPress Core Slack, [free to join](https://make.wordpress.org/chat/).
Expand All @@ -32,4 +32,4 @@ Follow the instructions in [Native mobile testing](/docs/contributors/code/react

## Internationalization (i18n)

Further information about this topic can be found in the [React Native Internationalization Guide](/docs/contributors/code/react-native/internationalization-guide.md).
Further information about this topic can be found in the [React Native Internationalization Guide](/docs/contributors/code/react-native/internationalization-guide.md).
Original file line number Diff line number Diff line change
Expand Up @@ -141,34 +141,8 @@ Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "R

This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/src/test/api-fetch-setup.test.js). The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).

## UI Tests
## End-to-End Tests

This repository uses Appium to run UI tests. The tests live in `__device-tests__` and are written using Appium to run tests against simulators and real devices. To run these you'll need to check off a few things:
In addition to unit tests, the Mobile Gutenberg (MG) project relies upon end-to-end (E2E) tests to automate testing critical flows in an environment similar to that of an end user. We generally prefer unit tests due to their speed and ease of maintenance. However, assertions that require OS-level features (e.g. complex gestures, text selection) or visual regression testing (e.g. dark mode, contrast levels) we use E2E tests.

- When running the tests, you'll need to ensure the Metro bundler (`npm run native start`) is not running.
- [Appium CLI](https://github.com/appium/appium/blob/1.x/docs/en/about-appium/getting-started.md) installed and available globally. We also recommend using [appium-doctor](https://github.com/appium/appium-doctor) to ensure all of Appium's dependencies are good to go. You don't have to worry about starting the server yourself, the tests handle starting the server on port 4723, just be sure that the port is free or feel free to change the port number in the test file.
- For iOS a simulator should automatically launch but for Android you'll need to have an emulator _with at least platform version 8.0_ fired up and running.

Then, to run the UI tests on iOS:

```sh
npm run native test:e2e:ios:local
```

and for Android:

```sh
npm run native test:e2e:android:local
```

To run a single test instead of the entire suite, use `npm run native device-tests:local`. Here's an example that runs only `gutenberg-editor-paragraph.test.js`:

```sh
npm run native test:e2e:android:local gutenberg-editor-paragraph.test.js
```

Note: You might experience problems that seem to be related to the tests starting the Appium server, e.g. errors that say `Connection Refused`, `Connection Reset` or `The requested environment is not available`. If so, you can manually start the Appium server via `npm run native appium:start`, and (optionally) comment out related code in the `beforeAll` and `afterAll` block.

For a more detailed outline of the UI tests and how to get started writing one, please visit the [UI Test documentation](/packages/react-native-editor/__device-tests__/README.md) and our [contributing guide](/packages/react-native-editor/__device-tests__/CONTRIBUTING.md).

You might want to use Visual Studio Code as an editor. The project includes the configuration needed to use the above codestyle and linting tools automatically.
The E2E tests are found in the [`packages/react-native-editor/__device-tests__`](/packages/react-native-editor/__device-tests__) directory. Additional documentation on running and contributing to these tests can be found in the [tests directory](/packages/react-native-editor/__device-tests__#readme).
Loading

0 comments on commit ae7df52

Please sign in to comment.