|
| 1 | +# Exercise 6: End-to-End Testing with Maestro |
| 2 | + |
| 3 | +## 📡 What you will learn |
| 4 | + |
| 5 | +- Set up end-to-end (E2E) tests for your React Native application. |
| 6 | +- Use Maestro to write and run automated E2E tests. |
| 7 | + |
| 8 | +## 👾 Before we start the exercise |
| 9 | + |
| 10 | +End-to-end (E2E) testing involves testing the complete functionality of an application from the user's perspective, ensuring all components work together as expected. |
| 11 | + |
| 12 | +Maestro is a powerful library for automating user interactions in your React Native app, allowing you to write and run E2E tests. |
| 13 | + |
| 14 | +- Check the [Maestro documentation](https://maestro.mobile.dev/getting-started/installing-maestro). |
| 15 | + |
| 16 | +## 👨🚀 Exercise 6 |
| 17 | + |
| 18 | +### Setting Up Maestro |
| 19 | + |
| 20 | +1. **Install Maestro**: |
| 21 | + Follow the [getting started guide](https://maestro.mobile.dev/getting-started/installing-maestro) to install Maestro on your laptop. |
| 22 | + |
| 23 | +### Writing Your First Test |
| 24 | + |
| 25 | +1. **Create a Tests Folder**: |
| 26 | + - [ ] At the root of your project, create a `tests` folder. |
| 27 | + |
| 28 | +2. **Create a Test File**: |
| 29 | + - [ ] Create a file named `process.yaml` in the `tests` folder. |
| 30 | + |
| 31 | +3. **Add Maestro Script**: |
| 32 | + - [ ] Add the following script to your `package.json`: |
| 33 | + |
| 34 | + ```json |
| 35 | + "scripts": { |
| 36 | + "maestro": "maestro test tests/process.yaml" |
| 37 | + } |
| 38 | + |
| 39 | +4. **Write Your Test**: |
| 40 | + - [ ] Write a test in the `process.yaml` file. |
| 41 | + |
| 42 | + You should have something like this: |
| 43 | + |
| 44 | +```yaml |
| 45 | +appId: host.exp.Exponent |
| 46 | +--- |
| 47 | + |
| 48 | +- launchApp |
| 49 | +- tapOn: "Email" |
| 50 | + |
| 51 | +- tapOn: "Password" |
| 52 | +- inputText: "123456" |
| 53 | +- tapOn: "Login" |
| 54 | +- waitFor: "Welcome" |
| 55 | +- tapOn: "Buy this ship" |
| 56 | +- tapOn: "Confirm" |
| 57 | +``` |
| 58 | + |
| 59 | +### Running Your Test |
| 60 | + |
| 61 | +1. **Run Your Test**: |
| 62 | + - [ ] Run your test by lanching your project on a simulator and executing the following command: |
| 63 | + |
| 64 | + ```console |
| 65 | + npm run maestro |
| 66 | + ``` |
| 67 | + |
| 68 | +2. **Check the Results**: |
| 69 | + You should see the test running on your simulator. |
| 70 | + |
| 71 | +### 👽 Bonus |
| 72 | + |
| 73 | +- [ ] Write more tests for your application. |
| 74 | +- [ ] Explore Maestro's documentation to learn more about its capabilities. |
| 75 | +- [ ] Write a more complex test that involves testIDs. |
0 commit comments