Add CSS selector matcher

[bootstraponline]

Given the following input:

Matching on title or value will fail.

$x('//input[@title="Email" or @value="Email"]')
> []

Place holder matching works but it's not unique.

$x('//input[@title="Email" or @value="Email" or @placeholder="Email"]')
> [<input class=​"ic-Input" type=​"text" name=​"pseudonym_session[unique_id]​" value placeholder=​"Email">​, 
   <input class=​"ic-Input" type=​"text" name=​"pseudonym_session[unique_id_forgot]​" value placeholder=​"Email" id=​"pseudonym_session_unique_id_forgot">​]

I think we need to allow matching on arbitrary XPath selectors since there's no way to control the content of the webview.

[bootstraponline]

In Espresso, I can login via arbitrary CSS selectors or XPath.

// Espresso
String EMAIL = "input[type=\"email\"]";
String PASSWORD = "input[type=\"password\"]";

onWebView()
  .withElement(findElement(Locator.CSS_SELECTOR, EMAIL))
  .perform(webKeys("some email"))
  .withElement(findElement(Locator.CSS_SELECTOR, PASSWORD))
  .perform(webKeys("password"))

[bootstraponline]

https://gist.github.com/tirodkar/cf4a72d98264545749b063e79838fa03 looks like a good work around until the new webview APIs are ready.

[khandpur]

Would adding a css selector as a matcher address this issue? If so, we could rephrase this to sound like a feature request and add the example above as a test for the feature.

[bootstraponline]

Would adding a css selector as a matcher address this issue?

Yes.

[bootstraponline]

some notes since I've started looking into this:

Espresso serializes HTML elements to a JSON ElementReference

That looks like:

{"ELEMENT":":wdc:1490646488594"}

which is standard WebDriver.

I haven't yet figured out how to create references from a located HTML element although the following code looks promising.

• EvaluationAtom
• atomize

[bootstraponline]

Here's the code for my port of Espresso's WebView logic to Swift & EarlGrey.

• https://github.com/instructure/instructure-ios/commit/d0dcc75aee6799ea7bddcd6ae492aa5ffe79ac57

It's very much a proof of concept with most of the APIs not yet implemented. The approach is verified as working though.

[bootstraponline]

I pushed an update which adds element reference support & webKeys (typing text).

• https://github.com/instructure/instructure-ios/commit/25f82f0bb1e2f9f493a76e5406c1fb6d4d9f0d58

Example usage:

private let EMAIL_FIELD_CSS = "input[name=\"email\"]";
if let emailElement = DriverAtoms.findElement(locator: Locator.CSS_SELECTOR, value: EMAIL_FIELD_CSS) {
  DriverAtoms.webKeys(element: emailElement, value: "[email protected]")
}

[drzajwo]

I pushed an update which adds element reference support & webKeys (typing text).

• https://github.com/instructure/instructure-ios/commit/25f82f0bb1e2f9f493a76e5406c1fb6d4d9f0d58

Example usage:

private let EMAIL_FIELD_CSS = "input[name=\"email\"]";
if let emailElement = DriverAtoms.findElement(locator: Locator.CSS_SELECTOR, value: EMAIL_FIELD_CSS) {
  DriverAtoms.webKeys(element: emailElement, value: "[email protected]")
}

As we spoke on Slack, could you please update the links? Maybe I'll try to implement your solution which seems to be very interesting ;)

[bootstraponline]

https://github.com/bootstraponline/SoGrey/blob/master/SoGrey/SoGrey/DriverAtoms.swift

[tirodkar]

Do you have a matcher we could add in EG 2 as well? @bootstraponline

[bootstraponline]

I completed the experimental prototype for EarlGrey 1. I'm not sure if it works for EG2. I expect it'd need some stabilization before being mainlined. XCUITest solved the simple webview use case I cared about.

I think a larger project to port espresso web for real to EarlGrey would be nice.