Question

我正在使用量角器从下拉列表中选择项目。仅当单击下拉按钮时，下拉元素才会出现。

由于id不断变化，因此我使用element.all来获取文本，并使用if条件来比较列表是否与我的值相同，以单击该项目。

<div class="ng-trigger ng-trigger-transformPanel ng-tns-c4-15 mat-select-panel mat-primary ng-star-inserted" style="transform-origin: 50% 127.5px 0px; font-size: 14px; opacity: 1; min-width: calc(100% + 32px); transform: scaleY(1);">
            <!---->
            <mat-option _ngcontent-c20="" class="mat-option ng-star-inserted" role="option" tabindex="0" id="mat-option-59" aria-selected="false" aria-disabled="false">
                <!---->
                <span class="mat-option-text"> Cik </span>
                <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
            </mat-option>
            <mat-option _ngcontent-c20="" class="mat-option ng-star-inserted" role="option" tabindex="0" id="mat-option-60" aria-selected="false" aria-disabled="false">
                <!---->
                <span class="mat-option-text"> Dato' </span>
                <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
            </mat-option>
            <mat-option _ngcontent-c20="" class="mat-option ng-star-inserted" role="option" tabindex="0" id="mat-option-61" aria-selected="false" aria-disabled="false">
                <!---->
                <span class="mat-option-text"> Dato Paduka </span>
                <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
            </mat-option>

我想做的事情如下：

function Select(title){
    element(by.name("title")).click().then(function(){
        browser.sleep(1000)
    })
    element.all(by.tagName("mat-option")).each(function(item){
        item.getAttribute("id").getText().then(function(z){
            if(z==title){
                item.click().then(function(){
                    console.log("success select title");
                    })
                }       
            })
        });

我的问题是，单击所选内容后，量角器返回顶部并尝试再次搜索元素，因为我正在使用每个函数（此时，由于下拉列表已关闭，因此将无法搜索元素）。并没有转到下一个功能继续其他字段。

下面是选择成功后出现的错误：

Failed: The element reference of <mat-option id="mat-option-575" class="mat-option ng-star-inserted"> is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed

我还有其他方法可以继续而不会出错吗？

Answer 1

听起来您纯粹是在使用循环来查找并单击正确的选项。如果是这种情况，那么我认为根本不需要循环。实际上，通过这种方式循环播放，如果您希望出现的标题不存在，则可能会错过一个例外，因为它根本不会单击任何内容。

如果我理解正确，则可以尝试简单地定位该元素并单击它，但是如果我错过了一些约束，请告诉我。

function Select(title) {

    element(by.name("title")).click().then(function () {
        browser.sleep(1000);
        element(by.xpath(`//mat-option[text()='${title}']`)).click()
            .then(function () {
                console.log(`Clicked option containing ${title}`);
            })
        //alternate locator to try
        // element(by.xpath(`//mat-option/span[text()='${title}']/parent::mat-option`))
    })
};

Answer 2

尝试以下功能。

async function Select(title){
    await browser.sleep(1000);
    await element(by.name("title")).click();
    await browser.sleep(1000);
    const ele = element.all(by.css('div>mat-option>span.mat-option-text'));
    for(i=0;i< ele.count();i++){
       if(await ele.get(i).getText() === title){
            await browser.sleep(1000);
             await ele.get(i).click();
             await browser.sleep(1000);
             break;
        }
     }
  }

希望它对您有帮助

Answer 3

此解决方案适用于我的情况。感谢@DublinDev：）

function Select(title) {

    element(by.name("title")).click().then(function () {
        browser.sleep(1000);
        element(by.cssContainingText('mat-option',title)).click().then(function () {
                console.log("click title");
            })
    })
};

从下拉菜单单击后，量角器不转到下一行

3 个答案: