Javascript 如何在React Native中进行屏幕截图测试？

我想使用屏幕截图测试我的React本机应用程序。UIAutomation javascript文件将由执行，并应向我提供所需的所有子视图。这部分很好用

我的主要问题是，我不明白如何单击元素。我发现的每个示例都是纯objective-c，并使用标准元素进行导航，如选项卡栏。我的应用程序有一个汉堡图标，在打开菜单的

TouchableHighlight

上有一个单击事件。我正在寻找引用单个

TouchableHighlight

元素的可能性，以便与之交互

对于这样的答案，我没有必要编写Objective-C。Fastlane（更具体的快照）已经不推荐UI测试的UI自动化。如果您需要更新gems，您的UIA javascript将无法用于UI测试（使用objc或Swift编写）

为什么要更改UI测试

UI自动化已被弃用 UI测试将在未来发展并支持更多的功能 UI测试更容易调试 UI测试是用Swift或Objective C编写的 UI测试可以以更干净、更好的方式执行

---

看起来其他使用React Native的人在UI测试和快照方面取得了一些进展：

我不熟悉fastlane，但您可能想尝试一下Jest，因为它是官方支持的。诚然，它们没有完全覆盖，考虑到react native的年龄，在某些情况下，您很可能不得不推出自己的解决方案，但这应该让您从正确的角度开始创建一个新项目

$ react-native -v
react-native-cli: 2.0.1

$ react-native init NativeSnapshots

$ cd NativeSnapshots

$ react-native run-ios

测试它是否工作，启动欢迎屏幕

$ cd ios

$ fastlane snapshot init

快车道输出：

[14:37:56]: For more information, check out https://docs.fastlane.tools/getting-started/ios/setup/#use-a-gemfile
✅  Successfully created SnapshotHelper.swift './SnapshotHelper.swift'
✅  Successfully created new Snapfile at './Snapfile'
-------------------------------------------------------
Open your Xcode project and make sure to do the following:
1) Add a new UI Test target to your project
2) Add the ./fastlane/SnapshotHelper.swift to your UI Test target
   You can move the file anywhere you want
3) Call `setupSnapshot(app)` when launching your app

  let app = XCUIApplication()
  setupSnapshot(app)
  app.launch()

4) Add `snapshot("0Launch")` to wherever you want to create the screenshots

More information on GitHub: https://github.com/fastlane/fastlane/tree/master/snapshot

步骤1：将新的UI测试目标添加到项目中

Highlight NativeSnapshotsUITests
File > Add Files to NativeSnapshots
Select ./fastlane/SnapshotHelper.swift, Enter

Xcode版本8.3.3>打开NativeSnapshots.xcodeproj

File > New > Target > iOS UI Testing Bundle

步骤2：将./fastlane/SnapshotHelper.swift添加到UI测试目标中

Highlight NativeSnapshotsUITests
File > Add Files to NativeSnapshots
Select ./fastlane/SnapshotHelper.swift, Enter

步骤3：启动应用程序时调用setupSnapshot（应用程序）

在Xcode中打开

NativeSnapshotsUITests/NativeSnapshotsUITests.swift

替换：

    XCUIApplication().launch()

与：

步骤4：将

快照（“0Launch”）

添加到要创建屏幕快照的任何位置

在UI测试中的testExample（）中添加快照调用

func testExample() {
    snapshot("0Launch")
}

编辑快照文件以避免出现巨大的矩阵

devices([
  "iPhone 6"
])

languages([
  "en-US"
])

scheme "NativeSnapshots"

应该准备好了

$ cd ios && fastlane snapshot

---

抄自

注意：我们正在使用detox进行测试，因此我正在使用

device.getPlatform（）

对iOS或Android进行测试

我最后做的是混合使用JavaScript库（和），使用和使用命令行命令（

xcrunsimctl

和

adb

）

为了提高测试结果，您应该使用Android，例如：

execSync('adb shell settings put global sysui_demo_allowed 1');
execSync('adb shell am broadcast -a com.android.systemui.demo -e command ...');
execSync('adb shell am broadcast -a com.android.systemui.demo -e command exit');

在xcode 11中，您有：

execSync('xcrun simctl status_bar <device> override ...')

---

好奇的是，你有没有找到办法“点击”这个可触摸的亮点？我有一个非常类似的问题，我很想知道您是否在这里取得了任何进展：）很抱歉告诉您，但我已停止解决该问题：/如果您能解决该问题，请分享您的见解；）可能重复的

execSync('xcrun simctl status_bar <device> override ...')

const IOS_STATUS_BAR_HEIGHT = 40;
async function removeIosStatusBar(imageFileName) {
  return new Promise((resolve, reject) => {
    const image = PNG.sync.read(readFileSync(imageFileName));
    let {width, height} = image;
    height -= IOS_STATUS_BAR_HEIGHT;
    const dst = new PNG({width, height});
    fs.createReadStream(imageFileName)
      .pipe(new PNG())
      .on('error', error => reject(error))
      .on('parsed', function () {
        this.bitblt(dst, 0, IOS_STATUS_BAR_HEIGHT, width, height, 0, 0);
        dst
          .pack()
          .pipe(fs.createWriteStream(imageFileName))
          .on('error', error => reject(error))
          .on('finish', () => resolve(imageFileName));
      });
  });
}