* In web automation testing, locators are crucial commands that guide the framework to identify * and select HTML elements on a webpage for interaction. They play a vital role in executing various * actions such as clicking buttons, filling text, or retrieving data from web pages. * * bu
(locator)
| 233 | * await driver.findClickableElement({ text: 'Confirm', tag: 'button' }); |
| 234 | */ |
| 235 | buildLocator(locator) { |
| 236 | if (typeof locator === 'string') { |
| 237 | // If locator is a string we assume its a css selector |
| 238 | return By.css(locator); |
| 239 | } else if (locator.css && locator.value) { |
| 240 | // Providing both css and value props will use xpath to look for an element |
| 241 | // matching the CSS selector with a specific value attribute. |
| 242 | const quotedValue = quoteXPathText(locator.value); |
| 243 | const baseXpath = cssToXPath.parse(locator.css).toXPath(); |
| 244 | // Handle both cases: XPaths with predicates ending in ']' and simple XPaths without predicates |
| 245 | const xpath = baseXpath.endsWith(']') |
| 246 | ? baseXpath.replace(/\]$/u, ` and @value=${quotedValue}]`) |
| 247 | : `${baseXpath}[@value=${quotedValue}]`; |
| 248 | return By.xpath(xpath); |
| 249 | } else if (locator.value) { |
| 250 | // For backwards compatibility, checking if the locator has a value prop |
| 251 | // tells us this is a Selenium locator |
| 252 | return locator; |
| 253 | } else if (locator.xpath) { |
| 254 | // Providing an xpath prop to the object will consume the locator as an |
| 255 | // xpath locator. |
| 256 | return By.xpath(locator.xpath); |
| 257 | } else if (locator.text) { |
| 258 | // If a testId prop was provided along with text, convert that to a css prop and continue |
| 259 | if (locator.testId) { |
| 260 | locator.css = `[data-testid="${locator.testId}"]`; |
| 261 | } |
| 262 | |
| 263 | // Providing a text prop, and optionally a tag or css prop, will use |
| 264 | // xpath to look for an element with the tag that has matching text. |
| 265 | if (locator.css) { |
| 266 | // When providing css prop we use cssToXPath to build a xpath string |
| 267 | // We provide two cases to check for, first a text node of the |
| 268 | // element that matches the text provided OR we test the stringified |
| 269 | // contents of the element in the case where text is split across |
| 270 | // multiple children. In the later case non literal spaces are stripped |
| 271 | // so we do the same with the input to provide a consistent API. |
| 272 | const xpath = cssToXPath |
| 273 | .parse(locator.css) |
| 274 | .where( |
| 275 | cssToXPath.xPathBuilder |
| 276 | .string() |
| 277 | .contains(locator.text) |
| 278 | .or( |
| 279 | cssToXPath.xPathBuilder |
| 280 | .string() |
| 281 | .contains(locator.text.split(' ').join('')), |
| 282 | ), |
| 283 | ) |
| 284 | .toXPath(); |
| 285 | return By.xpath(xpath); |
| 286 | } |
| 287 | |
| 288 | const quoted = quoteXPathText(locator.text); |
| 289 | // The tag prop is optional and further refines which elements match |
| 290 | return By.xpath(`//${locator.tag ?? '*'}[contains(text(), ${quoted})]`); |
| 291 | } else if (locator.testId) { |
| 292 | // Providing a testId prop will use css to look for an element with the |
no test coverage detected