Capybara identify element that hosts shadow-root - capybara

Question

I am trying to write a test that validates and confirms add-ons in a cart flow. One page I'm having difficulty with loads the page, and has a checkbox I need to hit that's within a shadow root. I can identify some of the highest level components on the page and am stuck trying to get to one in particular.
I have a byebug where I'm trying in the flow of the test and at the page in question.
Running "sales_channels_reg.regsaver_section.regsaver_testtest.text(:all)". returns:
"Show Progress Welcome Who Are You Registering? Information Review Suggested Add-Ons Shopping Cart Checkout Confirmation Zach Partyka Demo Site Suggested Add-Ons Loading... Loading... #displayBodyHeader { display: none !important } $j(document).ready(function () { listenForEventsFromSalesChannelsElement(); function listenForEventsFromSalesChannelsElement() { document.getElementById('sales-channels-element').addEventListener('outputEvent', function(event) { switch (event.detail.type) { case 'registration': registerAnotherOrContinueToCheckout(event.detail); break; case 'analytics': handleAnalyticsEvents(event.detail); break; } }); } function registerAnotherOrContinueToCheckout(eventDetail) { if (eventDetail.action === 'registerAnother') $j('.js-register-another-button').click(); else if (eventDetail.action === 'continue') $j('.js-continue-button').click(); } function handleAnalyticsEvents(eventDetail) { const railsEnv = 'production'; if (railsEnv === 'development') return; // SeMParticle only works for staging and production. switch (eventDetail.action) { case 'pageView': setCookie(\"surveySport\", eventDetail.pageAttributes.survey_sport , 1); setCookie(\"surveyType\", encodeURIComponent(eventDetail.pageAttributes.survey_type), 1); setCookie(\"surveyRegistrantType\", eventDetail.pageAttributes.survey_registrant_type, 1); setCookie(\"surveyParticipantType\", eventDetail.pageAttributes.survey_participant_type, 1); setCookie(\"surveyParticipantDOB\", eventDetail.pageAttributes.survey_participant_dob , 1); setCookie(\"surveyParticipantGender\", eventDetail.pageAttributes.survey_participant_gender, 1); setCookie(\"bossOrganizationId\", encodeURIComponent(eventDetail.pageAttributes.boss_organization_id), 1); setCookie(\"bossOrganizationName\", encodeURIComponent(eventDetail.pageAttributes.boss_organization_name), 1); setCookie(\"bossOrganizationAddrState\", encodeURIComponent(eventDetail.pageAttributes.boss_organization_addrState), 1); setCookie(\"bossOrganizationSports\", encodeURIComponent(eventDetail.pageAttributes.boss_organization_sports), 1); window.SeMParticle.pageView(eventDetail.pageAttributes); break; case 'logImpression': window.SeMParticle.logImpression(eventDetail.pageAttributes, eventDetail.productAttributes, 'SalesChannelsImpression'); break; case 'addToCart': window.SeMParticle.addToCart(eventDetail.pageAttributes, eventDetail.productAttributes); break; } } function setCookie(name,value,exp_days) { var d = new Date(); d.setTime(d.getTime() + (exp_days*24*60*60*1000)); var expires = \"expires=\" + d.toGMTString(); document.cookie = name + \"=\" + value + \";\" + expires + \";path=/;domain=.sportngin.com\"; } });"
But running "sales_channels_reg.regsaver_section.regsaver_testtest.find(:css, "#sales-channels-element__container").text(:all)" returns only the "Loading... Loading..." text above the shadow-root div
The part I need help with is I don't know why I can't I dig to the div element that has the shadow-root? I've tried using find_element for :id, :css, lots of "sleep()" to let the page load, etc., but still stuck there
The Code for trying to target the test in particular:
-first file-
describe "Showing 4 max add-ons in reg flow", type: :feature, service: "sales_channels1" do
context "yadda yadda" do
subject(:sales_channels_reg) { SalesChannelsRegGenerals.new }
subject(:se_signup_page) { SELogin.new }
# subject(:gen_reg) { RegistrationHelper.new }
let(:form_number) { "848624247" }
it "in test flow does thing" do
couple of other steps first
byebug (where I'm at in the code now)
end
end
end
-different file-
require "./spec/page_models/sales_channels_ncsa_section.rb"
require "./spec/page_models/sales_channels_medsaver_section.rb"
require "./spec/page_models/sales_channels_regsaver_section.rb"
require "./spec/page_models/sales_channels_four_addons_section.rb"
class SalesChannelsRegGenerals < SitePrism::Page
set_url "https://zachpartyka#{SeleniumTest.ngin_site}/register/form/{/form_number}"
section :regsaver_section, RegSaverSection, "div#siteContainer2"
end
-different file-
class RegSaverSection < SitePrism::Section
element :regsaver_testtest, "#pageContentContainer"
end
The HTML for this section is (see attached pic for clearer picture):
<div id="pageContentContainer" class="clearfix" xpath="1">
::before[![enter image description here][1]][1]
<div id="panelOne">
<div class="subNavContainer">
<div id="sequenceMenu">
<div id="sub-nav-toggle" class="sub-nav-toggle">
<span class="sub-nav-toggle-text">Show Progress</span>
</div>
<div class="subNav noHeader">
<ul id="formsBin" class="steps">
<li class="enabled complete">Welcome</li>
<li class="enabled complete">Who Are You Registering?</li>
<li id="form_2959222" class="enabled complete">Information</li>
<li class="enabled complete">Review</li>
<li class="enabled selected"><span>Suggested Add-Ons</span></li>
<li class="enabled incomplete"><span>Shopping Cart</span></li>
<li class="enabled incomplete"><span>Checkout</span></li>
<li class="enabled incomplete"><span>Confirmation</span></li>
</ul>
</div>
</div>
</div>
</div>
<div id="panelTwo">
<div id="displayBodyContent">
<div id="flashNotice">
</div>
<div id="yieldContent">
<h2 id="displayBodyHeader" class=""><span>Zach Partyka Demo Site Suggested Add-Ons</span></h2>
<div id="sales-channels-element__container" style="">
<sales-channels-element id="sales-channels-element" context="{"multipleRegistrations":{"enabled":true,"buttonLabel":"Register Another person"},"mode":"user","userId":"49dd822a5d654085a5e4b435b83265cc","bossOrganization":{"id":230482,"name":"Sales Channels Test Org"},"guestKey":"9553ee6b1c99c47deda474f5fb09a074c8820b6188b1ac7031f4452546386b27","enabledSalesChannels":["MedSaver","Skills","PitchTrackerBaseball","PitchTrackerSoftball","RegSaver","Ncsa"],"participant":{"firstName":"baseballpitchtracker","lastName":"child","gender":"male","dob":"01/01/2006","address":{"address1":"45645 buttsville","address2":null,"state":"mn","city":"burning","zip":"55418","country":"US"},"email":"selenium+actionable_redirect#sportngin.com","phoneNumber":"6515555555","graduationYear":null},"registrant":{"firstName":"Actionable","lastName":"Redirect","dob":"01/01/1990","address":{"address1":"2345 Foo Bar Circle","address2":null,"state":"MN","city":"Testingville","zip":"55428","country":"US"},"email":"selenium+actionable_redirect#sportngin.com","phoneNumber":"6515555555"},"requestDetails":{"eventType":"Multiple","eventCost":10.0,"programStartDate":"12/22/2021","programEndDate":"12/22/2022","paymentDate":"12/21/2021","sport":"Baseball","submittedBy":"parent"},"analyticsPageAttributes":{"depth1":"Sitebuilder","depth2":"Registration","depth3":"SalesChannels","survey_sport":"Baseball","survey_type":"Event","survey_registrant_type":"parent","survey_participant_type":"athlete","survey_participant_dob":"01/01/2006","survey_participant_gender":"male"},"analyticsEventAttributes":{"event_action_sports":"Baseball","event_action_genders":"male","event_action_dobs":"01/01/2006","event_type":1,"action":"Click","bossOrganizationId":230482,"bossOrganizationName":"Sales Channels Test Org","bossOrganizationAddrState":"MN","bossOrganizationSports":"baseball"}}" ng-version="10.2.5" style=""></sales-channels-element>
<div style="display: none;">
<br>
<div class="pageElement">
<div class="surveyButtonWrap" style="margin-left:0;text-align: center;">
<div style="display: inline-block;text-align: right;">
<form class="button_to" method="post" action="/survey/register_another_person/591168"><input waiting_class="submitProcess pageElement" style="text-transform:capitalize;" class="button-large js-register-another-button" id="processing_link" type="submit" value="Register Another person"><input type="hidden" name="authenticity_token" value="lBrd9OZaA7siTgHe8WYjV3LSqYKUGthsNloEKiMMVeypQUcTUVq/AxLjEjQv0i+Y79R4YPQOMcrlGGwxos/gJw=="></form><div id="waiting_textprocessing_link" style="display:none;" class="pl-overlay"><div class="pl-progress__container"><p class="pl-progress__label">Loading...</p><div class="pl-progress"><div role="progressbar" class="pl-progress__bar--indeterminate"></div></div></div></div>
</div>
<div style="display: inline-block; text-align: left;">
<form class="button_to" method="post" action="/cart/add?from_step=85"><input class="button-large button-siteColor button-default js-continue-button" id="processing_link" type="submit" value="Continue"><input type="hidden" name="authenticity_token" value="lBrd9OZaA7siTgHe8WYjV3LSqYKUGthsNloEKiMMVeypQUcTUVq/AxLjEjQv0i+Y79R4YPQOMcrlGGwxos/gJw=="></form><div id="waiting_textprocessing_link" style="display:none;" class="pl-overlay"><div class="pl-progress__container"><p class="pl-progress__label">Loading...</p><div class="pl-progress"><div role="progressbar" class="pl-progress__bar--indeterminate"></div></div></div></div>
</div>
</div>
</div>
<div class="clearAll"></div>
</div>
</div>
<style>#displayBodyHeader { display: none !important }</style>
<script type="text/javascript" src="https://se-sales-channels.ui.sportsengine.com/sales-channels-element.js"></script>
<script>
$j(document).ready(function () {
listenForEventsFromSalesChannelsElement();
function listenForEventsFromSalesChannelsElement() {
document.getElementById('sales-channels-element').addEventListener('outputEvent', function(event) {
switch (event.detail.type) {
case 'registration':
registerAnotherOrContinueToCheckout(event.detail);
break;
case 'analytics':
handleAnalyticsEvents(event.detail);
break;
}
});
}
function registerAnotherOrContinueToCheckout(eventDetail) {
if (eventDetail.action === 'registerAnother') $j('.js-register-another-button').click();
else if (eventDetail.action === 'continue') $j('.js-continue-button').click();
}
function handleAnalyticsEvents(eventDetail) {
const railsEnv = 'production';
if (railsEnv === 'development') return; // SeMParticle only works for staging and production.
switch (eventDetail.action) {
case 'pageView':
setCookie("surveySport", eventDetail.pageAttributes.survey_sport , 1);
setCookie("surveyType", encodeURIComponent(eventDetail.pageAttributes.survey_type), 1);
setCookie("surveyRegistrantType", eventDetail.pageAttributes.survey_registrant_type, 1);
setCookie("surveyParticipantType", eventDetail.pageAttributes.survey_participant_type, 1);
setCookie("surveyParticipantDOB", eventDetail.pageAttributes.survey_participant_dob , 1);
setCookie("surveyParticipantGender", eventDetail.pageAttributes.survey_participant_gender, 1);
setCookie("bossOrganizationId", encodeURIComponent(eventDetail.pageAttributes.boss_organization_id), 1);
setCookie("bossOrganizationName", encodeURIComponent(eventDetail.pageAttributes.boss_organization_name), 1);
setCookie("bossOrganizationAddrState", encodeURIComponent(eventDetail.pageAttributes.boss_organization_addrState), 1);
setCookie("bossOrganizationSports", encodeURIComponent(eventDetail.pageAttributes.boss_organization_sports), 1);
window.SeMParticle.pageView(eventDetail.pageAttributes);
break;
case 'logImpression':
window.SeMParticle.logImpression(eventDetail.pageAttributes, eventDetail.productAttributes, 'SalesChannelsImpression');
break;
case 'addToCart':
window.SeMParticle.addToCart(eventDetail.pageAttributes, eventDetail.productAttributes);
break;
}
}
function setCookie(name,value,exp_days) {
var d = new Date();
d.setTime(d.getTime() + (exp_days*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = name + "=" + value + ";" + expires + ";path=/;domain=.sportngin.com";
}
});
</script>
</div>
<div class="clearAll"></div>
</div>
</div>
</div>

Answer 1

You need to use evaluate_script rather than execute_script or the returned value won't get unwrapped into an element that can be used.
evaluate_script("arguments[0].shadowRoot", ...)

Answer 2

As it turns out, I didn't do a thorough enough investigation. The element was not visible, and I didn't try using visible? along with find_element. The solution to selecting the shadow root - and then digging within it was as follows:
sales_channels_reg.execute_script("return arguments[0].shadowRoot", sales_channels_reg.regsaver_section.regsaver_testtest.find("#sales-channels-element", visible: false)).find('#addToCart--false')