Generate screenshots during tests

.gitignore

@@ -7,6 +7,7 @@ production-key.pem
 build/
 dev/
 dll/
+screenshots/
 
 *.zip
 *.xpi

features/settings-ui.feature

@@ -158,9 +158,9 @@ Feature: Wallet UI Settings
     When I navigate to the general settings screen
     And I open General Settings language selection dropdown
     And I select Japanese language
-    Then I should see Japanese language as selected
+    Then The Japanese language should be selected
     When I refresh the page
-    Then I should see Japanese language as selected
+    Then The Japanese language should be selected
 
   @it-3
   Scenario: Yoroi Settings Screen / Terms of Use in Default English(IT-3)

features/step_definitions/common-steps.js

@@ -1,22 +1,77 @@
 // @flow
 
-import { BeforeAll, Given, After, AfterAll } from 'cucumber';
+import { Before, BeforeAll, Given, After, AfterAll, setDefinitionFunctionWrapper } from 'cucumber';
 import { getMockServer, closeMockServer } from '../support/mockServer';
 import { buildFeatureData, getFeatureData, getFakeAddresses } from '../support/mockDataBuilder';
 import i18nHelper from '../support/helpers/i18n-helpers';
 
+const { promisify } = require('util');
+const fs = require('fs');
+const rimraf = require('rimraf');
+
+const screenshotsDir = './screenshots/';
+
+/** We need to keep track of our progress in testing to give unique names to screenshots */
+const testProgress = {
+  scenarioName: '',
+  lineNum: 0, // we need this to differentiate scenarios with multiple "examples"
+  step: 0
+};
+
 BeforeAll(() => {
+  rimraf.sync(screenshotsDir);
+  fs.mkdirSync(screenshotsDir);
+
   getMockServer({});
 });
 
 AfterAll(() => {
   closeMockServer();
 });
 
+Before((scenario) => {
+  // cleanup scenario name so it is folder-name friendly
+  testProgress.scenarioName = scenario.pickle.name.replace(/[^0-9a-z_ ]/gi, '');
+  testProgress.lineNum = scenario.sourceLocation.line;
+  testProgress.step = 0;
+});
+
+
 After(async function () {
   await this.driver.quit();
 });
 
+const writeFile = promisify(fs.writeFile);
+
+/** Wrap every step to take screenshots for UI-based testing */
+setDefinitionFunctionWrapper((fn, _, pattern) => {
+  if (!pattern) {
+    return fn;
+  }
+  return async function (...args) {
+    const ret = await fn.apply(this, args);
+
+    // Regex patterns contain non-ascii characters.
+    // We want to remove this to get a filename-friendly string
+    const cleanString = pattern.toString().replace(/[^0-9a-z_ ]/gi, '');
+
+    if (cleanString.includes('I should see')) {
+      // path logic
+      const dir = `${screenshotsDir}/${testProgress.scenarioName}`;
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir);
+      }
+      const path = `${dir}/${testProgress.step}_${testProgress.lineNum}-${cleanString}.png`;
+
+      const screenshot = await this.driver.takeScreenshot();
+      await writeFile(path, screenshot, 'base64');
+    }
+
+    testProgress.step += 1;
+    return ret;
+  };
+});
+
 Given(/^I am testing "([^"]*)"$/, feature => {
   buildFeatureData(feature);
 });

features/step_definitions/general-settings-steps.js

@@ -33,7 +33,7 @@ Then(/^I should see secondary menu (.*) item disabled$/, async function (buttonN
   await this.waitUntilText(buttonSelector, label);
 });
 
-Then(/^I should see Japanese language as selected$/, async function () {
+Then(/^The Japanese language should be selected$/, async function () {
   this.driver.wait(async () => {
     const activeLanguage = await i18n.getActiveLanguage(this.driver);
     return activeLanguage === 'ja-JP';