需要有关动态 CSS 选择器的帮助

Question

需要有关动态 CSS 选择器的帮助。

我有以下 CSS 选择器用于我想要的 Web 元素：

#sub-cat-822 > div:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > input:nth-child(2)

我需要传递包含动态值的变量（变量名是：Added_Main_category_id1）仅适用于 cat-822（在上述 CSS 选择器中） .有人可以建议如何调整上面 CSS 选择器中的变量，使其能够顺利运行吗？

所需网页元素的外部 html：

<input required="required" id="edited_name" name="sub_cate" value="" placeholder="" class="form-control" type="text">

所需网页元素的css路径：

html body.nav-md.pace-done.modal-open div.container.body div.main_container div.right_col div.right_col_container div.right_col_wrapper div.x_panel div.x_content div.post-box ul.cat_accordion.list-group li#854.list-group-item.category-list-item-854 div.cat-name div#sub-cat-854.modal.fade.in div.modal-dialog div.modal-content form div.modal-body.clearfix div.edit-photo-poup div.col-xs-8.col-sm-6 input#edited_name.form-control

所需网页元素的cssselector：

  #sub-cat-822 > div:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > input:nth-child(2)

所需网页元素的 xpath：

//*[@id="edited_name"]

Answer 1

如果 id "edited_name" 在 HTML 源代码中是唯一的，只需使用 #edited_name 作为 CSS 选择器

Answer 2

您可以将选择器字符串视为普通字符串。您可以在其中插入任何您想要的变量等。

你说下面的工作

Invoke_Test_Instance.driver.findElement(By.cssSelector("#sub-cat-831 > div:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > input:nth-child(2)")).sendKeys("input value");

您可以使用类似的变量来修改它

String id = "#sub-cat-831";
Invoke_Test_Instance.driver.findElement(By.cssSelector(id + " > div:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > input:nth-child(2)")).sendKeys("input value");

然后将id 变量更改为您想要的任何字符串。

也就是说...拥有这么多级别的 CSS 选择器或任何定位器可能会非常脆弱。由于级别的数量以及您使用的索引，DOM 任何级别的任何更改都会破坏该定位器。

Answer 3

以下逻辑成功运行。感谢 Jeffc 分享这个想法。

String category_id = added_Main_category_id1;//包含#cat-906动态值的变量

String truncated_category_id;

truncated_category_id =category_id.substring(category_id.lastIndexOf("#")+1);//去掉#并获取剩余的动态值（即cat-906）

String id = "#sub-"+truncated_category_id;

线程.sleep(3000);

Invoke_Test_Instance.driver.findElement(By.cssSelector(id +"> div:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child( 3) > div:nth-child(1) > div:nth-child(2) > input:nth-child(2)")).sendKeys("字段输入值"); // 将动态变量和其他静态值作为 cssselector 传递

Answer 4

真的有必要使用 CSS 选择器而不是 Xpath 吗？通常 Xpath 有助于动态场景。见下面代码

String searchText = "text in the webtable";
driver.get("http://some.site.having.webtable/");
WebElement e = driver.findElement(By.xpath("//td[text()='" + searchText + "']"));

然后您可以根据需要自定义 xpath。

请发布您的 HTML 以使其更容易。