如何使用表中的唯一值选择带有Xpath的单个表复选框？

Question

假设我正在使用一个带有HTML树的网页表元素，如下所示：

​

<table>
<tr row-number="1">
<td value="0-SELECTABLE_CHECKBOX-0">
<lightning-primitive-cell-checkbox lightning-datatable_table="">
<span class="slds-checkbox">
<input type="checkbox">
<label>
<span class="slds-checkbox_faux">
</span>
<span>Select Item 1</span>
</label>
</span>
</lightning-primitive-cell-checkbox>
</td>
<th label="Product Company">
<lightning-primitive-cell-factory label="Product Company">
<span>
<div>
<lightning-base-formatted-text>Company 1</lightning-base-formatted-text>
</div>
</span>
</lightning-primitive-cell-factory>
</th>
<td label="Product Name">
<lightning-primitive-cell-factory label="Product Name">
<span>
<div>
<lightning-base-formatted-text>Product type 1</lightning-base-formatted-text>
</div>
</span>
</lightning-primitive-cell-factory>
</td>
</tr>
<tr row-number="2">
<td value="0-SELECTABLE_CHECKBOX-0">
<lightning-primitive-cell-checkbox lightning-datatable_table="">
<span class="slds-checkbox">
<input type="checkbox">
<label>
<span class="slds-checkbox_faux">
</span>
<span>Select Item 2</span>
</label>
</span>
</lightning-primitive-cell-checkbox>
</td>
<th label="Product Company">
<lightning-primitive-cell-factory label="Product Company">
<span>
<div>
<lightning-base-formatted-text>Company 2</lightning-base-formatted-text>
</div>
</span>
</lightning-primitive-cell-factory>
</th>
<td label="Product Name">
<lightning-primitive-cell-factory label="Product Name">
<span>
<div>
<lightning-base-formatted-text>Product type 2</lightning-base-formatted-text>
</div>
</span>
</lightning-primitive-cell-factory>
</td>
</tr>
</table>

​

我的目标是使用Xpath在表中选择一个唯一的复选框输入元素，但我只能使用表本身中列出的Company和Product，因此不能按行号进行选择。我该怎么做？

Answer 1

@Matt M，对于python和Selenium，您可以如下所示。您可以替换代码中提供的url。它将根据变量company中提供的公司名称选择行。产品名称也可以这样做：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)
s = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(options=chrome_options, service=s)
driver.get("http://127.0.0.1:5555/dropdown.html")
allRows = driver.find_elements(By.TAG_NAME, "tr")
company = "Company 2"

for row in allRows:
    if company in row.text:
        row.find_element(By.TAG_NAME, "input").click()

Answer 2

要使用xpath实现这一点，您需要使用支持xpath的document.evaluate()方法。然后您需要形成一个xpath表达式。

在这种情况下，它可以是(以及其他一些选项)

//table//tr[.//.="Company 2"][.//.="Product type 1"]//input[@type="checkbox"]

可以大致翻译成英文

在表中，查找一个<tr>，它的子元素中包含一个等于"Company 2“的文本元素(或其他元素)，另一个元素等于"Product 1”(同样，或者其他什么)；一旦找到它，就查找该<tr>的另一个<input>子元素，它的属性type的属性值为checkbox。

现在让document.evaluate()对其进行评估，一旦找到该元素，就让javascript切换该元素的checked状态。

合在一起：

xpath = '//table//tr[.//.="Company 2"][.//.="Product type 1"]//input[@type="checkbox"]';
target = document.evaluate(
  xpath,
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);

target.singleNodeValue.checked = true;