add within_shadow_dom

[superchris]

This PR is not ready yet, but I wanted to begin discussion about it. For those of us using custom elements on an Elixir/Phoenix project, having a way to write feature tests that interact with them is essential. This PR adds a within_shadow_dom function to do just that. My questions are: Should this go in the Driver behaviour? If not, is there a way to expose driver specific functions (eg only support this in Chrome)?

[mhanberg]

Hi!

I'm currently on vacation, but I'll be able to take a look next week.

If I don't chime in, by next weekend feel free to ping me.

[mhanberg]

Plopping this here for posterity: https://groups.google.com/g/ruby-capybara/c/pWJEk7y2NM8/m/-niMWeQTCQAJ

[codecov-commenter]

Codecov Report

Merging #615 (597c393) into main (5e02d94) will decrease coverage by 46.52%. The diff coverage is 57.14%.

:exclamation: Current head 597c393 differs from pull request most recent head 46c7292. Consider uploading reports for the commit 46c7292 to get more accurate results

@@             Coverage Diff             @@
##             main     #615       +/-   ##
===========================================
- Coverage   88.04%   41.51%   -46.53%     
===========================================
  Files          24       24               
  Lines         995     1002        +7     
===========================================
- Hits          876      416      -460     
- Misses        119      586      +467     

Flag	Coverage Δ
IntegrationTest	?
UnitTest	41.51% <57.14%> (-0.30%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
lib/wallaby/browser.ex	9.86% <0.00%> (-84.68%)	:arrow_down:
lib/wallaby/webdriver_client.ex	83.04% <100.00%> (-16.37%)	:arrow_down:
lib/wallaby/driver/log_checker.ex	0.00% <0.00%> (-100.00%)	:arrow_down:
lib/wallaby/query/xpath.ex	4.76% <0.00%> (-95.24%)	:arrow_down:
lib/wallaby/chrome.ex	8.33% <0.00%> (-87.97%)	:arrow_down:
lib/wallaby/element.ex	0.00% <0.00%> (-75.00%)	:arrow_down:
lib/wallaby/exceptions.ex	25.00% <0.00%> (-75.00%)	:arrow_down:
lib/wallaby/feature.ex	0.00% <0.00%> (-74.08%)	:arrow_down:
lib/wallaby/driver/log_store.ex	18.18% <0.00%> (-63.64%)	:arrow_down:
... and 10 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 196d0d6...46c7292. Read the comment docs.

[mhanberg]

@superchris I believe shadow root functionality has been added to Chrome 101 (which I think will drop very soon), so it would great if this could be ported to using the builtin endpoints.

• https://w3c.github.io/webdriver/#shadow-root
• https://w3c.github.io/webdriver/#get-element-shadow-root
• https://w3c.github.io/webdriver/#find-elements-from-shadow-root
• https://w3c.github.io/webdriver/#find-element-from-shadow-root

It currently is not available for Firefox 101 or Safari, but I suspect they will come soon.

• https://wpt.fyi/results/webdriver/tests?label=experimental&label=master&aligned

[mhanberg]

@superchris I think shadow root support is in the webdrivers now, would you want to take a crack at adding support for it? If not I can take care of this soon.

Basically just need to add functions to hit the various shadow root related endpoints in the webdriver spec https://w3c.github.io/webdriver/#find-element-from-shadow-root

[superchris]

Hey, long pause, but finally getting some cycles to look into this today. Just wanted to check and see if anyone had already done this before I dive in, but doesn't look like it. Let me know if you have any advice on getting me pointed in the right direction

[mhanberg]

I have done zero work, so you're in the clear there!

I think the best place to start would be the w3c link i posted above. More or less, there are new endpoints in the webdriver that allow you to query and do stuff with shadow roots.

So, you would add code into the two adapter modules to hit those endpoints, and add functions to the Browser module to use those new functions to do what you want with the shadow roots.

Once you become familiar with it, I would suggest leaving a comment with your proposed API additions, and we can see how they flow with the rest of Wallaby.

I appreciate the effort here, thanks!

[superchris]

Cool, my plan right now is to add find_shadow on browser and driver. I'll add a test as well. Let me know if that seems reasonable

[mhanberg]

That could be a good place to start.

One idea I just had was to create a shadow function on the Query module or add a :shadow option to the functions and struct, and the Browser.find function can branch based on the query.

Something like (copying the find/2 documentation for this example)

session
|> find(Query.shadow("#login-button"))
|> assert_text("Login")

# or something like

buttons =
  session
  |> find(Query.css(".login-button", count: 2, text: "Login", shadow: true))

[superchris]

We went a slightly different direction but it seems to work pretty well, closing this PR and will push a new one.