appium真机测试app_使用Expo＆Appium测试您的React Native App

appium真机测试app

At the start of July I decided to bite the bullet and take a run at building my own app. I had built a number of React Native apps for others but this was going to be all mine and so far it’s been an incredibly rewarding experience.

7月初，我决定硬着头皮，尝试构建自己的应用程序。 我为其他人构建了许多React Native应用程序，但这将是我的全部，到目前为止，这是一次令人难以置信的收获。

I started the project by doing some user research and then used that to build a series of mockups in Figma to carry out usability testing on the solution I felt delivered the most value to the user.

我通过进行一些用户研究来开始该项目，然后将其用作Figma中的模型 实体，以对我认为为用户带来最大价值的解决方案进行可用性测试 。

After I was happy that the app was usable and valuable I started turning those designs into React components using Storybook and Expo. This allowed me to quickly turn around the components, but there was one aspect missing.

在我对应用程序的实用性和价值感到高兴之后，我开始使用Storybook和Expo将这些设计转变为React组件。 这使我可以快速解决这些组件，但是缺少一个方面。

I wanted to be able to test the components on multiple levels during development. Unit tests can only do so much and can’t tell you if everything works on different devices, so I started looking at UI automation.

我希望能够在开发过程中在多个级别上测试组件。 单元测试只能做很多事情，并且不能告诉您一切是否可以在不同的设备上运行，因此我开始研究UI自动化。

I initially started looking at Detox as it allows you to get closer to the React Native runtime and this means you can check more of the inner workings of the app as opposed to a fully black-box solution.

我最初开始研究Detox，因为它可以让您更接近React Native运行时，这意味着您可以检查应用程序的更多内部工作原理，而不是使用完全黑盒解决方案。

Unfortunately Detox does not play well with Expo and even when I built a brand new React Native app from scratch I could never really get it to work so I retired that idea relatively quickly.

不幸的是，Detox在Expo上不能很好地发挥作用，即使我从头开始构建了一个全新的React Native应用程序，我也无法真正使它起作用，所以我很快就淘汰了这个想法。

The next tool I looked at was Appium which doesn’t state that it works with Expo. There are ways of making it play nice enough with the Expo Client to allow you to run your automation without the need to build the standalone binary.

我查看的下一个工具是Appium，它没有声明它可以与Expo一起使用。 有多种方法可以使其与Expo Client配合使用，从而无需构建独立的二进制文件即可运行自动化程序。

I’ll be covering how to run Appium against both the Expo Client and a standalone app as the only difference is the capabilities and the way to setup the client before running your tests.

我将介绍如何针对Expo Client和独立应用程序运行Appium，因为唯一的区别是运行测试之前设置客户端的功能和方式。

设置Appium (Setting Up Appium)

Compared to Detox, setting up Appium can feel a little daunting but the appium-doctor tool is a massive time saver as it’ll tell you if your environment is configured correctly.

与Detox相比，设置Appium可能会有些令人生畏，但是appium-doctor工具可以节省大量时间，因为它会告诉您环境是否配置正确。

I’m not going to cover how to install all the dependencies as that would be an article itself, but there are a number of blog posts kicking around the internet that help with this.

我不会介绍如何安装所有依赖项，因为这本身就是一篇文章，但是互联网上有许多博客文章对此提供了帮助。

The main things you’ll want to focus on are getting Appium Desktop and either the Android emulator or iOS simulator running (I found the Android setup easier on both Linux and Mac so I’d advise starting there).

您需要重点关注的主要事情是让Appium Desktop以及运行Android模拟器或iOS模拟器(我发现Linux和Mac上的Android设置都更容易，因此建议从那里开始)。

Once you have Appium Desktop working with the emulator you can use the emulator to run the Expo Client & load your app at which point you can use Appium Desktop’s Session interface (use the capabilities below) to connect to the emulator and start seeing the structure of your app’s UI.

使Appium Desktop与仿真器一起使用后，您可以使用仿真器运行Expo Client并加载您的应用，此时您可以使用Appium Desktop的Session界面(使用下面的功能)连接到仿真器并开始查看其结构。您应用的用户界面。

{
  "platformName": "android",
  "deviceName": "[NAME OF YOUR EMULATOR]"
}

使用Appium自动化Expo Client (Automating the Expo Client with Appium)

