当我可以参见＆＃x27;时，为什么我可以使用（c＃）Selenium by.cssselector（）访问某些Salesforce dom元素。他们在他们的遥远＆＃x27;祖先节点

Question

我正在尝试通过具有闪电组件（LWC）的Salesforce实施来编写E2E UI测试。我正在将硒与C＃一起自动进行测试。我已经成功地使用XPATH定位了目标元素，但已读到建议使用CSS选择器（用于自动测试速度和鲁棒性），因此我试图通过调用来自调用我的> > by.xpath（） to by.cssselector（）。

但是，当将CSS选择器与Salesforce一起使用时，我会看到奇怪的行为，而且我发现不可能访问DOM中的某些元素，即使我在访问（远处）祖先时可以“看到”它们。

此代码...

var cssSel = "body";
var element = wait.Until(ExpectedConditions.ElementExists(By.CssSelector(cssSel)));
Console.WriteLine(element.GetAttribute("outerHTML"));

为我提供了＆lt; body＆gt; 节点下的每个元素。一切都很好，我可以看到整个DOM结构 - 包括我要定位的元素。

然后，我可以完善搜索以说...

var cssSel = "body>div.desktop div.slds-no-print";

我得到了类似的东西……

<div class="slds-no-print oneAppNavContainer" data-aura-rendered-by="299:0;p" data-aura-class="oneAppNavContainer" style="top: 83px;">
    <one-appnav data-data-rendering-service-uid="138" data-aura-rendered-by="244:0">
        <div class="slds-context-bar">
            <div class="slds-context-bar__primary navLeft">
                <div class="slds-context-bar__item slds-context-bar_dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-no-hover">
                    <div class="appLauncher slds-context-bar__icon-action" role="navigation" aria-label="App">
                        <one-app-launcher-header class="slds-icon-waffle_container">
                            <button class="slds-button slds-show" aria-haspopup="dialog">
                                <div class="slds-icon-waffle">
                                    <div class="slds-r1"/>
                                    .
                                    .
                                    <div class="slds-r9"/>
                                    <span class="slds-assistive-text">App Launcher</span>
                                </div>
                            </button>
                        </one-app-launcher-header>
                    </div>
                    <span class="appName slds-context-bar__label-action slds-context-bar__app-name">
                        <span class="slds-truncate" title="Critical Indicators – Sales">Critical Indicators – Sales</span>
                    </span>
                </div>
            </div>
            <one-app-nav-bar class="slds-grid slds-has-flexi-truncate" one-appnavbar_appnavbar-host="">
                <span one-appnavbar_appnavbar="" class="slds-assistive-text" id="operationId-5">Press Spacebar to reorder.</span>
                <span one-appnavbar_appnavbar="" class="slds-assistive-text keyboardDnd" id="dndAssistiveText-5" aria-live="assertive"/>
                <nav one-appnavbar_appnavbar="" class="slds-context-bar__secondary navCenter" role="navigation" aria-label="Global">
                    <div one-appnavbar_appnavbar="" class="slds-grid slds-has-flexi-truncate navUL" role="list" aria-describedby="operationId-5">
                        <one-app-nav-bar-item-root one-appnavbar_appnavbar="" class="navItem slds-context-bar__item slds-shrink-none slds-is-active" data-id="home" data-assistive-id="operationId" aria-hidden="false" draggable="true" role="listitem">
                            <a class="slds-context-bar__label-action dndItem" href="/lightning/page/home" title="Home" tabindex="0" draggable="false" aria-current="page">
                                <span class="slds-truncate">Home</span>
                            </a>
                        </one-app-nav-bar-item-root>
   .
   .
 <!-- hundreds of lines of elements cut out -->
   .
   .
                    </div>
                </nav>
            </one-app-nav-bar>
        </div>
    </one-appnav>
    <!--render facet: 301:0;p-->
</div>

仍然很好 - 我的目标元素仍处于DOM结构中。但是，如果我现在下一个元素，其中任何一个...

var cssSel = "body>div.desktop div.slds-no-print>one-appnav";
// or
var cssSel = "body>div.desktop div.slds-no-print one-appnav";
// or
var cssSel = "one-appnav";

我只会恢复单个元素，并且不包含任何孩子...

<one-appnav data-data-rendering-service-uid="138" data-aura-rendered-by="244:0"></one-appnav>

我针对的元素低于此＆lt;一个-appnav＆gt; 元素。但是，如果我尝试使用类似的东西访问它们，

var cssSel = "body>div.desktop div.slds-no-print>one-appnav>div.slds-context-bar";
// or
var cssSel = "body>div.desktop div.slds-no-print>one-appnav div.slds-context-bar";
// or
var cssSel = "body>div.desktop div.slds-no-print div.slds-context-bar";

尽管我可以在DOM树中看到该元素，但我会得到一个例外...

OpenQA.Selenium.NoSuchElementException: no such element: Unable to locate element:
 {"method":"css selector",
  "selector":"body>div.desktop div.slds-no-print>one-appnav>div.slds-context-bar"}

（如上面输出的示例中所示）。

当我检查Salesforce页面时，我还可以看到Chrome检查员中的所有目标元素。

那么，为什么在访问其“遥远”祖先时，我可以在DOM树中看到我的目标元素，而在访问他们的更多“最近”祖先时却看不到？同样，我在使用XPATH访问所有这些目标元素时没有问题。那么，为什么不使用CSS选择器呢？

Answer 1

因此，试图找到这种奇怪情况的解决方案并不高兴。实际上，我现在在其他Salesforce Dom树中遇到了类似的情况。

同样，我可以看到高于“遥远”祖先下方的整个DOM树，但是当我进一步定位在树下时，在某个点，只有单个元素可用，在其下方显然无法访问。

同样，这似乎是仅在访问 by.cssselector 时才是一个问题。当我使用 by.xpath 时，一切都按预期工作 - 我可以访问DOM树中的任何元素。

这里一个有趣的观点 - 当我比较两种DOM树的两个“麻烦”元素时 - 原始场景中的一个，以及我刚刚发现的最新元素...

...

<one-appnav data-data-rendering-service-uid="138" data-aura-rendered-by="244:0"></one-appnav>

最新...最新的...

<force-aloha-page data-data-rendering-service-uid="1102" data-aura-rendered-by="6404:0" force-alohapage_alohapage-host=""/>

原始 元素是...

• salesforce使用的非标准html标签名称
• 中使用的相同属性： data-data-rendering-service-uid 和 data-aura-rendered-by >

我的感觉是与渲染/渲染属性有关。我不确定他们的作用，或者与JavaScript函数可能相关的动态值指向什么？提出的问题在这里 ，，没有任何Salesforce的回应。

看来我只需要恢复到使用 by.xpath 。希望这将有助于发现类似情况的人。让我知道您是否找到解决方案。

编辑：

此后，我发现了Salesforce的后来发行版（2020年春季）的参考，他们建议使用
xpaths csss selectors coselectors 特别是...尤其是...

*Convert non-XPath locators to XPath*
 
LWC uses a _polyfill_ to implement shadow DOM rather than a native browser
implementation. This implementation restricts Selenium access by non-XPath
selectors, like By.cssSelector(), but still allows direct access with By.xpath().
The simplest fix is to convert your non-XPath locators to XPath.

为了参考，我正在使用：

- Microsoft.NETCore.App (v3.1.0)
- C# (v8)
- Selenium.Support package (v4.1.0)
- Chrome and Chromedriver (v102.0.5005.61)