JavaScript中动态获取过滤后元素的CSS选择器以供自动化工具使用

<button type="button">Orange</button>
<button type="button">Apple</button>

const fruits = document.querySelectorAll('button');

for (const fruit of fruits) {
  if (fruit.textContent === 'Apple') {
    // 此时我们获得了 DOM 元素 'fruit'，但如何得到其 CSS 选择器字符串？
    console.log('找到了 Apple 按钮:', fruit);
    // 直接使用 nth-child(2) 并不总是可靠，如果元素顺序或数量发生变化，选择器就会失效。
    // 而且，我们并没有一个通用的方法从 DOM 元素反向生成一个唯一的 CSS 选择器。
  }
}

const fruits = document.querySelectorAll('button');
let targetSelector = null;

for (const fruit of fruits) {
  if (fruit.textContent === 'Apple') {
    // 为找到的元素添加一个唯一的 data-type 属性
    fruit.setAttribute('data-type', 'Apple');
    // 如果只需要第一个匹配项，可以立即跳出循环
    break;
  }
}

<button type="button">Orange</button>
<button type="button" data-type="Apple">Apple</button>

// 使用添加的 data-type 属性来构建 CSS 选择器
// 并通过 querySelector 验证选择器是否能找到该元素
const selector = 'button[data-type="Apple"]';
const foundElement = document.querySelector(selector);

if (foundElement) {
  console.log('成功获取到选择器:', selector); // 输出: button[data-type="Apple"]
  console.log('通过选择器找到的元素:', foundElement);
  // 这个 'selector' 字符串现在可以传递给 puppeteer.waitForSelector 等 API
} else {
  console.log('未找到匹配的元素或选择器构建失败。');
}

/**
 * 从一个 NodeList 中筛选出特定元素，并为其生成一个可用的 CSS 选择器。
 * @param {string} selector 要查询的初始元素选择器（例如 'button'）。
 * @param {string} textContent 目标元素的文本内容。
 * @param {string} dataAttributeName 用于标记的自定义数据属性名称（例如 'data-target'）。
 * @param {string} dataAttributeValue 用于标记的自定义数据属性值（例如 'apple-button'）。
 * @returns {string|null} 生成的 CSS 选择器字符串，如果未找到则返回 null。
 */
function getFilteredElementSelector(selector, textContent, dataAttributeName, dataAttributeValue) {
  const elements = document.querySelectorAll(selector);

  for (const element of elements) {
    if (element.textContent === textContent) {
      // 标记目标元素
      element.setAttribute(dataAttributeName, dataAttributeValue);
      // 构建并返回选择器
      return `${selector}[${dataAttributeName}="${dataAttributeValue}"]`;
    }
  }
  return null; // 未找到匹配元素
}

// 示例用法：
const appleButtonSelector = getFilteredElementSelector(
  'button',
  'Apple',
  'data-filtered-item',
  'apple-button-unique-id'
);

if (appleButtonSelector) {
  console.log('生成的 Apple 按钮选择器:', appleButtonSelector);
  // 现在可以将 appleButtonSelector 传递给 Puppeteer:
  // await page.waitForSelector(appleButtonSelector);
  // await page.click(appleButtonSelector);
} else {
  console.log('未找到 Apple 按钮。');
}