test: add maestro tests with playwright adapter (react-navigation#12077)

This adds some basic Maestro tests. Note that most tests are not testing much, but once we have basic setup, we can update them as we go.

Currently need to be run locally as I haven't been successful with CI setup for Android yet.

This also adds custom logic that runs the Maestro tests to run with Playwright for Web, so we can reuse the same tests. We'll need to update the logic as we add more tests.

.github/workflows/ci.yml

@@ -50,7 +50,7 @@ jobs:
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3
 
-  integration-test:
+  e2e-test:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -78,8 +78,8 @@ jobs:
       - name: Build example for web
         run: yarn example expo export --platform web
 
-      - name: Run integration tests
-        run: yarn example test
+      - name: Run e2e tests
+        run: yarn example e2e:web
 
   build:
     runs-on: ubuntu-latest

CONTRIBUTING.md

@@ -54,7 +54,7 @@ npx playwright install
 Run the e2e tests by:
 
 ```sh
-yarn example test --ui
+yarn example e2e:web --ui
 ```
 
 By default, this will use the local dev server for the app. If you want to test a production build, first build the [example app](/example/) for web:
@@ -66,7 +66,19 @@ yarn example expo export --platform web
 Then run the tests with the `CI` environment variable:
 
 ```sh
-CI=1 yarn example test
+CI=1 yarn example e2e:web
+```
+
+Before running Maestro tests:
+
+- Install it following the instructions [here](https://maestro.mobile.dev/getting-started/installing-maestro).
+- Start the Emulator or Simulator and install the Expo Go app.
+- Start the Metro server with `yarn example start`.
+
+Then run the Maestro tests by:
+
+```sh
+yarn example e2e:native
 ```
 
 ### Commit message convention
@@ -77,7 +89,7 @@ We follow the [conventional commits specification](https://www.conventionalcommi
 - `feat`: new features, e.g. add new method to the module.
 - `refactor`: code refactor, e.g. migrate from class components to hooks.
 - `docs`: changes to documentation, e.g. add usage example for the module.
-- `test`: adding or updating tests, eg add integration tests using detox.
+- `test`: adding or updating tests, eg add e2e tests using maestro.
 - `chore`: tooling changes, e.g. change CI config.
 
 Our pre-commit hooks verify that your commit message matches this format when committing.

example/e2e/maestro/auth-flow.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Auth Flow
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/auth-flow
+- assertVisible:
+    text: 'Sign in'

example/e2e/maestro/bottom-tabs.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Bottom Tabs
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/bottom-tabs
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/drawer-view.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Drawer View
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/drawer-view
+- assertVisible:
+    text: 'Drawer Layout'

example/e2e/maestro/dynamic-tabs.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Dynamic Tabs
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/dynamic-tabs
+- assertVisible:
+    text: 'Tab 0'

example/e2e/maestro/link-component.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Link Component
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/link-component
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/linking-screen.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Linking Screen
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/linking-screen
+- assertVisible:
+    text: 'Sign in'

example/e2e/maestro/master-detail.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Master Detail
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/master-detail
+- assertVisible:
+    text: 'Pages'

example/e2e/maestro/material-top-tabs.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Material Top Tabs
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/material-top-tabs-screen
+- assertVisible:
+    text: 'Material Top Tabs'

example/e2e/maestro/mixed-header-mode.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Mixed Header Mode
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/mixed-header-mode
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/mixed-native-stack.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Mixed Native Stack
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/mixed-native-stack
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/mixed-stack.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Mixed Stack
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/mixed-stack
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/modal-stack.yml

@@ -0,0 +1,27 @@
+appId: ${APP_ID}
+name: Modal Stack
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/modal-stack
+- assertVisible:
+    text: 'Article by Gandalf'
+- tapOn:
+    text: 'Push albums'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'
+- tapOn:
+    text: 'Push article'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Article by Babel fish'
+- tapOn:
+    text: 'Go back'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'
+- tapOn:
+    text: 'Go back'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/native-stack-header-customization.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Native Stack Header Customization
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/native-stack-header-customization
+- assertVisible:
+    text: 'What is Lorem Ipsum?'

example/e2e/maestro/native-stack-prevent-remove.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Native Stack Prevent Remove
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/native-stack-prevent-remove
+- assertVisible:
+    text: 'Input'

example/e2e/maestro/native-stack.yml

@@ -0,0 +1,42 @@
+appId: ${APP_ID}
+name: Native Stack
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/native-stack
+- assertVisible:
+    text: 'Article by Gandalf'
+- tapOn:
+    text: 'Push feed'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Feed'
+- tapOn:
+    text: 'Push albums'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'
+- tapOn:
+    text: 'Navigate to article'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Article by Babel fish'
+- tapOn:
+    text: 'Replace with feed'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Feed'
+- tapOn:
+    text: 'Go back'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'
+- tapOn:
+    text: 'Pop by 2'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Article by Gandalf'
+- tapOn:
+    text: 'Pop to albums'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'

example/e2e/maestro/navigator-layout.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Navigator Layout
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/navigator-layout
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/screen-layout.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Screen Layout
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/screen-layout
+- assertVisible:
+    text: 'Suspense & ErrorBoundary'

example/e2e/maestro/simple-stack.yml

@@ -0,0 +1,37 @@
+appId: ${APP_ID}
+name: Simple Stack
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/simple-stack
+- assertVisible:
+    text: 'Article by Gandalf'
+- tapOn:
+    text: 'Update params'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Article by Babel fish'
+- tapOn:
+    text: 'Replace with feed'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Feed'
+- tapOn:
+    text: 'Navigate to albums'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'
+- tapOn:
+    text: 'Push article'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Article by Babel fish'
+- tapOn:
+    text: 'Pop to albums'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Albums'
+- tapOn:
+    text: 'Pop by 2'
+    retryTapIfNoChange: false
+- assertVisible:
+    text: 'Feed'

example/e2e/maestro/stack-header-customization.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Stack Header Customization
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/stack-header-customization
+- assertVisible:
+    text: 'Article by Gandalf'

example/e2e/maestro/stack-preload-flow.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Stack Preload Flow
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/stack-preload-flow
+- assertVisible:
+    text: 'Home'

example/e2e/maestro/stack-prevent-remove.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Stack Prevent Remove
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/stack-prevent-remove
+- assertVisible:
+    text: 'Input'

example/e2e/maestro/stack-transparent.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Stack Transparent
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/stack-transparent
+- assertVisible:
+    text: 'Article'

example/e2e/maestro/static-screen.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Static Screen
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/static-screen
+- assertVisible:
+    text: 'Albums'

example/e2e/maestro/tab-preload-flow.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Tab Preload Flow
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/tab-preload-flow
+- assertVisible:
+    text: 'Home'

example/e2e/maestro/tab-view.yml

@@ -0,0 +1,7 @@
+appId: ${APP_ID}
+name: Tab View
+---
+- openLink:
+    link: exp://127.0.0.1:8081/--/tab-view
+- assertVisible:
+    text: 'TabView Examples'

example/e2e/tests/Link.test.ts

@@ -26,7 +26,7 @@ test('goes to the album screen and goes back', async ({ page }) => {
   await page.waitForURL('**/link-component/article/gandalf');
 
   const link = page.getByRole('link', {
-    name: 'Go to Albums',
+    name: 'Go to albums',
   });
 
   await expect(link).toHaveAttribute('href', '/link-component/albums');
@@ -58,7 +58,7 @@ test('replaces article with the album screen', async ({ page }) => {
   await page.waitForURL('**/link-component/article/gandalf');
 
   const link = page.getByRole('link', {
-    name: 'Replace with Albums',
+    name: 'Replace with albums',
   });
 
   await expect(link).toHaveAttribute('href', '/link-component/albums');
@@ -102,7 +102,7 @@ test('preserves hash for navigation', async ({ page }) => {
     'Article by Babel fish - React Navigation Example'
   );
 
-  await page.getByRole('link', { name: 'Replace with Albums' }).click();
+  await page.getByRole('link', { name: 'Replace with albums' }).click();
 
   await page.waitForURL('**/link-component/albums');
 });