@suffolklitlab/alkiln 4.3.0 → 4.5.0

package/CHANGELOG.md

@@ -40,6 +40,17 @@ Format:
 -->
 <!-- ## [Unreleased] -->
 
+## [4.5.0] - 2022-05-23
+- Steps that tap tabs (made using the `tabbed_templates_html` function from ALToolbox) and other arbitrary elements on the page.
+
+## [4.4.0] - 2022-05-23
+### Added
+- Appends the results of the cucumber [summary formatter](https://github.com/cucumber/cucumber-js/blob/main/docs/formatters.md#summary) to the `debug_log.txt`, which includes useful stack traces into the Kiln code when tests fail.
+
+### Fixed
+- Prevent login info from being saved in the report or screenshots being taken on error. [#599](https://github.com/SuffolkLITLab/ALKiln/issues/559).
+- Prevent error screenshots of screens that used a secret.
+
 ## [4.3.0] - 2022-04-07
 ### Added
 - GitHub environment variable `MAX_SECONDS_FOR_SETUP` to set a custom maximum time for setup and takedown for packages that take a long time to load.

package/action.yml

@@ -29,7 +29,7 @@ inputs:
     required: false
     default: '^4.0.0'
   MAX_SECONDS_FOR_SETUP:
-    description: 'Amount of time to give the Project to upload your package's GitHub code.'
+    description: "Amount of time to give the Project to upload your package's GitHub code."
     required: false
     default: '120'
 
@@ -86,6 +86,13 @@ runs:
             "@suffolklitlab/alkiln": "$ALKILN_VERSION"
           }
         }
+        EOF
+        # Keep in sync with the cucumber.js in root
+        cat << EOF > "cucumber.js"
+        module.exports = {
+          default: "--require ./lib/index.js --format progress --format summary:cucumber-report.txt"
+        }
+        EOF
       shell: bash
 
     # Install node

package/cucumber.js

@@ -0,0 +1,3 @@
+module.exports = {
+  default: "--require ./lib/index.js --format progress --format summary:cucumber-report.txt"
+}

package/lib/scope.js

@@ -244,10 +244,37 @@ module.exports = {
     if ( showif ) { await scope.page.waitForTimeout( scope.showif_timeout ); }
   },
 
