Question

我想使用屏幕截图测试我的React Native应用程序。 UIAutomation javascript文件将由fastlane执行，并且应该向我提供我需要的所有子视图。这部分工作正常。

我的主要问题是我不明白如何点击元素。我发现的每个例子都是普通的objective-c，并使用标准元素进行导航，就像标签栏一样。我的应用程序有一个汉堡图标，它在TouchableHighlight上有一个点击事件，可以打开一个菜单。我正在寻找引用单个TouchableHighlight元素以与其进行交互的可能性。

此类答案的奖励积分，不允许我写Objective-C。

Answer 1

Fastlane（更具体的快照）已弃用UI测试的UI自动化。如果你需要更新宝石，你的UIA javascript将无法用于UI测试（用Obj C或Swift编写）

为什么要更改为UI测试？

不推荐使用UI自动化   UI测试将在未来发展并支持更多功能   UI测试更容易调试   UI测试用Swift或Objective C编写   UI测试可以更清洁，更好的方式执行

documentation

看起来使用React Native的其他人在UI测试和快照方面取得了一些进展：https://github.com/fastlane/snapshot

Answer 2

我对fastlane并不熟悉，但你可能想尝试Jest，因为它是官方支持的。他们肯定没有完全覆盖，而且在某些情况下你很可能必须推出自己的解决方案，因为年轻人的反应是如何，但这应该让你从右脚开始Snapshot Tests (iOS only)

Answer 3

注意：我们正在使用排毒进行测试，因此我正在使用device.getPlatform()来测试iOS或Android。

我最终要做的是混合使用JavaScript库（pixelmatch和pngjs），使用fs和使用命令行命令（xcrun simctl和{{1} }。

adb

要改善测试结果，您应该使用Android的demo mode，例如：

const {device} = require('detox');
const {execSync} = require('child_process');
const fs = require('fs');
const {existsSync, mkdirSync, readFileSync, writeFileSync, unlinkSync} = fs;
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');

const IOS_SCREENSHOT_OPTIONS = {
  timeout: 1000,
  killSignal: 'SIGKILL'
};

function getScreenShotDirectory() { ... }
function getActualFileName(testName) { ... }
function getExpectedFileName(testName) { ... }
function getDiffFileName(testName) { ... }

async function takeScreenshot(testName) {
  const actualFileName = getActualFileName(testName);
  const directoryName = getScreenShotDirectory();
  if (!existsSync(directoryName)) {
    mkdirSync(directoryName, {recursive: true});
  }

  if (device.getPlatform() === 'ios') {
    execSync(`xcrun simctl io booted screenshot "${actualFileName}"`, IOS_SCREENSHOT_OPTIONS);
    await removeIosStatusBar(actualFileName);
  } else {
    execSync(`adb exec-out screencap -p > "${actualFileName}"`);
  }
}

const compareScreenshot = async testName => {
  const actualFileName = getActualFileName(testName);
  await takeScreenshot(testName);
  const expectedFileName = getExpectedFileName(testName);
  const actualImage = PNG.sync.read(readFileSync(actualFileName));
  if (!existsSync(expectedFileName)) {
    console.warn(`No expected image for ${testName} @ ${expectedFileName}`);
    return false;
  }

  const expectedImage = PNG.sync.read(readFileSync(getExpectedFileName(testName)));
  const {width, height} = actualImage;
  const diffImage = new PNG({width, height});
  const numDiffPixels = pixelmatch(actualImage.data, expectedImage.data, diffImage.data, width, height);

  if (numDiffPixels === 0) {
    unlinkSync(actualFileName);
    return true;
  } else {
    const percentDiffPixels = numDiffPixels / (width * height);
    console.warn(
      `Images are different ${testName} numDiffPixels=${numDiffPixels} percentDiffPixels=${percentDiffPixels}`
    );
    writeFileSync(getDiffFileName(testName), PNG.sync.write(diffImage));
    return false;
  }
};

在xcode 11中，您可以：

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');

我使用以下代码从iOS中删除了状态栏（但会降低性能）：

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

Answer 4

创建一个新项目。

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

$ react-native init NativeSnapshots

$ cd NativeSnapshots

$ react-native run-ios

测试它是否有效，启动欢迎屏幕。

$ cd ios

$ fastlane snapshot init

fastlane输出：

[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测试目标

Xcode版本8.3.3＆gt;打开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（app）

在Xcode中打开NativeSnapshotsUITests/NativeSnapshotsUITests.swift。

替换：

    XCUIApplication().launch()

使用：

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

第4步：将snapshot("0Launch")添加到您想要创建屏幕截图的位置

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

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

编辑Snapfile以避免使用庞大的矩阵。

devices([
  "iPhone 6"
])

languages([
  "en-US"
])

scheme "NativeSnapshots"

应该准备好了。

$ cd ios && fastlane snapshot

从aj0strow

复制

如何在React Native中截取测试？

4 个答案: