参考资料：https://www.checklyhq.com/learn/headless/basics-selectors/

常用操作

根据两个class定位元素，并获取内部文本

//匹配元素：

    …

//匹配方法：使用xpath同时匹配两个class

  1. String detail = page.innerText("//ul[contains(@class, 'parameter2') and contains(@class, 'p-parameter-list')]")

获取指定id的src属性

image.png
page.locator(“id=spec-img”).getAttribute(“src”);

获取多个元素的文本

如下图所示，需要获取所有li元素的文本：
image.png

  1. //方法1： 选中多个元素
  2. List<ElementHandle> handlers = page.querySelectorAll("//ul[contains(@class, \"parameter2\") and contains(@class, \"p-parameter-list\")]/li");
  3. log.debug("方法1：商品详细信息为：");
  4. for (int i = 0; i < handlers.size(); i++) {
  5.    System.out.println(handlers.get(i).innerText());
  6. }
  8. //方法2：选中多个元素，推荐！！！
  9. List<String> detailList = page.locator("//ul[contains(@class, 'parameter2') and contains(@class, 'p-parameter-list')]/li").allInnerTexts();
  10. log.debug("方法2：商品详细信息为:[{}]", detailList);

获取多个元素，并分别调用js求值

获取到多个元素之后，每个元素要调用window.getComputedStyle(el).backgroundImage获取背景图片url

  1. List<ElementHandle> elementHandles = page.locator("//div[contains(@id, 'J-detail-content')]/div[contains(@class, 'ssd-module-wrap')]/div").elementHandles();
  3. //访问其中某个元素
  4. elementHandles.get(1).evaluate("el=>window.getComputedStyle(el).backgroundImage");
  6. //访问全部元素
  7. List<String> imgeUrlList = new ArrayList<>(elementHandles)
  8.     .stream()
  9.     .map(x -> (String) x.evaluate("el=>window.getComputedStyle(el).backgroundImage"))
  10.     .collect(Collectors.toList());

获取子元素

要求：获取第二个div里面的第一个div。
image.png
xpath代码如下：
//div[contains(@id, ‘J-detail-content’)]/div[contains(@class, ‘ssd-module-wrap’)]/div[1]

问题

如何实现/div[1]的定位？

下面的定位方式是错误的：
ElementHandle elementHandle = h.querySelector("/div[1]");

Selector starting with // or .. is assumed to be an xpath selector. For example, Playwright converts ‘//html/body’ to ‘xpath=//html/body’.

也就是说，只有//和..才被认为是xpath的语法，如果是/开头，则需要自己手工指定xpath。
正确的如下：
ElementHandle elementHandle = h.querySelector("xpath=/div[1]");