Question

以下是我要做的事情： Project是使用ReactJS构建的，我使用的是Selenium WebDriver和Java。

点击按钮（我可以这样做）
这将打开一个模态，它具有反应选择组件。

我想在此选择中选择一个元素。

HTML代码：

  <div class="row">
    <div class="col-xs-7">
      <div class="Select kpi-select is-searchable Select--single">
        <div class="Select-control">
          <span class="Select-multi-value-wrapper" id="react-select-19--value">
            <div class="Select-placeholder">Select KPI</div>
            <div class="Select-input" style="display: inline-block;">
              <input id="add-kpi-kpi-select" aria-activedescendant="react-select-19--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
              <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 300; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
          </span>
          <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
        </div>
      </div>
    </div>
    <div class="col-xs-5">
      <div class="Select kpi-select is-searchable Select--single">
        <div class="Select-control">
          <span class="Select-multi-value-wrapper" id="react-select-20--value">
            <div class="Select-placeholder">Select Time Period</div>
            <div class="Select-input" style="display: inline-block;">
              <input id="add-kpi-timeperiod-select" aria-activedescendant="react-select-20--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
              <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 300; font-style: normal; letter-spacing: normal; text-transform: none;">
              </div>
            </div>
          </span>
          <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
        </div>
      </div>
    </div>
  </div>

屏幕截图：

Answer 1

选择KPI的Java代码

   class ParallarXController: UIViewController,UIScrollViewDelegate {
         @IBOutlet weak var imageScrollView: UIScrollView!
         @IBOutlet weak var foregroundScrollView: UIScrollView!

            override func viewDidLoad() {
               super.viewDidLoad()
               let rearImg = UIImageView.init(image: UIImage(named: "readArticalBGimage"))
                    rearImg.frame = CGRect(x: 0, y: 0, width: (self.imageScrollView.frame.width), height: self.view.bounds.height+110)
                    imageScrollView.contentSize  = CGSize.init(width: self.view.bounds.width, height: self.view.bounds.height+100)
                    rearImg.contentMode = .scaleAspectFill
                    imageScrollView.addSubview(rearImg)

                }


     func scrollViewDidScroll(_ scrollView: UIScrollView) {
                    let foregroundScrollviewHeight = foregroundScrollView.contentSize.height - foregroundScrollView.bounds.height
                    let percentageScroll = foregroundScrollView.contentOffset.y / foregroundScrollviewHeight
                    let backgroundScrollViewHeight = imageScrollView.contentSize.height - imageScrollView.bounds.height
                    imageScrollView.contentOffset = CGPoint(x: 0, y: backgroundScrollViewHeight * percentageScroll)
      }
   }

通过在点击事件中添加断点来使选项保持扩展的指南：

打开Chrome DevTool
切换到String wantedOption = "wanted KPI"; // click the down arrow to expand options driver.findElement(By.cssSelecor("div.Select.kpi-select span.Select-arrow")).click(); // select wanted KPT driver.findElement(By.cssSelector("div.Select.kpi-select div.Select-menu")) .findElement(By.xpath(String.format(".//div[text()='%s']", wantedOption))) .click();标签
按照以下步骤操作
点击页面

Sources

您将看到一个新的DOM节点Select KPI 它包含<div class="Select-menu-outer">选项卡

如何为硒的模态选择反应元素

1 个答案: