Javascript 从下拉列表中单击后，量角器未转到下一行

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

由于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>

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

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

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

失败：的元素引用已过时；元素不再附加到DOM，它不在当前框架上下文中，或者文档已刷新

---

是否有其他方法可以继续而不出错？

尝试以下功能

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;
        }
     }
  }

异步函数选择（标题）{ 等待浏览器。睡眠（1000）； 等待元素（按.name（“title”））。单击（）； 等待浏览器。睡眠（1000）； const ele=element.all（by.css（'div>mat option>span.mat option text'）； 对于（i=0；i

---

希望它能帮助您

听起来您使用循环纯粹是为了查找并单击正确的选项。如果是这样的话，我认为根本不需要循环。事实上，通过这种方式循环，如果你期望的标题不存在，你可能会错过一个例外，因为它根本不会点击任何东西

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

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`))
    })
};

---

这个解决方案适用于我的情况。感谢@DublinDev:）

---

我想你的方法可能行得通。但它无法通过xpath找到元素。如果使用css定位器，您能建议如何编写它吗？我只知道如何放置定位器，但不确定如何在定位器中检查元素以与我的值进行比较。我尝试这样更改它，但仍然找不到locator:element（by.css（“mat option=[text（）='${title}']）。单击（）@hafizan我需要查找css的确切语法，但同时您可以尝试

元素（by.cssContainingText（'mat-option'，title.）。单击（）

@hafizan没问题。请注意，

cssContainingText

检查文本是否包含字符串而不是字符串。这意味着如果您有两个选项用于

chief-officer

和

chief

使用

containingText（'mat-option'，'chief'）

将首先找到这些选项中的任何一个。您好。感谢您的回复。我尝试了您的解决方案，但似乎找不到属性标题，只是跳过并转到下一步。@hafizan能否与我共享您如何实现solutionfunction Select（title）{element（by.name）（“title”）。单击（）。然后（function（）{browser.sleep）的代码（1000）}browser.sleep（1000）；const ele=element.all（by.css（'div>mat option>span.mat option text'））；for（i=0；iasync/await。参考更新的答案

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`))
    })
};

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");
            })
    })
};