wc-e2e-page-objects/lib/helper.js

WooCommerce Page Objects to be used on end-to-end tests with Selenium WebDriver

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.waitTillUIBlockPresent = waitTillUIBlockPresent;
exports.waitTillUIBlockNotPresent = waitTillUIBlockNotPresent;
exports.waitTillAnimationFinished = waitTillAnimationFinished;
exports.waitTillAlertAccepted = waitTillAlertAccepted;
exports.getSelect2ToggleSelectorByName = getSelect2ToggleSelectorByName;
exports.select2Option = select2Option;
exports.select2OptionWithSearch = select2OptionWithSearch;
exports.setSelect2WithSearch = setSelect2WithSearch;

var _seleniumWebdriver = require('selenium-webdriver');

var _wpE2eWebdriver = require('wp-e2e-webdriver');

/**
 * WebDriver helper.
 *
 * @module WebDriverHelper
 */

/**
 * External dependencies
 */
var UI_BLOCK_SELECTOR = _seleniumWebdriver.By.css('.blockUI.blockOverlay');
var ANIMATION_SELECTOR = _seleniumWebdriver.By.css(':animated');

/**
 * Wait until the loading spinner overlay is present.
 * Timeout occurs after `waitMs` if the overlay is not present.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {number}    waitMs   - How long to wait in milliseconds. Defaults to 1000.
 * @return {Promise}  A promise that will be resolved to `true` if/when the UI block is present,
 *                    or `false` if timeout after `waitMs` happens first.
 */
function waitTillUIBlockPresent(driver) {
  var waitMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10000;

  return _wpE2eWebdriver.WebDriverHelper.waitTillPresentAndDisplayed(driver, UI_BLOCK_SELECTOR, waitMs);
}

/**
 * Wait until the loading spinner overlay is not present.
 * Timeout occurs after `waitMs` if the UI block is still present.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {number}    waitMs   - How long to wait in milliseconds. Defaults to 1000.
 * @return {Promise}  A promise that will be resolved to `true` if/when the UI block is not present,
 *                    or `false` if timeout after `waitMs` happens first.
 */
function waitTillUIBlockNotPresent(driver) {
  var waitMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10000;

  return _wpE2eWebdriver.WebDriverHelper.waitTillNotPresent(driver, UI_BLOCK_SELECTOR, waitMs);
}

/**
 * Wait until jQuery animations are finished.
 * Timeout occurs after `waitMs` if the animation is still happening.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {number}    waitMs   - How long to wait in milliseconds. Defaults to 1000.
 * @return {Promise}  A promise that will be resolved to `true` if/when no jQuery animations are present,
 *                    or `false` if timeout after `waitMs` happens first.
 */
function waitTillAnimationFinished(driver) {
  var waitMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10000;

  return _wpE2eWebdriver.WebDriverHelper.waitTillNotPresent(driver, ANIMATION_SELECTOR, waitMs);
}

/**
 * Wait for and accept an alert.
 * Timeout occurs after `waitMs` if the alert is never present.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {number}    waitMs   - How long to wait in milliseconds. Defaults to 1000.
 * @return {Promise}  A promise that will be resolved to `true` if/when an alert happens and is successfully accepted,
 *                    or `false` if timeout after `waitMs` happens first.
 */
function waitTillAlertAccepted(driver) {
  var waitMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10000;

  return driver.wait(function () {
    return driver.switchTo().alert().then(function (alert) {
      // Mimic the human in which it takes a moment to
      // read what's in the alert.
      driver.sleep(1000);

      return alert.accept().then(function () {
        return true;
      });
    }, function () {
      return false;
    });
  }, waitMs, 'Time out waiting for alert to be accepted');
}

/**
 * Get the selector object for a Select2 dropdown by input name.
 *
 * @param {string}    name     - Input name.
 * @param {object}    args     - Options. Valid fields:
 *                                          "multiple" - boolean - whether the input is a multiselector (default: false)
 * @return {object}   xpath selector.
 */
function getSelect2ToggleSelectorByName(name, args) {
  args = Object.assign({
    multiple: false
  }, args);

  return args.multiple ? _seleniumWebdriver.By.xpath('//select[@name="' + name + '"]' + '/following-sibling::span[contains(@class, "select2")]') : _seleniumWebdriver.By.xpath('//select[@name="' + name + '"]' + '/following-sibling::span[contains(@class, "select2")]' + '//span[contains(@class,"select2-selection__arrow")]');
}

/**
 * Select a select2 dropdown option.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {object}    selector - The selector for the dropdown.
 * @param {string}    option   - The text for the option to try and select.
 * @return {Promise}  A promise that will be resolved to `true` if the option is found and selected,
 *                    or `false` if unable to find and select the element.
 */
function select2Option(driver, selector, option) {
  _wpE2eWebdriver.WebDriverHelper.clickWhenClickable(driver, selector);

  var optionSelector = _seleniumWebdriver.By.xpath('//li[contains(@class, "select2-results__option") and contains(text(), "' + option + '")]');
  return _wpE2eWebdriver.WebDriverHelper.clickWhenClickable(driver, optionSelector);
}

/**
 * Select a select2 search dropdown option.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {object}    selector - The selector for the dropdown.
 * @param {string}    keyword  - The text to type in the search field.
 * @param {string}    option   - The text for the option to try and select.
 * @return {Promise}  A promise that will be resolved to `true` if the option is found and selected,
 *                    or `false` if unable to find and select the element.
 */
function select2OptionWithSearch(driver, selector, keyword, option) {
  _wpE2eWebdriver.WebDriverHelper.waitTillPresentAndDisplayed(driver, selector);
  _wpE2eWebdriver.WebDriverHelper.clickWhenClickable(driver, selector);

  // Wait till search results visible before typing the keyword.
  _wpE2eWebdriver.WebDriverHelper.waitTillPresentAndDisplayed(driver, _seleniumWebdriver.By.css('.select2-results'));

  var searchSelector = _seleniumWebdriver.By.css('.select2-container--open input.select2-search__field');
  _wpE2eWebdriver.WebDriverHelper.setWhenSettable(driver, searchSelector, keyword);

  var optionSelector = _seleniumWebdriver.By.xpath('//li[contains(@class, "select2-results__option") and contains(.,"' + option + '")]');
  return _wpE2eWebdriver.WebDriverHelper.clickWhenClickable(driver, optionSelector);
}

/**
 * Select a select2 search dropdown option.
 *
 * @param {WebDriver} driver   - Instance of WebDriver.
 * @param {object}    selector - The selector for the dropdown.
 * @param {string}    keyword  - The text to type in the search field.
 * @param {string}    option   - The text for the option to try and select.
 * @return {Promise}  A promise that will be resolved to `true` if the option is found and selected,
 *                    or `false` if unable to find and select the element.
 */
function setSelect2WithSearch(driver, selector, keyword, option) {
  _wpE2eWebdriver.WebDriverHelper.waitTillPresentAndDisplayed(driver, selector);
  _wpE2eWebdriver.WebDriverHelper.clickWhenClickable(driver, selector);

  // Wait till search results visible before typing the keyword.
  _wpE2eWebdriver.WebDriverHelper.waitTillPresentAndDisplayed(driver, _seleniumWebdriver.By.css('.select2-results'));

  var searchSelector = _seleniumWebdriver.By.css('.select2-container--open input.select2-search__field');
  _wpE2eWebdriver.WebDriverHelper.setWhenSettable(driver, searchSelector, keyword);

  var optionSelector = _seleniumWebdriver.By.xpath('//li[contains(@class, "select2-results__option") and contains(.,"' + option + '")]');
  return _wpE2eWebdriver.WebDriverHelper.clickWhenClickable(driver, optionSelector);
}