时间戳

首页 > 解决方案 > 在 Angular 7 应用程序中使用 Protractor 和 Typescript 识别元素

typescript - 在 Angular 7 应用程序中使用 Protractor 和 Typescript 识别元素

问题描述

我试图通过 XPath、CSS 和模型来识别特定按钮，但没有成功。Angualr 7 不接受按模型。通过 XPath，无法识别该方式。也尝试使用css，但我没有成功。有人可以帮我一个好的css标识符吗？

这是我需要识别元素的部分：图片

这是我需要识别元素的部分：

<div _ngcontent-c15="" class="ng-star-inserted">
    <a _ngcontent-c15="" mat-icon-button="" mattooltip="Open Data Mart (DE)" class="mat-icon-button"
        aria-describedby="cdk-describedby-message-15" cdk-describedby-host="" ng-reflect-message="Open Data Mart (DE)"
        ng-reflect-query-params="[object Object]" ng-reflect-router-link="/active,reports" tabindex="0"
        aria-disabled="false"
        href="/de/active/reports?id=5e7795ab-6f88-47e4-9e53-c3e52ffbf078&amp;sourceId=92ef315f6b194907f8aa08d6965368d8"
        style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <span class="mat-button-wrapper">
            <img _ngcontent-c15="" height="24" src="assets/open-datamart-blue.svg" width="24">
        </span>
        <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="true"
            ng-reflect-disabled="false" ng-reflect-trigger="https://taxmart-web-dev-v2.tax">
        </div>
        <div class="mat-button-focus-overlay"></div>
    </a>
    <!--bindings={
    "ng-reflect-ng-if": "true"
    }-->
</div>

我尝试但没有成功的一些版本：

const activeDataClick = element(by.cssContainingText('ng-reflect-router-link="/active,reports"','/active,reports'));
const activeDataClick = element(by.css('.active,reports'));
const activeDataClick = element(by.css('[ng-reflect-router-link="/active,reports]'));
const activeDataClick = element(by.css('.Open Data Mart (DE)'));
const activeDataClick = element(by.css('a[href*="/active,reports"]'));
const activeDataClick = element(by.xpath('/html/body/app-root/app-main/mat-sidenav-container/mat-sidenav-content/div/app-active-datamarts-tabs/div/mat-card/app-active-datamarts/mat-table/mat-row/mat-cell[6]/div/a/div[2]'));

标签： typescriptprotractor

解决方案

这在很大程度上取决于您试图定位的 img 周围最可预测的元素是什么。

最直接的尝试就是根据 src 查找图像。

element(by.xpath('//img[@src="assets/open-datamart-blue.svg"]') //xpath
element(by.css('[src="assets/open-datamart-blue.svg"]') //css

如果那不是唯一的，你可以找到它作为那个的孩子span，a或者div。下面的示例使用 div

element(by.xpath('//div[@class="ng-star-inserted"]//img[@src="assets/open-datamart-blue.svg"]') //xpath
element(by.css('.ng-star-inserted [src="assets/open-datamart-blue.svg"]') //css

您尝试的大多数语法都不正确，因此我建议您查找如何使用 css 和 xpath 定位器。我在下面更正了一些

cssContainingText('[ng-reflect-router-link="/active,reports"]','/active,reports')
css('[ng-reflect-router-link="/active,reports"]')
css('[mattooltip="Open Data Mart (DE)"]')

推荐阅读