使用 detox 以不同的方向查看 UI (Android)

Question

所以我正在使用 detox 截取我的应用程序的屏幕截图。我正在使用已连接的 Android 设备。 device.takeScreenshot 函数有效。现在，查看我的应用程序在不同方向上的外观的最佳方式是什么？是否只能更改平板电脑方向并再次运行测试？或者有更聪明的方法吗？

Answer 1

我不完全确定你在这里问什么，但为了改变方向，你可以使用 device.setOrientation()。

Is the only way to just change the tablet orientation and run the test again?

对我来说，这听起来像是两个独立的用例（纵向与垂直）。会更容易维护。

最后，就屏幕截图测试而言，您可能会发现 Detox screenshots guide 中描述的做法很有用：

...

the concept is mainly useful for verifying the proper visual structure and layout of elements appearing on the device's screen, in the form of a snapshot-test. Namely, by following these conceptual steps:

Taking a screenshot, once, and manually verifying it, visually.

Storing it as an e2e-test asset (i.e. the snapshot).

Using it as the point-of-reference for comparison against screenshots taken in consequent tests, from that point on.
const fs = require('fs');

describe('Members area', () => {
 const snapshottedImagePath = './e2e/assets/snapshotted-image.png';

 it('should greet the member with an announcement', async () => {
   const imagePath = (take screenshot from the device); // Discussed >below
   expectBitmapsToBeEqual(imagePath, snapshottedImagePath);  
 });  
});

function expectBitmapsToBeEqual(imagePath, expectedImagePath) {
 const bitmapBuffer = fs.readFileSync(imagePath);
 const expectedBitmapBuffer = fs.readFileSync(expectedImagePath);
 if (!bitmapBuffer.equals(expectedBitmapBuffer)) {
   throw new Error(`Expected image at ${imagePath} to be equal to image >at ${expectedImagePath}, but it was different!`);
 }
}
Important: The recommended, more practical way of doing this, is by utilizing more advanced 3rd-party image snapshotting & comparison tools such as applitools.

使用 detox 以不同的方向查看 UI (Android)

Using detox to look at UI in different orientations (Android)

android

react-native

detox