-  afterStep: async function afterStep(scope, options = {waitForShowIf: false, navigated: false, waitForTimeout: 0}) {
+  waitForTab: async function waitForTab(scope, tab_to_show) {
+    /**
+     * @param {tab_to_show} the aria-labeledby text of the tab panel, which
+     *   we use to query and wait for that tab panel to be shown.
+     */
+    // Implementation linked to https://github.com/SuffolkLITLab/docassemble-ALToolbox/blob/4aa1069389d2ca9cadb586f309dd73d791f081d1/docassemble/ALToolbox/misc.py#L127
+    // I think `.$()` does not use a timeout
+    if ( tab_to_show.length == 0) { return }
+    // waiting for the transitionend event: https://stackoverflow.com/a/57955251/11416267
+    await scope.page.evaluate((element_query) => {
+      return new Promise((resolve) => {
+        const elem = document.querySelector(element_query); 
+        // Taken from jQuery: https://stackoverflow.com/a/33456469/11416267
+        const is_visible = !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
+        if (!is_visible) {
+          const onEnd = function() {
+            elem.removeEventListener('transitionend', onEnd);
+            resolve();
+          };
+          elem.addEventListener('transitionend', onEnd); 
+        } else {
+          resolve();
+        }
+      });
+    }, `div[aria-labelledby="${tab_to_show}"]`);
+  },
+
+  afterStep: async function afterStep(scope, options = {waitForShowIf: false, tabToWaitFor: '', navigated: false, waitForTimeout: 0}) {
     /* Common things to do after a step, including take care of errors.
     *    TODO: discuss splitting into `afterField` and `afterStep` or something. Or just change name
-    *    TODO: Update to latest cucumberjs, which as `AfterStep` */
+    *    TODO: Update to latest cucumberjs, which has `AfterStep` */
 
     if ( scope.page ) {
       // Use a while loop until the below does not error with `Error: Execution context was destroyed`
@@ -274,17 +301,24 @@ module.exports = {
 
       // Wait for elements that might get revealed
       if ( options.waitForShowIf ) { await scope.waitForShowIf( scope ); }
+      if ( options.tabToWaitFor ) { await scope.waitForTab( scope, options.tabToWaitFor); }
     }  // ends if scope.page
 
-    // Reset navigation (TODO: discuss use for observational steps)
-    if ( options.navigated ) { scope.navigated = true; }  // Consider `daPageLoad` event
-    else { scope.navigated = false; }
+    if ( options.navigated ) {
+      // Reset navigation (TODO: discuss use for observational steps)
+      // TODO: Consider `daPageLoad` event
+      scope.navigated = true;
+      // Allow screenshots of the next page (may have been disabled in order to hide secret values)
+      scope.disable_error_screenshot = false;
+    } else {
+      scope.navigated = false;
+    }
     
     // Plain old waiting. Here to avoid doing this in each individual place
     if ( options.waitForTimeout ) { await time.waitForTimeout( options.waitForTimeout ); }
   },  // Ends afterStep
 
-  tapElement: async function tapElement(scope, elem) {
+  tapElement: async function tapElement(scope, elem, tabToWaitFor='', waitForTimeout=0) {
     /* Tap a given element, detect navigation, and do appropriate related things. */
 
     // This check might never be needed now as we try to match fields on the page
@@ -297,25 +331,32 @@ module.exports = {
 
     let start_url = await scope.page.url();  // so we can later check for navigation
 
-    let winner;
-    winner = await Promise.race([
-      Promise.all([  // Error loads page, so no need to detect to keep things short
-        // Click with no navigation will end immediately
-        // Can't use elem[ scope.activate ](). It works locally, but errors on GitHub
-        // with "Node is not visible or not an HTMLElement". We're not using a custom Chromium version
-        // Unfortunately, this won't catch an invisible element. Hopefully we'd catch it before now...?
-        // "Tap" on mobile is more complex to implement ourselves.
-        // See https://stackoverflow.com/a/56547605/14144258
-        // and other convos around it. We haven't made it public that the device
-        // can customized. Until we do that, we'll just use "click" all the time.
+    let clickWait;
+    // Can't use elem[ scope.activate ](). It works locally, but errors on GitHub
+    // with "Node is not visible or not an HTMLElement". We're not using a custom Chromium version
+    // Unfortunately, this won't catch an invisible element. Hopefully we'd catch it before now...?
+    // "Tap" on mobile is more complex to implement ourselves.
+    // See https://stackoverflow.com/a/56547605/14144258
+    // and other convos around it. We haven't made it public that the device
+    // can customized. Until we do that, we'll just use "click" all the time.
+    if (!tabToWaitFor) {
+      // Click with no navigation will end immediately
+      clickWait = Promise.all([
         elem.evaluate( (el) => { return el.click(); }),
         scope.page.waitForNavigation({ waitUntil: 'domcontentloaded' }),
-      ]),
+      ]);
+    } else {
+      // Same thing as above, but the promise doesn't wait for navigation.
+      clickWait = elem.evaluate( (el) => {return el.click(); });
+    }
+    // Error loads page, so no need to detect to keep things short
+    let winner = await Promise.race([
+      clickWait,
       // This is meant to detect user-visible alerts/errors,
       // not breaking errors in the testing code.
       scope.page.waitForSelector('.alert-danger', { visible: true }),
       scope.page.waitForSelector('.da-has-error', { visible: true }),
-    ]);
+    ])
 
     // TODO: Not sure how to detect navigation landing at same page.
     // Maybe url change + trigger var change? Maybe just trigger var?
@@ -329,8 +370,12 @@ module.exports = {
       // If navigation, wait for 200ms to let things settle down
       await scope.afterStep(scope, {waitForTimeout: 200, navigated: navigated});
     } else {
-      // If stay on page, wait for `show if` or feedback elements to be move around
-      await scope.afterStep(scope, {waitForShowIf: true, navigated: navigated});
+      // If stay on page, wait for `show if`, the new tab to be loaded, or feedback elements to be move around
+      options = {waitForShowIf: !tabToWaitFor, tabToWaitFor: tabToWaitFor, navigated: navigated};
+      if (waitForTimeout > 0) {
+        options = {waitForTimeout: waitForTimeout, navigated: navigated};
+      }
+      await scope.afterStep(scope, options); 
     }
 
     return winner;
@@ -420,13 +465,33 @@ module.exports = {
     await scope.tapElement( scope, elem );
   },
 
+  tapTab: async function ( scope, tab_id ) {
+    let elem = await scope.page.$(`#${tab_id}`); 
+    let error_msg = `Couldn't find the tab with id "#${tab_id}" on the page, is there a typo?`;
+    if ( !elem ) {
+      await scope.addToReport(scope, { type: `error`, value: error_msg }); 
+    }
+    expect( elem, error_msg ).to.exist;
+    await scope.tapElement( scope, elem, tab_id );
+  },
+
+  tapElementBySelector: async function ( scope, selector, waitForTimeout ) {
+    let elem = await scope.page.$(`${selector}`);
+    let error_msg = `Couldn't find "${selector}" on the page, is there a typo?`;
+    if ( !elem ) {
+      await scope.addToReport(scope, { type: `error`, value: error_msg });
+    }
+    expect( elem, error_msg ).to.exist;
+    await scope.tapElement( scope, elem, '', waitForTimeout );
+  },
+
   load: async function ( scope, file_name ) {
     /* Try to load the page. Should we also pass a `timeout` arg or just
     *    use scope.timeout? */
 
     // If there is no browser open, start a new one
     if (!scope.browser) {
-      scope.browser = await scope.driver.launch({ headless: !session_vars.get_debug() });
+      scope.browser = await scope.driver.launch({ headless: !session_vars.get_debug(), devtools: session_vars.get_debug() });
     }
     if ( !scope.page ) { scope.page = await scope.browser.newPage(); }
 
@@ -1836,6 +1901,8 @@ module.exports = {
 
     set_secret_var: async ( scope, var_name, set_to_env_name ) => {
       /** Sets a non-story table variable to a "secret" value (i.e. an env var) */
+      // Prevent pictures of a screen with a secret.
+      scope.disable_error_screenshot = true;
       let var_data = await scope.normalizeTable( scope, {
               var_data: [{
                 var: var_name,
@@ -1963,6 +2030,9 @@ module.exports = {
       /** Allow the developer to log a user into their server using GitHub
       * secrets to authenticate.
       */
+      // Don't take a picture of a failed login in case one of the inputs is correct
+      scope.disable_error_screenshot = true;
+
       // If there is no browser open, start a new one
       if (!scope.browser) {
         scope.browser = await scope.driver.launch({ headless: !session_vars.DEBUG });
@@ -2003,8 +2073,10 @@ module.exports = {
 
       await scope.addToReport( scope, {
         type: `row`,
-        value: `Logged into ${ session_vars.get_da_server_url() }/user/sign-in as a ${ email } with ${ password }.`
+        value: `Signed into ${ session_vars.get_da_server_url() }/user/sign-in successfully.`
       });
+
+      await scope.afterStep(scope, {waitForShowIf: false});
     },  // Ends sign_in
 
   },  // ends scope.steps

package/lib/steps.js

@@ -83,6 +83,7 @@ Before(async (scenario) => {
   // Device interaction
   scope.device = 'pc';
   scope.activate = click_with[ scope.device ];
+  scope.disable_error_screenshot = false;
 
   scope.page_id = null;
 
@@ -390,7 +391,7 @@ When(/^(?:the user gets)?(?:I get)? to ?(?:the)?(?: ?question)?(?: id)? "([^"]+)
 //#####################################
 //#####################################
 
-When(/I wait (\d*\.?\d+) seconds?/, { timeout: -1 }, async ( seconds ) => {
+When(/I wait ?(?:for)? (\d*\.?\d+) seconds?/, { timeout: -1 }, async ( seconds ) => {
   /** Wait for a specified amount of time. Can help with some race conditions.
   *    We're working on reducing race conditions, but it'll never be perfect.
   *
@@ -706,6 +707,27 @@ When('I tap to continue', { timeout: -1 }, async () => {
   );
 });
 
+When(/I tap the "([^"]+)" tab/i, { timeout: -1 }, async ( tabId ) => {
+  return wrapPromiseWithTimeout(
+    scope.tapTab( scope, tabId ),
+    scope.timeout
+  )
+});
+
+When(/I tap the "([^"]+)" element$/i, { timeout: -1 }, async ( elemSelector ) => {
+  return wrapPromiseWithTimeout(
+    scope.tapElementBySelector( scope, elemSelector, 2000 ),
+    scope.timeout
+  )
+});
+
+When(/I tap the "([^"]+)" element and wait ([0-9]+) second(?:s)?/i, { timeout: -1 }, async ( elemSelector, waitTime ) => {
+  return wrapPromiseWithTimeout(
+    scope.tapElementBySelector( scope, elemSelector, waitTime * 1000 ),
+    scope.timeout
+  )
+});
+
 
 //#####################################
 // UI element interaction
@@ -882,11 +904,19 @@ After(async function(scenario) {
 
     await scope.addToReport(scope, { type: `outcome`, value: `**-- Scenario Failed --**` });
     if ( scope.page ) {
-      // Save/download a picture of the screen that's showing during the unexpected status
-      let safe_filename = await scope.getSafeScenarioFilename( scope, { prefix: `error` });
-      await scope.page.screenshot({ path: `${ safe_filename }.jpg`, type: `jpeg`, fullPage: true });
-    }
-  }  // Ends if not passed
+      if ( scope.disable_error_screenshot ) {
+        scope.addToReport(scope, {
+          type: `row`,
+          value: `For security, ALKiln will not create a screenshot for this error. It's possible a secret is being used on this screen.`
+        });
+      } else {
+        // Save/download a picture of the screen that's showing during the unexpected status
+        let safe_filename = await scope.getSafeScenarioFilename( scope, { prefix: `error` });
+        await scope.page.screenshot({ path: `${ safe_filename }.jpg`, type: `jpeg`, fullPage: true });
+      }  // ends if scope.disable_error_screenshot
+    }  // ends if scope.page exists
+
+  }  // ends if not passed
 
   if (scenario.result.status === `FAILED`) {
     await scope.addToReport(scope, { type: `outcome`, value: `**-- Scenario Failed --**` });

package/lib/utils/clean_reports.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+
+// This is hardcoded information from `cucumber.js`. Once we move to cucumber 8, we should
+// change that the cucumber.json and actually parse the info from it. 
+let summary_file_name = 'cucumber-report.txt';
+fs.readFile(summary_file_name, 'utf8', (err, data) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+  // Replace terminal color codes, if present
+  // https://gist.github.com/fnky/458719343aabd01cfb17a3a4f7296797#colors--graphics-mode
+  data = data.replace(/\x1b\[[0-9][0-9]?[0-9]?m/g, '');
+  const debug_log_file = 'debug_log.txt';
+  fs.appendFile(debug_log_file, data, err => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+  });
+});

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@suffolklitlab/alkiln",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "description": "Integrated automated end-to-end testing with docassemble, puppeteer, and cucumber.",
   "main": "lib/index.js",
   "scripts": {
     "test": "npm run unit && npm run langs_setup && npm run cucumber -- $@",
-    "cucumber_base": "./node_modules/.bin/cucumber-js --require ./lib/index.js",
-    "cucumber": "run_cucumber(){ npm run cucumber_base -- \"$@\" tests/features/*.feature; }; run_cucumber",
+    "cucumber_base": "run_cucumber(){ ./node_modules/.bin/cucumber-js \"$@\"; status=$?; ./lib/utils/clean_reports.js; return $status; }; run_cucumber",
+    "cucumber": "run_base(){ npm run cucumber_base -- \"$@\" tests/features/*.feature; }; run_base",
     "langs": "npm run langs_setup && ./node_modules/.bin/cucumber-js --require ./lib/index.js tests/features/*_lang*.feature",
     "langs_setup": "./lib/utils/langs.js 'tests/features/*.feature'",
     "langs_local": "npm run langs_setup && npm run local",

package/tests/features/interactive_steps.feature

@@ -101,3 +101,25 @@ Scenario: handles settings from Github secrets
   Then I see the phrase "secret-var2-value"
   When I tap to continue
   And I set the variable "third_text_entry" to secret "SECRET_NOT_THERE"
+
+@i3 @tap-elements @tabs
+Scenario: tap elements
+  Given I start the interview at "test_taps"
+  And I tap the "Tests-first_template-tab" tab
+  Then I see the phrase "Mechanics"
+  And I tap the "Tests-second_template-tab" tab
+  Then I see the phrase "villify"
+  And I tap the "Tests-third_template-tab" tab
+  Then I see the phrase "museum"
+  And I tap the "#special_event" element and wait 1 second
+  Then I see the phrase "Portishead"
+
+@i4 @tap-elements @tabs
+Scenario: tap element with an error
+  Given the final Scenario status should be "failed"
+  And the Scenario report should include:
+  """
+  is there a typo?
+  """
+  Given I start the interview at "test_taps"
+  And I tap the "Tests-not_there-tab" tab

package/tests/features/reports.feature

@@ -346,7 +346,7 @@ Scenario: I can't match JSON page var to str
   """
 
 @fast @rf22 @signin
-Scenario: Fail with wrong email secret
+Scenario: Fail with wrong email secret name
   Given the final Scenario status should be "failed"
   Given the Scenario report should include:
   """
@@ -355,7 +355,7 @@ Scenario: Fail with wrong email secret
   Given I log on with the email "WRONG_EMAIL_NAME" and the password "USER1_PASSWORD"
 
 @fast @rf23 @signin
-Scenario: Fail with wrong password secret
+Scenario: Fail with wrong password secret name
   Given the final Scenario status should be "failed"
   Given the Scenario report should include:
   """
@@ -364,7 +364,7 @@ Scenario: Fail with wrong password secret
   Given I sign in with the email "USER1_EMAIL" and the password "WRONG_PASSWORD_NAME"
 
 @fast @rf24 @signin
-Scenario: Fail with 2 wrong signin secrets
+Scenario: Fail with 2 wrong signin secret names
   Given the final Scenario status should be "failed"
   Given the Scenario report should include:
   """
@@ -393,6 +393,10 @@ Scenario: Fail to find var while keeping value secret
   """
   Did not find a field on this page for the variable "missing_var" that could be set to "SECRET_FOR_MISSING_FIELD"
   """
+  And the Scenario report should include:
+  """
+  For security, ALKiln will not create a screenshot for this error.
+  """
   And I start the interview at "test_secret_vars"
   And I set the var "missing_var" to the secret "SECRET_FOR_MISSING_FIELD"
 
@@ -518,3 +522,11 @@ Scenario: Report lists unused table rows
     | button_continue | True |  |
     | buttons_other | button_2 |  |
     | buttons_yesnomaybe | True |  |
+
+@fast @rp3 @signin
+Scenario: Sign in to server successfully
+  Given the Scenario report should include:
+  """
+  Signed in
+  """
+  Given I sign in with the email "USER1_EMAIL" and the password "USER1_PASSWORD"