Search code examples
androidreact-nativedetox

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

So I am using detox to take screenshots of my app. I'm using a connected Android device. The device.takeScreenshot function works. Now what is the best way to see what my app looks like on different orientations? Is the only way to just change the tablet orientation and run the test again? Or is there a smarter way to do it?

Solution

  • I'm not entirely sure what you're asking here, but in order to change orientation you can use device.setOrientation().

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

    To me, this sounds like two separate use cases (portrait vs. vertical). Would be easier to maintain.

    Lastly, as far as screenshot testing is concerned, you might find the practices described in Detox's screenshots guide useful:

    ...

    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:

    1. Taking a screenshot, once, and manually verifying it, visually.
    2. Storing it as an e2e-test asset (i.e. the snapshot).
    3. 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.