如何 page.click 动态列表中具有给定值的元素答案

【问题标题】：How to page.click an element on a dynamic list that has a given value如何 page.click 动态列表中具有给定值的元素
【发布时间】：2019-06-02 16:16:26
【问题描述】：

使用 puppeteer.js，我正在尝试使用动态列表的给定值自动选择 (page.click) 元素。在下面的代码中，动态 HTML 显示了 3 个公司。我想选择标有“B公司”的那个。

<div id="ember1222" class="ao-list ember-view">
    <div data-test-company-list-row="true" class="list-item" data-ember-action="" data-ember-action-1224="1224">
        <a href="#/manage-company/255/dashboard" id="ember1225" class="grid--nested ember-view">                        
            <div data-test-company-name="true" class="grid__cell">
                Company A
            </div>
        </a>
    </div>
    <div data-test-company-list-row="true" class="list-item" data-ember-action="" data-ember-action-1224="1224">
        <a href="#/manage-company/256/dashboard" id="ember1228" class="grid--nested ember-view">                        
            <div data-test-company-name="true" class="grid__cell">
                Company B
            </div>
        </a>
    </div>
    <div data-test-company-list-row="true" class="list-item" data-ember-action="" data-ember-action-1224="1224">
        <a href="#/manage-company/253/dashboard" id="ember1231" class="grid--nested ember-view">                        
                <div data-test-company-name="true" class="grid__cell">
                    Company C
                </div>
        </a>
    </div>
</div>

我尝试在数组中获取元素位置：

async selectCompanyName(companyName) {
    // Wait for element to be rendered
    await page.waitForSelector('[data-test-company-name="true"]', { timeout: settings._30000 });

    // Create an array of Company Names
    let listCompanyNames = await page.evaluate(() => {
        let tds = Array.from(document.querySelectorAll('[data-test-company-name=="true"]'));
        return tds.map(td => td.textContent.trim());
    });

    // Find which row number the Company Name is on and click it
    let rowNumber = null;
    for (let i = 0; i < listCompanyNames.length; i++) {
        if (listCompanyNames[i] === companyName) {
            rowNumber = i;
            break;
        }
    }
}

我在数组中获得了正确的位置（即 1），但是我不确定我知道如何分页。单击它。
Ember 有动态 id，所以我坚持使用 HTML data- 属性。我尝试了其他方法，例如使用 page.$$()，但没有成功。任何人都可以帮助我吗？

【问题讨论】：

标签： puppeteer

【解决方案1】：

listCompanyNames是字符串列表而不是元素节点，使用page.$$返回元素句柄然后你可以使用click()

async selectCompanyName(companyName) {
  // Wait for element to be rendered
  await page.waitForSelector('[data-test-company-name="true"]', {
    timeout: settings._30000
  });

  let listCompanyNames = await page.$$('[data-test-company-name=="true"]');

  for (let i = 0; i < listCompanyNames.length; i++) {
     let textContent = await page.evaluate(el => el.textContent, listCompanyNames[i]);
    // or
    //let textContent = await (await listCompanyNames[0].getProperty('textContent')).jsonValue()
    if (textContent === companyName) {
      rowNumber = i;
      listCompanyNames[i].click()
      break;
    }
  }
}

【讨论】：