proof of concept idea for "By"

[brad-decker]

Playwright supports chaining selectors together in string format. Example:

page.click('css=nav >> text=Login');

Java versions of selenium-webdriver support chaining By methods using ByChained, but that doesn't appear to have a corollary in js.

This proposal creates a new By class that composes selectors together and turns them into an xpath selector at the end (for selenium). Once every usage of selenium's By() is replaced with our By() we can remove the call to toSelector() at the end and have that be the job of our Driver's various element methods.

Once we're ready for playwright we can change how the chaining occurs because we don't need xpaths, we can remove the dependency added in this PR and combine selectors using string concatenation with >>.

[brad-decker]

ignore this lol, for local testing :P

[rekmarks]

If we're migrating to Playwright (are we?), how do these changes track with their API?

As for the By abstraction, it is definitively nicer than typing out xpath strings, lol.

[brad-decker]

If we're migrating to Playwright (are we?), how do these changes track with their API?

I laid out the plan for making this a thing we can use with Playwright in the description. Essentially we just change the internals of By to concatenate strings differently and it won't use xpaths at all

[brad-decker]

now to figure out why this works locally and not in test environment 🤦🏻‍♂️

[Gudahtt]

I don't know how this works on Playwright, but on Selenium I've been trying to avoid using xpath because I've heard it was fairly slow in comparison to ID or CSS selectors. Normalizing to xpath might make things slower? Not sure 🤔

[brad-decker]

til

[Gudahtt]

This seems like a viable idea!

The one alternative I've considered is passing in a plain object, where the key represents the different attributes you're selecting by, e.g. driver.clickElement({ tag: 'button', text: 'Confirm' }).

Or maybe something simpler to implement, where only 1 key is allowed and it represents the selector type, like driver.clickElement({ xpath: '...' }).

[brad-decker]

so remove the usage of By altogether in favor of making the selector functions in Driver more robust? @Gudahtt

[tmashuang]

I thought the motivation to switch to Playwright was to not have to create custom wrappers for everything?

The one alternative I've considered is passing in a plain object, where the key represents the different attributes you're selecting by, e.g. driver.clickElement({ tag: 'button', text: 'Confirm' }).

This can be done in Playwright.

await page.click('article:has-text("Playwright")');

[brad-decker]

would that be different than tag=article >> text=Playwright @tmashuang ? The reason I ask is because the latter is easier to reason about in terms of combining terms

[rekmarks]

I laid out the plan for making this a thing we can use with Playwright in the description.

Don't mind me 🤦

[tmashuang]

The chaining could be more robust to include more selectors, and the combination could be limited to a certain number.

[brad-decker]

@tmashuang -- the task i'm working on is extracting the selenium portions of the tests into our own wrapper... which was meant to ease the transition into playwright. Presumably the next piece would be switching out our abstraction from using selenium to using playwright. how about this:

  clickElement(selector: string | SelectorObject) {
    if (typeof selector === 'string') {
      return seleniumImplementation(By.css(selector));
      // playwright will be something like this.page.click(selector);
    } else {
      // do other magic here.
    }
  }

[brad-decker]

@tmashuang @Gudahtt take a look at the latest commit which includes a change that would allow us to pass in fully powered playwright selectors as strings, and in the interim pass in css selectors as strings for selenium, and take advantage of the aforementioned xpath/ text/tag combos. I only did half the from file, because the implementation also accepts By locators, so I could merge just the webdriver portion in and break apart the other transformations into separate PRs.

[Gudahtt]

What was this branch for?

[brad-decker]

Selenium locators have a .value prop,

[Gudahtt]

I like this idea - it seems very compatible with both selenium and playwright selector APIs.

[brad-decker]

Thanks @Gudahtt! this has been superseded by #10802