MOBILE-3320 behat: Improve element locators

main
Noel De Martin 2021-06-03 11:20:36 +02:00
parent 98e5a63eb6
commit 3ce506ea01
2 changed files with 156 additions and 118 deletions

View File

@ -11,13 +11,13 @@
*
* @param {string} text Information to log
*/
var log = function(text) {
var log = function() {
var now = new Date();
var nowFormatted = String(now.getHours()).padStart(2, '0') + ':' +
String(now.getMinutes()).padStart(2, '0') + ':' +
String(now.getSeconds()).padStart(2, '0') + '.' +
String(now.getMilliseconds()).padStart(2, '0');
console.log('BEHAT: ' + nowFormatted + ' ' + text); // eslint-disable-line no-console
console.log('BEHAT: ' + nowFormatted, ...arguments); // eslint-disable-line no-console
};
/**
@ -185,13 +185,14 @@
if (element.getAttribute('aria-hidden') === 'true' || getComputedStyle(element).display === 'none')
return false;
if (element.parentElement === container)
const parentElement = getParentElement(element);
if (parentElement === container)
return true;
if (!element.parentElement)
if (!parentElement)
return false;
return isElementVisible(element.parentElement, container);
return isElementVisible(parentElement, container);
};
/**
@ -210,10 +211,11 @@
)
return true;
if (!element.parentElement || element.parentElement === container)
const parentElement = getParentElement(element);
if (!parentElement || parentElement === container)
return false;
return isElementSelected(element.parentElement, container);
return isElementSelected(parentElement, container);
};
/**
@ -352,19 +354,28 @@
return [...uniqueElements];
};
/**
* Get parent element, including Shadow DOM parents.
*
* @param {HTMLElement} element Element.
* @return {HTMLElement} Parent element.
*/
var getParentElement = function(element) {
return element.parentElement ?? element.getRootNode()?.host ?? null;
};
/**
* Function to find elements based on their text or Aria label.
*
* @param {string} text Text (full or partial)
* @param {string} [near] Optional 'near' text - if specified, must have a single match on page
* @param {object} locator Element locator.
* @return {HTMLElement} Found elements
*/
var findElementsBasedOnText = function(text, near) {
var findElementsBasedOnText = function(locator) {
const topContainer = document.querySelector('ion-alert, ion-popover, ion-action-sheet, core-ion-tab.show-tab ion-page.show-page, ion-page.show-page, html');
let container = topContainer;
if (topContainer && near) {
const nearElements = findElementsBasedOnText(near);
if (topContainer && locator.near) {
const nearElements = findElementsBasedOnText(locator.near);
if (nearElements.length === 0) {
throw new Error('There was no match for near text')
@ -375,19 +386,22 @@
throw new Error('Too many matches for near text');
}
container = nearElementsAncestors[0].parentElement;
container = getParentElement(nearElementsAncestors[0]);
} else {
container = nearElements[0].parentElement;
container = getParentElement(nearElements[0]);
}
}
do {
const elements = findElementsBasedOnTextWithin(container, text);
const elements = findElementsBasedOnTextWithin(container, locator.text);
const filteredElements = locator.selector
? elements.filter(element => element.matches(locator.selector))
: elements;
if (elements.length > 0) {
return elements;
if (filteredElements.length > 0) {
return filteredElements;
}
} while ((container = container.parentElement) && container !== topContainer);
} while ((container = getParentElement(container)) && container !== topContainer);
return [];
};
@ -444,10 +458,13 @@
} else {
switch (button) {
case 'back':
foundButton = findElementsBasedOnText('Back')[0];
foundButton = findElementsBasedOnText({ text: 'Back' })[0];
break;
case 'main menu':
foundButton = findElementsBasedOnText('more', 'Notifications')[0];
foundButton = findElementsBasedOnText({
text: 'more',
near: { text: 'Notifications' },
})[0];
break;
default:
return 'ERROR: Unsupported standard button type';
@ -500,15 +517,14 @@
/**
* Function to find an arbitrary item based on its text or aria label.
*
* @param {string} text Text (full or partial)
* @param {string} [near] Optional 'near' text
* @param {object} locator Element locator.
* @return {string} OK if successful, or ERROR: followed by message
*/
var behatFind = function(text, near) {
log(`Action - Find ${text}`);
var behatFind = function(locator) {
log('Action - Find', locator);
try {
const element = findElementsBasedOnText(text, near)[0];
const element = findElementsBasedOnText(locator)[0];
if (!element) {
return 'ERROR: No matches for text';
@ -540,15 +556,14 @@
/**
* Check whether an item is selected or not.
*
* @param {string} text Text (full or partial)
* @param {string} near Optional 'near' text
* @param {object} locator Element locator.
* @return {string} YES or NO if successful, or ERROR: followed by message
*/
var behatIsSelected = function(text, near) {
log(`Action - Is Selected: "${text}"${near ? ` near "${near}"`: ''}`);
var behatIsSelected = function(locator) {
log('Action - Is Selected', locator);
try {
const element = findElementsBasedOnText(text, near)[0];
const element = findElementsBasedOnText(locator)[0];
return isElementSelected(element, document.body) ? 'YES' : 'NO';
} catch (error) {
@ -559,16 +574,15 @@
/**
* Function to press arbitrary item based on its text or Aria label.
*
* @param {string} text Text (full or partial)
* @param {string} near Optional 'near' text
* @param {object} locator Element locator.
* @return {string} OK if successful, or ERROR: followed by message
*/
var behatPress = function(text, near) {
log('Action - Press ' + text + (near === undefined ? '' : ' - near ' + near));
var behatPress = function(locator) {
log('Action - Press', locator);
var found;
try {
found = findElementsBasedOnText(text, near)[0];
found = findElementsBasedOnText(locator)[0];
if (!found) {
return 'ERROR: No matches for text';
@ -697,8 +711,7 @@
return 'ERROR: No matches for text';
}
} else {
const elements = findElementsBasedOnText(field);
var found = elements.filter(element => element.matches('input, textarea'))[0];
found = findElementsBasedOnText({ text: field, selector: 'input, textarea' })[0];
if (!found) {
return 'ERROR: No matches for text';

View File

@ -103,18 +103,15 @@ class behat_app extends behat_base {
/**
* Finds elements in the app.
*
* @Then /^I should(?P<not_boolean> not)? find "(?P<text_string>(?:[^"]|\\")*)"(?: near "(?P<near_string>(?:[^"]|\\")*)")? in the app$/
* @param string $not
* @param string $text
* @param string $near
* @Then /^I should( not)? find (".+") in the app$/
* @param bool $not
* @param object $locator
*/
public function i_find_in_the_app($not, $text='', $near='') {
$not = !empty($not);
$text = addslashes_js($text);
$near = addslashes_js($near);
public function i_find_in_the_app(bool $not, object $locator) {
$locatorjson = json_encode($locator);
$this->spin(function() use ($not, $text, $near) {
$result = $this->evaluate_script("return window.behat.find(\"$text\", \"$near\");");
$this->spin(function() use ($not, $locatorjson) {
$result = $this->evaluate_script("return window.behat.find($locatorjson);");
if ($not && $result === 'OK') {
throw new DriverException('Error, found an item that should not be found');
@ -126,22 +123,22 @@ class behat_app extends behat_base {
return true;
});
$this->wait_for_pending_js();
}
/**
* Check if elements are selected in the app.
*
* @Then /^"(?P<text_string>(?:[^"]|\\")*)"(?: near "(?P<near_string>(?:[^"]|\\")*)")? should(?P<not_boolean> not)? be selected in the app$/
* @param string $text
* @Then /^(".+") should( not)? be selected in the app$/
* @param object $locator
* @param bool $not
*/
public function be_selected_in_the_app($text, $near='', $not='') {
$not = !empty($not);
$text = addslashes_js($text);
$near = addslashes_js($near);
public function be_selected_in_the_app(object $locator, bool $not = false) {
$locatorjson = json_encode($locator);
$this->spin(function() use ($not, $text, $near) {
$result = $this->evaluate_script("return window.behat.isSelected(\"$text\", \"$near\");");
$this->spin(function() use ($locatorjson, $not) {
$result = $this->evaluate_script("return window.behat.isSelected($locatorjson);");
switch ($result) {
case 'YES':
@ -160,6 +157,7 @@ class behat_app extends behat_base {
return true;
});
$this->wait_for_pending_js();
}
@ -403,7 +401,7 @@ class behat_app extends behat_base {
: $page->find('xpath', '//core-login-site-onboarding');
if ($element) {
$this->i_press_in_the_app('Skip');
$this->i_press_in_the_app($this->parse_element_locator('"Skip"'));
}
// Login screen found.
@ -431,7 +429,7 @@ class behat_app extends behat_base {
global $CFG;
$this->i_set_the_field_in_the_app($this->islegacy ? 'campus.example.edu' : 'Your site', $CFG->wwwroot);
$this->i_press_in_the_app($this->islegacy ? 'Connect!' : 'Connect to your site');
$this->i_press_in_the_app($this->parse_element_locator($this->islegacy ? '"Connect!"' : '"Connect to your site"'));
$this->wait_for_pending_js();
}
@ -448,7 +446,7 @@ class behat_app extends behat_base {
// Note there are two 'Log in' texts visible (the title and the button) so we have to use
// a 'near' value here.
$this->i_press_in_the_app('Log in', 'Forgotten');
$this->i_press_in_the_app($this->parse_element_locator('"Log in" near "Forgotten"'));
// Wait until the main page appears.
$this->spin(
@ -467,18 +465,21 @@ class behat_app extends behat_base {
/**
* Presses standard buttons in the app.
*
* @Given /^I press the (?P<button_name>back|main menu|page menu) button in the app$/
* @Given /^I press the (back|main menu|page menu) button in the app$/
* @param string $button Button type
* @throws DriverException If the button push doesn't work
*/
public function i_press_the_standard_button_in_the_app(string $button) {
$this->spin(function($context, $args) use ($button) {
$result = $this->evaluate_script("return window.behat.pressStandard('{$button}');");
$this->spin(function() use ($button) {
$result = $this->evaluate_script("return window.behat.pressStandard('$button');");
if ($result !== 'OK') {
throw new DriverException('Error pressing standard button - ' . $result);
}
return true;
});
$this->wait_for_pending_js();
}
@ -519,13 +520,16 @@ class behat_app extends behat_base {
* @throws DriverException If there isn't a popup to close
*/
public function i_close_the_popup_in_the_app() {
$this->spin(function($context, $args) {
$this->spin(function() {
$result = $this->evaluate_script("return window.behat.closePopup();");
if ($result !== 'OK') {
throw new DriverException('Error closing popup - ' . $result);
}
return true;
});
$this->wait_for_pending_js();
}
@ -535,13 +539,24 @@ class behat_app extends behat_base {
* Note it is difficult to use the standard 'click on' or 'press' steps because those do not
* distinguish visible items and the app always has many non-visible items in the DOM.
*
* @Then /^I press "(?P<text_string>(?:[^"]|\\")*)"(?: near "(?P<near_string>(?:[^"]|\\")*)")? in the app$/
* @param string $text Text identifying click target
* @param string $near Text identifying a nearby unique piece of text
* @Then /^I press (".+") in the app$/
* @param object $locator Element locator
* @throws DriverException If the press doesn't work
*/
public function i_press_in_the_app($text, $near='') {
$this->press($text, $near);
public function i_press_in_the_app(object $locator) {
$locatorjson = json_encode($locator);
$this->spin(function() use ($locatorjson) {
$result = $this->evaluate_script("return window.behat.press($locatorjson);");
if ($result !== 'OK') {
throw new DriverException('Error pressing item - ' . $result);
}
return true;
});
$this->wait_for_pending_js();
}
/**
@ -551,34 +566,32 @@ class behat_app extends behat_base {
* with JavaScript, and clicks may not work until they are initialized properly which may cause flaky tests due
* to race conditions.
*
* @Then /^I (?P<select_string>unselect|select) "(?P<text_string>(?:[^"]|\\")*)"(?: near "(?P<near_string>(?:[^"]|\\")*)")? in the app$/
* @param string $selectedtext Select/unselect string
* @param string $text Text identifying click target
* @param string $near Text identifying a nearby unique piece of text
* @Then /^I (unselect|select) (".+") in the app$/
* @param string $selectedtext
* @param object $locator
* @throws DriverException If the press doesn't work
*/
public function i_select_in_the_app(string $selectedtext, string $text, string $near = '') {
public function i_select_in_the_app(string $selectedtext, object $locator) {
$selected = $selectedtext === 'select' ? 'YES' : 'NO';
$text = addslashes_js($text);
$near = addslashes_js($near);
$locatorjson = json_encode($locator);
$this->spin(function() use ($selectedtext, $selected, $text, $near) {
$this->spin(function() use ($selectedtext, $selected, $locatorjson) {
// Don't do anything if the item is already in the expected state.
$result = $this->evaluate_script("return window.behat.isSelected(\"$text\", \"$near\");");
$result = $this->evaluate_script("return window.behat.isSelected($locatorjson);");
if ($result === $selected) {
return true;
}
// Press item.
$result = $this->evaluate_script("return window.behat.press(\"$text\", \"$near\");");
$result = $this->evaluate_script("return window.behat.press($locatorjson);");
if ($result !== 'OK') {
throw new DriverException('Error pressing item - ' . $result);
}
// Check that it worked as expected.
$result = $this->evaluate_script("return window.behat.isSelected(\"$text\", \"$near\");");
$result = $this->evaluate_script("return window.behat.isSelected($locatorjson);");
switch ($result) {
case 'YES':
@ -606,54 +619,31 @@ class behat_app extends behat_base {
return !is_null($logininput);
}
/**
* Clicks on / touches something that is visible in the app, near some other text.
*
* If the $near is specified then when there are multiple matches, it picks the one
* nearest (in DOM terms) $near. $near should be an exact match, or a partial match that only
* has one result.
*
* @param behat_base $base Behat context
* @param string $text Text identifying click target
* @param string $near Text identifying a nearby unique piece of text
* @throws DriverException If the press doesn't work
*/
protected function press(string $text, string $near = '') {
$text = addslashes_js($text);
$near = addslashes_js($near);
$this->spin(function() use ($text, $near) {
$result = $this->evaluate_script("return window.behat.press(\"$text\", \"$near\");");
if ($result !== 'OK') {
throw new DriverException('Error pressing item - ' . $result);
}
return true;
});
$this->wait_for_pending_js();
}
/**
* Sets a field to the given text value in the app.
*
* Currently this only works for input fields which must be identified using a partial or
* exact match on the placeholder text.
*
* @Given /^I set the field "(?P<field_name>(?:[^"]|\\")*)" to "(?P<text_string>(?:[^"]|\\")*)" in the app$/
* @Given /^I set the field "((?:[^"]|\\")+)" to "((?:[^"]|\\")+)" in the app$/
* @param string $field Text identifying field
* @param string $value Value for field
* @throws DriverException If the field set doesn't work
*/
public function i_set_the_field_in_the_app(string $field, string $value) {
$this->spin(function($context, $args) use ($field, $value) {
$result = $this->evaluate_script('return window.behat.setField("' .
addslashes_js($field) . '", "' . addslashes_js($value) . '");');
$field = addslashes_js($field);
$value = addslashes_js($value);
$this->spin(function() use ($field, $value) {
$result = $this->evaluate_script("return window.behat.setField(\"$field\", \"$value\");");
if ($result !== 'OK') {
throw new DriverException('Error setting field - ' . $result);
}
return true;
});
$this->wait_for_pending_js();
}
@ -662,7 +652,7 @@ class behat_app extends behat_base {
*
* This can be used to see if the app went to the expected page.
*
* @Then /^the header should be "(?P<text_string>(?:[^"]|\\")*)" in the app$/
* @Then /^the header should be "((?:[^"]|\\")+)" in the app$/
* @param string $text Expected header text
* @throws DriverException If the header can't be retrieved
* @throws ExpectationException If the header text is different to the expected value
@ -690,12 +680,10 @@ class behat_app extends behat_base {
/**
* Check that the app opened a new browser tab.
*
* @Given /^the app should(?P<not_boolean> not)? have opened a browser tab$/
* @param string $not
* @Given /^the app should( not)? have opened a browser tab$/
* @param bool $not
*/
public function the_app_should_have_opened_a_browser_tab($not = '') {
$not = !empty($not);
public function the_app_should_have_opened_a_browser_tab(bool $not) {
$this->spin(function() use ($not) {
$openedbrowsertab = count($this->getSession()->getWindowNames()) === 2;
@ -748,11 +736,48 @@ class behat_app extends behat_base {
/**
* Switch navigator online mode.
*
* @Given /^I switch offline mode to "(?P<offline_string>(?:[^"]|\\")*)"$/
* @Given /^I switch offline mode to "(true|false)"$/
* @param string $offline New value for navigator online mode
* @throws DriverException If the navigator.online mode is not available
*/
public function i_switch_offline_mode(string $offline) {
$this->execute_script('appProvider.setForceOffline(' . $offline . ');');
$this->execute_script("appProvider.setForceOffline($offline);");
}
/**
* Parse an element locator string.
*
* @Transform /^".+"$/
* @param string $text Element locator string.
* @return object
*/
public function parse_element_locator($text): object {
preg_match('/^"((?:[^"]|\\")+?)"(?: "([^"]+?)")?(?: near "((?:[^"]|\\")+?)"(?: "([^"]+?)")?)?$/', $text, $matches);
$locator = [
'text' => str_replace('\\"', '"', $matches[1]),
'selector' => $matches[2] ?? null,
];
if (!empty($matches[3])) {
$locator['near'] = (object) [
'text' => str_replace('\\"', '"', $matches[3]),
'selector' => $matches[4] ?? null,
];
}
return (object) $locator;
}
/**
* Parse a negation string.
*
* @Transform /^not $/
* @param string $not Negation string.
* @return bool
*/
public function parse_negation(string $not): bool {
return !empty($not);
}
}