There’s not much information on the internet about using Appium with the Expo Client but after you learn the ‘secret trick’ it’s actually pretty easy to get it working on different platforms.

互联网上没有太多关于将Appium与Expo Client一起使用的信息，但是在您学习了“秘密技巧”之后，实际上很容易就可以在不同平台上使用它。

When you launch the Expo Client you may notice that the Expo apps have a exp:// link and this link is what we’ll use to launch the app under test in the Expo Client.

当启动Expo Client时，您可能会注意到Expo应用程序具有一个exp://链接，而该链接正是我们用来在Expo Client中启动被测应用程序的链接。

There’s no easy cross-platform way to do this though as iOS requires a more convoluted approach than Android but if you abstract the logic out into functions you can build re-usable commands to handle all this.

尽管iOS需要比Android更复杂的方法，但是没有简单的跨平台方法可以做到这一点，但是如果将逻辑抽象到函数中，则可以构建可重用的命令来处理所有这些问题。

The execution flow for launching the app in the Expo Client on Android looks like this:

在Android的Expo Client中启动应用程序的执行流程如下：

1. Launch the Expo Client app
   启动Expo Client应用程序
2. Close the Expo Client app
   关闭Expo Client应用程序
3. Launch the Expo Client app again
   再次启动Expo Client应用程序

4. Execute a mobile:deeplink to exp://127.0.0.1:19000 (or applicable hostname)

   执行到exp://127.0.0.1:19000的mobile:deeplink (或适用的主机名)

5. Wait for an element on the first page of the app to be visible
   等待应用首页上的元素可见

Technically steps 2 and 3 could be replaced with sending the keycode 82 as that should trigger a Expo Client reload which is needed to ensure that the state of the app is reset.

从技术上讲，第2步和第3步可以替换为发送密钥代码82，因为这将触发Expo Client重新加载，这是确保重置应用程序状态所必需的。

For iOS there’s a bit more complexity:

对于iOS，会有更多的复杂性：

1. Launch Safari
   启动Safari

2. Enter exp://127.0.0.1:19000 (or applicable hostname) into the Safari address bar

   在Safari地址栏中输入exp://127.0.0.1:19000 (或适用的主机名)

3. Accept the loading of the Expo Client (through automation or using the autoAcceptAlerts capability)

   接受Expo Client的加载(通过自动化或使用autoAcceptAlerts功能)

4. Deal with the first run pop up if needed (press the ‘Got It’ button followed by the close button for the dev menu)
   如果需要，处理第一次运行的弹出窗口(按“获取”按钮，然后按开发菜单的关闭按钮)

5. Reload the Expo Client by sending a shake() command and pressing the ‘Reload’ button in the dev menu

   通过发送shake()命令并在开发菜单中按下“重新加载”按钮来重新加载Expo Client

6. Wait for an element on the first page of the app to be visible
   等待应用首页上的元素可见

iOS is made even more awkward thanks to how Apple seem to change the behaviour of the Safari URL input between versions of iOS, for instance on iOS 13.3 the URL bar is a button that needs to be pressed before you can input anything but on iOS 13.6 it’s an auto-focused text field.

由于苹果似乎改变了iOS版本之间的Safari URL输入的行为，因此iOS变得更加尴尬，例如，在iOS 13.3上，除了在iOS 13.6上可以输入任何内容之前，必须先按下URL栏按钮这是一个自动聚焦的文本字段。

Once you’ve got the app under test loaded in the Expo Client and the Expo Client reloaded so the app state is reset then you can start the actual automation of your app.

将要测试的应用程序加载到Expo Client中并重新加载Expo Client以便重置应用程序状态后，您就可以启动应用程序的实际自动化了。

Here’s the capabilities and functions I’m using for Android

这是我用于Android的功能

Calling launchExpoAndroid before the test gets the Android Emulator to load the Expo Client and makes it ready for automating

在测试使Android模拟器加载Expo Client并使其准备就绪以进行自动化之前，请调用launchExpoAndroid

And the capabilities and functions I’m using for iOS

以及我用于iOS的功能

iOS requires a little more work to get things ready but if you create functions for dealing with the differences in Safari’s behaviour across iOS versions it makes things a little easier to understand

iOS需要做更多的工作才能使事情做好准备，但是如果您创建用于处理Safari在iOS不同版本中行为差异的功能，则事情会更容易理解

