Appium Dark Mode Testing

Question 1

Why should I do dark-mode testing?

Answer

Automated testing on mobile devices with dark mode settings can help ensure that an application or website is fully functional and optimized for both light and dark display modes.

Testing both modes can help identify any display issues or user experience problems that may arise when switching between the modes. For example, you want to make sure that the color of your text is always legible, depending on the background of the text. If your app uses a black color for text, but switches to a dark background in dark mode as well, the text may no longer be legible.

Question 2

How to run dark mode and light mode tests with Appium?

Answer

Appium is an open-source mobile testing framework that allows you to run automated tests against native mobile iOS and Android apps.

With Appium, you can use mobile:setAppearance for iOS (XCUITest) and either specify a style of dark or light:

executeScript("mobile:setAppearance", "{style: 'dark'}")

You can specify either dark or light as a style

On Android, you can use the following command to toggle dark mode on the device:

adb shell cmd uimode night yes

Where you specify either yes or no to change the dark mode settings.

Question 3

Common issues when implementing dark mode in a mobile app.

Answer

Below are some of the most common issues when first implementing dark mode in a mobile iOS or Android app.

Insufficient contrast:
Some UI elements may not have enough contrast against a dark or light background, making these difficult to read or interact with.
Incompatible graphics
Certain graphics used in your app may not look as good in dark mode as they would in light mode. You may have to change the graphic to make sure it looks good in both modes.
Third-party libraries
Some third party libraries that your app might be using, may not (yet) support dark mode. This might cause visible glitches or inconsistencies in your UI.

Question 4

Using TestingBot to test dark mode for your native mobile app.

See the example below on how to run an automated Appium test on TestingBot, where we change the device to use Dark mode at the start of the test.

var wd = require('wd');
var assert = require('assert');
var asserters = wd.asserters;
var testingbotKey = "key",
testingbotSecret = "secret";

desiredCaps = {
  'name': 'My First App Test',
  'deviceName' : 'Galaxy S8',
  'platformName': 'Android',
  'version': '9.0',
  'app' : 'https://testingbot.com/appium/sample.apk',
  'realDevice': true
};
driver = wd.promiseRemote("http://" + testingbotKey + ":" + testingbotSecret + "@hub.testingbot.com/wd/hub");

driver
  .init(desiredCaps)
  .then(function () {
    return driver.execute('mobile: setAppearance', [{ 'style': 'dark' }]);
  })
  .then(function () {
    return driver.waitForElementByAccessibilityId('inputA', asserters.isDisplayed && asserters.isEnabled, 30000);
  })
  .then(function (inputA) {
    return inputA.sendKeys("10");
  })
  .then(function () {
    return driver.waitForElementByAccessibilityId('inputB', asserters.isDisplayed && asserters.isEnabled, 30000);
  })
  .then(function (inputB) {
    return inputB.sendKeys("5");
  })
  .then(function () {
    return driver.waitForElementByAccessibilityId('sum', asserters.isDisplayed && asserters.isEnabled, 30000);
  })
  .then(function (textOutput) {
    return textOutput.text().then(function(value) {
      if (value === "15")
        assert(true);
      else
        assert(false);
    });
  })
  .fin(function() { return driver.quit(); })
  .done();

By using a combination of TestingBot's extensive device grid and Appium's automated testing capabilities, you can test to make sure your app looks and functions correctly in dark mode on a wide variety of Android and iOS phones and tablets.

Answer

TestingBot provides a grid of physical mobile devices and emulators/simulators, which all come equipped with the possibility to enable or disable dark-mode.

By simple using mobile: setAppearance with the JavascriptExecutor functionality of Appium, you can enable or disable dark mode during your automated testing.