Is there a way to pick elements in a website like this?

I’ve never seen this before. It’s a Service Now website that has something called macroponent and another thing called #shadow-root, and everything is inside of the macroponent. The bot simply cannot identify any of the elements. I’ve tried the browser picker, I’ve tried XPath, I’ve tried copying the full XPath of the element I need the bot to click on, but nothing works. Even when I search on devtools, nothing is found. I can see the XPath is correct, but devtools doesn’t find anything.

Has anyone here dealt with this before? Do you know how I can deal with this?

Here is the macroponent I have copied from the website:

<macroponent-f51912f4c700201072b211d4d8c26010 component-id="laesurj" macroponent-namespace="laesurj" app-id="a84adaf4c700201072b211d4d8c260b7" global-navigation-config="{
  &quot;features&quot;: {
    &quot;record&quot;: {
      &quot;_default&quot;: {
        &quot;experiencePriorityList&quot;: [
        ]
      }
    },
    &quot;list&quot;: {
      &quot;_default&quot;: {
        &quot;experiencePriorityList&quot;: [
          {
            &quot;name&quot;: &quot;Polaris App&quot;,
            &quot;sysId&quot;: &quot;a84adaf4c700201072b211d4d8c260b7&quot;
          }
        ]
      }
    },
    &quot;search&quot;: {
      &quot;_default&quot;: {
        &quot;experiencePriorityList&quot;: [
          {
            &quot;name&quot;: &quot;Polaris App&quot;,
            &quot;sysId&quot;: &quot;a84adaf4c700201072b211d4d8c260b7&quot;
          }
        ]
      }
    },
    &quot;inbox&quot;:{
      &quot;_default&quot;: {
        &quot;experiencePriorityList&quot;: [
          {
            &quot;name&quot;: &quot;Service Operations Workspace&quot;,
            &quot;sysId&quot;: &quot;aa881cad73c4301045216238edf6a716&quot;
          },
          {
            &quot;name&quot;: &quot;CSM/FSM Configurable Workspace&quot;,
            &quot;sysId&quot;: &quot;c4e321a3530210102c30ddeeff7b12f6&quot;
          }
        ]
      }
    }
  }
}" evaluated-data-brokers="{&quot;polaris_app_shell_header_company_logo&quot;:[{&quot;errors&quot;:[],&quot;executionResult&quot;:{&quot;output&quot;:{&quot;result&quot;:{&quot;imgSrc&quot;:&quot;1b13f35a1b542550ad1f98e13a4bcb42.iix&quot;}}},&quot;executionTime&quot;:9,&quot;parentResourceId&quot;:null,&quot;status&quot;:200,&quot;sysId&quot;:&quot;a4367e327782a1108c7921e9ff5a9934&quot;}],&quot;polaris_app_shell_menu_headers&quot;:[{&quot;errors&quot;:[],&quot;executionResult&quot;:{&quot;output&quot;:{&quot;result&quot;:[{&quot;template&quot;:&quot;tree&quot;,&quot;order&quot;:1,&quot;label&quot;:&quot;Todos &quot;,&quot;id&quot;:&quot;d6e462a5c3533010cbd77096e940dd8c&quot;},{&quot;template&quot;:&quot;favoriteList&quot;,&quot;order&quot;:2,&quot;label&quot;:&quot;Favoritos&quot;,&quot;id&quot;:&quot;1b682fe1c3133010cbd77096e940dd18&quot;},{&quot;template&quot;:&quot;historyList&quot;,&quot;order&quot;:3,&quot;label&quot;:&quot;Histórico&quot;,&quot;id&quot;:&quot;c51543a5c3133010cbd77096e940dd43&quot;},{&quot;template&quot;:&quot;tree&quot;,&quot;order&quot;:4,&quot;label&quot;:&quot;Espaços&quot;,&quot;id&quot;:&quot;63242b61c3133010cbd77096e940dd23&quot;,&quot;subItems&quot;:[{&quot;label&quot;:&quot;CSA&quot;,&quot;id&quot;:&quot;2f2ff33218b2a5106d3d9db6615a1451&quot;,&quot;icon&quot;:&quot;&quot;,&quot;route&quot;:{&quot;title&quot;:&quot;home&quot;,&quot;url&quot;:&quot;x/asat/default-csm/home&quot;,&quot;route&quot;:&quot;home&quot;,&quot;context&quot;:{&quot;path&quot;:&quot;x/asat/default-csm&quot;,&quot;experienceName&quot;:&quot;CSA&quot;}}}],&quot;collapseOnSingleItem&quot;:true}]}},&quot;executionTime&quot;:6,&quot;parentResourceId&quot;:null,&quot;status&quot;:200,&quot;sysId&quot;:&quot;820111939742e510c59bfdd3a253afbc&quot;}],&quot;polaris_user_settings_access_query&quot;:[{&quot;errors&quot;:[],&quot;executionResult&quot;:{&quot;output&quot;:{&quot;data&quot;:{&quot;GlideUserSettingsAccess_Query&quot;:{&quot;userSettingsAccess&quot;:{&quot;showApplicationPicker&quot;:false,&quot;showUpdateSetPicker&quot;:false,&quot;showDomainPicker&quot;:false,&quot;showEncryptionPicker&quot;:false,&quot;showCryptoModulePicker&quot;:false}}}}},&quot;executionTime&quot;:1,&quot;parentResourceId&quot;:null,&quot;status&quot;:200,&quot;sysId&quot;:&quot;79c9fd62c7113010099a308dc7c260f1&quot;}],&quot;polaris_app_shell_header_logo_target&quot;:[{&quot;errors&quot;:[],&quot;executionResult&quot;:{&quot;output&quot;:{&quot;data&quot;:{&quot;GlideHeaderLogo_Query&quot;:{&quot;getLogoURL&quot;:{&quot;external&quot;:false,&quot;target&quot;:&quot;gsft_main&quot;,&quot;url&quot;:&quot;home.do&quot;,&quot;type&quot;:&quot;classic&quot;}}}}},&quot;executionTime&quot;:1,&quot;parentResourceId&quot;:null,&quot;status&quot;:200,&quot;sysId&quot;:&quot;b67e4b90c7003010099a308dc7c26094&quot;}]}" now-id="laesurj"></macroponent-f51912f4c700201072b211d4d8c26010>

This is a glimpse of the shaodw-root:

Here is the element I need the bot to click on:

<div id="d6e462a5c3533010cbd77096e940dd8c" role="button" class="sn-polaris-tab can-animate polaris-enabled" tabindex="0" aria-expanded="false" aria-label="Todos " unpinnedleft="100.171875" style="position: absolute; margin-inline-end: 0px; left: 100.172px;">Todos </div>

Here is the full XPath of the element:

/html/body/macroponent-f51912f4c700201072b211d4d8c26010//div/sn-canvas-appshell-root/sn-canvas-appshell-layout/sn-polaris-layout//div[2]/div[2]/div[1]/sn-polaris-header//nav/div/div[1]/div[2]/div[1]

I know I can use images and coordinates, but I’d like to stick to elements as much as possible. I have no idea about how to make this work. Can somebody help me? Thank you!

Hey there,

Could you share the link to the website or portal? I’d like to take a detailed look. Sometimes the button or element we need might be disabled or not on the main screen. Checking these circumstances will help me provide better assistance.