自动化Expo生成的独立二进制文件 (Automating a standalone binary generated by Expo)

Luckily a standalone binary is a lot easier to get up and running as you can just use the capabilities to install the app and run it or have it boot an existing installation.

幸运的是，独立二进制文件的安装和运行非常容易，因为您可以使用功能来安装应用程序并运行它，或者让它启动现有安装。

I’ve found the latter to be more reliable, at least on Android where I use adb install [PATH TO APK] to install the .apk on the emulator before running Appium with the following capabilities.

我发现后者更可靠，至少在Android上，我在运行具有以下功能的Appium之前使用adb install [PATH TO APK]在模拟器上安装.apk。

Without the need to get the Expo Client to load the app things are a little simpler

无需让Expo Client加载应用程序，事情就简单了一点

自动化Storybook React Native UI (Automating the Storybook React Native UI)

As I mentioned at the start of the article my use case for Expo at the moment is to build my component library up for the app I’ll be eventually building.

正如我在文章开头提到的那样，我目前用于Expo的用例是为最终将要构建的应用程序构建组件库。

The are a few reasons I chose to automate the component library and not just use the automation in the main app.

我选择自动化组件库的一些原因，而不仅仅是在主应用程序中使用自动化。

• I’m building the automation using the Atomic Design pattern so it makes sense to have my ‘atom’, ‘molecule’ and ‘organism’ page objects in the same code base as the ‘atom’, ‘molecule’ and ‘organism’ level components that make up my app’s UI
  我正在使用“原子设计”模式构建自动化，因此将“原子”，“分子”和“有机”页面对象与“原子”，“分子”和“有机”级别使用相同的代码库是有意义的组成我的应用程序用户界面的组件
• If I can catch automation issues in the component library I can prevent these from making it into the main app and fix them earlier
  如果我可以在组件库中发现自动化问题，则可以防止这些问题进入主应用程序并尽早进行修复
• The component library is used to show off the different states that components can have so it’s an ideal candidate for building the page objects against
  组件库用于展示组件可以具有的不同状态，因此它是根据其构建页面对象的理想选择
• This leaves the main app’s code base to be concerned only with laying out screen & handling the app’s state and likewise, the automation at that level will model the ‘template’ and ‘page’ level page objects.
  这样，主应用程序的代码库只关心布局屏幕和处理应用程序的状态，同样，该级别的自动化将对“模板”和“页面”级别的页面对象进行建模。

There’s only a couple actions that are needed to automate the storybook UI:

仅需执行几个操作即可使Storybook UI自动化：

• We need to be able to select a story to load from the story list
  我们需要能够从故事列表中选择一个故事来加载
• We need to be able to load the preview for the selected story
  我们需要能够加载所选故事的预览
• We need to be able to search for a story, especially if the story list gets too long
  我们需要能够搜索故事，尤其是在故事列表过长的情况下

Below is a snippet of a simple atomic structure for this:

下面是一个简单的原子结构的代码段：

You can see the different atomic levels and their responsibilities. The Storybook class coordinates the actions the user would take to go from the preview tab to the navigator tab, select the story, click it and then go back to the preview tab to interact with the components in that story

您可以看到不同的原子级及其职责。 Storybook类协调用户执行的操作，从预览选项卡转到导航器选项卡，选择故事，单击故事，然后返回到预览选项卡以与该故事中的组件进行交互

下一步：使用Appium自动化Android和iOS应用 (Next Steps: Automating Android and iOS apps with Appium)

Over the following weeks I’ll be posting about Appium and how I’m using it as well as any gotchas, architectural patterns and how to get it running in CI.

在接下来的几周中，我将发布有关Appium的信息，如何使用它以及任何陷阱，架构模式以及如何使其在CI中运行。

If you’re working with Appium or looking to start using it feel free to leave a comment below with any questions you may have and I’ll try to answer. Give me a follow if you want to read my next posts in this series.

如果您正在使用Appium或希望开始使用它，请在下面对您可能遇到的任何问题发表评论，我将尽力回答。 如果您想阅读本系列的下一篇文章，请给我一个关注。

翻译自: https://medium.com/swlh/testing-your-react-native-app-with-expo-appium-eb6b72ce1349

appium真机测试app