Question

我在选择单击某个元素并从相应结果中选择自动搜索时遇到问题。

有问题的元素是Angular JS组合框，它具有自动搜索功能-类似于此页面上的Remote Data组合框-link

生成的相应HTML是

<div id="some_generic_id" style="margin-bottom: 16px">
  <div data-reactroot="" class="Select Select--multi is-searchable">
    <div class="Select-control">
      <span class="Select-multi-value-wrapper" id="some-generic-id-2">
        <div class="Select-input" style="display: inline-block;">
          <input role="combobox" aria-expanded="false" aria-owns=""
            aria-haspopup="false" aria-activedescendant="some-generic-id-2" 
            value="" style="box-sizing: content-box; width: 2px;">
          <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; 
                      height: 0px; overflow: scroll; white-space: pre; font-size: 14px;
                      font-family: Arial; font-weight: 400; font-style: normal; 
                      letter-spacing: normal;">
          </div>
        </div>
      </span>
      <span class="Select-arrow-zone">
        <span class="Select-arrow"></span>
      </span>
    </div>
  </div>
</div>

到目前为止，我已经使用了以下选择器（许多选择器除外）-

Xpath-

//div[@id='some_generic_id']//div[@class='Select-control']

CSS选择器-

#some_generic_id > div > div

#some_generic_id-2 > div > input

但是，每次我总是遇到element not interact-able错误，这是我无法理解的。

我还使用了browser.actions().mouseMove()方法和executeScript()方法，使用普通的ol JS单击它，但是到目前为止还没有成功。

我在visibility :hidden标记后面的div中看到一个input属性-input实际上是要单击的。这个属性是否与input的交互方式搞混了？如果是这样，有人可以解释为什么会这样吗？

赞赏解决问题的所有指针。

我正在将Protractor (version 5+)与Cucumber JS和async/await一起使用

编辑：我已经在单独的文件locators.ts中定义了定位器。

import {browser, element,protractor,$,ElementFinder } from 'protractor';

export class Locators {
            public input_element : ElementFinder;

            constructor(){

            //these selectors I have tried
           this.input_element = element(by.xpath("//div[@id='some_generic_id']//div[@class='Select-control']"));

            //this.input_element = element(by.xpath("//span[@id='#some_generic_id-2']//input[@role='combobox']"));

        // this.input_element =$('#some_generic_id > div > div');
        // this.input_element = $('#some_generic_id-2 > div > input');
        // this.input_element = $('input[role=combobox]')
       }

        }

在步骤定义文件中，我将此选择器用作

When(/^I do some step $/,async()=>{
    await   (browser.actions().mouseMove(locators.input_element).click().perform());

   // await (browser.actions().mouseMove(locators.input_element).sendKeys('Aero').perform());

如果我使用上述任何选择器，都会收到No element found using locator或Element No Interactable错误。

如果我使用这样的JS执行器

   await (browser.executeScript("$('#some_generic_id-2 > div > input').click();"));

然后，步骤已通过，但对所讨论的元素没有执行任何操作。

Answer 1

尝试以下一种

const inputBox = element(by.css('div.Select-input>input'));
await browser.executeScript('arguments[0].scrollIntoView()', inputBox.getWebElement());
await inputBox.click();
await browser.actions().sendKeys('Aero').perform();

无法通过自动搜索为Angular combox选择元素

1 个答案: