表的 Xpath - 具有多个 tr 和 td 的列表 - 找到第一个元素并单击复选框

Question

我正在努力解决 xpath 问题。代码包含在正在处理的 iframe 中：

<div _ngcontent-c10 class="panel panel-info">
  <div _ngcontent-c10 class="panel-heading"> ABC Output </div>
<div _ngcontent-c10 class="panel-body">
<form _ngcontent-c10 novalidate class="ng-untouched ng-pristine ng-valid">
<div _ngcontent-c10 class="row">
<table _ngcontent-c10 class="table tb-striped">
<tbody _ngcontent-c10>
<tr _ngcontent-c10="">
          <td _ngcontent-c10="" class="td-fixed-width-35">
           <label _ngcontent-c10="">
               <input _ngcontent-c10="" type="checkbox" value="" class="ng-untouched ng-pristine ng-valid">
           </label>
       </td>
       <td _ngcontent-c10="" class="td-fixed-width-20 no-side-padding">
           <img _ngcontent-c10="" class="outputLogo" src="https://qa-server/Services/content/logos/AAAA1.png" alt="AAA1">
       </td>
       <td _ngcontent-c10="" class="td-text-bold">
           AAA1 Output
           <!---->
       </td>
</tr>
<tr _ngcontent-c10="">
          <td _ngcontent-c10="" class="td-fixed-width-35">
           <label _ngcontent-c10="">
               <input _ngcontent-c10="" type="checkbox" value="" class="ng-untouched ng-pristine ng-valid">
           </label>
       </td>
       <td _ngcontent-c10="" class="td-fixed-width-20 no-side-padding">
           <img _ngcontent-c10="" class="outputLogo" src="https://qa-server/Services/content/logos/BBB1.png" alt="BBB1">
       </td>
       <td _ngcontent-c10="" class="td-text-bold">
           BBB1 Output
           <!---->
       </td>
</tr>
<tr _ngcontent-c10="">
          <td _ngcontent-c10="" class="td-fixed-width-35">
           <label _ngcontent-c10="">
               <input _ngcontent-c10="" type="checkbox" value="" class="ng-untouched ng-pristine ng-valid">
           </label>
       </td>
       <td _ngcontent-c10="" class="td-fixed-width-20 no-side-padding">
           <img _ngcontent-c10="" class="outputLogo" src="https://qa-server/Services/content/logos/CCC1.png" alt="CCC1">
       </td>
       <td _ngcontent-c10="" class="td-text-bold">
           CCC1 Output
           <!---->
       </td>
</tr>

我正在尝试在列表中找到第一行以单击复选框，这些是我已经尝试过的：

webElement = Driver.FindElement(By.XPath("//*[contains(text(),'AAA1 Output')]//preceding::label/input[@class='ng-untouched ng-pristine ng-valid'][@type='checkbox']"));

webElement = Driver.FindElement(By.XPath("//*[.,'AAA1 Output')]//preceding::label/input[@class='ng-untouched ng-pristine ng-valid'][@type='checkbox']"));

webElement = Driver.FindElement(By.XPath("//*[contains(text(),'AAA1 Output')]//preceding::input[@class='ng-untouched ng-pristine ng-valid'][@type='checkbox']"));

webElement = Driver.FindElement(By.XPath("//*[.,'AAA1 Output')]//preceding::input[@class='ng-untouched ng-pristine ng-valid'][@type='checkbox']"));

webElement = Driver.Instance.FindElement(By.XPath("//div[@class='panel panel-info']//following::tr[contains(., 'AAA1 Output')]/td[1]"));

webElement = Driver.Instance.FindElement(By.XPath("//[contains(.,'ABC Output']//following::tr[contains(., 'AAA1 Output')]/td[1]"));

但是，他们不能点击第一个元素的复选框。

Answer 1

这将使您获得表中第一个 tr 类 'table tb-striped'

//table[@class='table tb-striped']/tbody/tr[1]

如果要根据内容选择行，例如AAA1 Output，可以使用：

//tr[contains(., 'AAA1 Output')]

假设您想从包含文本AAA1 Output 的tr 中获取第一个td，您可以使用以下内容：

//tr[contains(., 'AAA1 Output')]/td[1]

要在td 中获取复选框，请使用：

//tr[contains(., 'AAA1 Output')]/td[1]//input[@type='checkbox']

要点击此复选框，请使用

driver.FindElement(By.XPath("//tr[contains(., 'AAA1 Output')]/td[1]//input[@type='checkbox']")).Click();

在尝试点击复选框之前，请确保您已切换到 iframe。您可以使用以下几行切换到框架

// Find frame by its index (this is zero based)
driver.SwitchTo().Frame(0);

// Find frame by string (name or id)
driver.SwitchTo().Frame("firstFrame");

// Find frame by web element
driver.SwitchTo().Frame(myFrameElement);