Захват и взаимодействие с элементами таблицы с помощью Puppeteer - PullRequest
Новая
       26

Захват и взаимодействие с элементами таблицы с помощью Puppeteer

0 голосов
/ 17 апреля 2020

Я пытаюсь l oop в строках таблицы, ищу текст в column-B и затем ставлю галочку в column-A.

Я довольно новичок в Javascript и нов Кукольнику, поэтому я заранее прошу прощения, если это довольно основательно c.

Моя цель Чтобы найти все элементы в столбце 2 моей таблицы и сохранить в массиве Чтобы найти все элементы в столбце 1 моей таблицы и сохраняются в массив. Когда интересующий меня текст находится в первом массиве, щелкните элемент с таким же индексом второго массива

. Я могу идентифицировать все ячейки столбца 2 в моя таблица с помощью css селектор .column-id Я могу идентифицировать все ячейки столбца 1 (флажки) в моей таблице с помощью css селектор .select-item

Следуя документам Puppeteer, я могу сделать следующее, чтобы получить количество найденных элементов 

const element = '.column-id'
const elementToClick = '.select-item'
const elementCount = await this.page.$$eval(element, (e) => e.length)
const eleToClickCount = await this.page.$$eval(elementToClick, (e) => e.length

Пытаясь следовать некоторым из найденных примеров, у меня есть следующий код, который я могу «заставить» работать, но я не считаю его правильным, или, по крайней мере, не самый лучший способ сделать это в момент после. 

// Loop through elements searching for textToLookFor
    for (let i = 0; i < elementCount; i++) {
      const str = await this.page.$eval(
        `${element}:nth-child(2)`,
        (e) => e.innerText
      )
      // If string found, click element at same index as string
      if (str === textToLookFor) {
        await this.waitAndClick(`${elementToClick}:nth-child(${i + 1})`)
        foundMatch = true
        break
      }
    }

Вопросы

  1. Сохраняю ли я правильные данные в моих переменных начальных элементов?

  2. Является ли использование: nth-child (#) правильным способом сделать это? Или это не применимо в том, как я пытаюсь использовать это? Это кажется неправильным, так как n-ным потомком данной строки будет столбец (td), что не является тем, что я ищу, а вместо этого i-й строкой, поскольку итерация происходит в течение для l oop.

    Я чувствую, что это должно быть очень простым делом, и я явно что-то упускаю.

    Любое направление будет с благодарностью.

1 Ответ

0 голосов
/ 18 апреля 2020

Я перешел на использование селектора table tr вместо имени класса и немного изменил код, и теперь он работает так, как мне хотелось бы, и понимаю, почему. 

async selectPresetNamed(name) {
    const tableRows = 'tbody tr'
    const rowCount = await this.page.$$eval(tableRows, (e) => e.length)

    // At least 1 row exists in table body
    if (rowCount == 0) {
        browser.close()
        throw new Error(`no elements found with locator, '${tableRows}'`)
    }
    for (let i = 0; i < rowCount; i++) {
      const str = await this.page.$eval(
        `${tableRows}:nth-child(${i + 1}) td:nth-child(2)`,
        (e) => e.innerText
      )
      if (str === name) {
        await this.page.waitAndClick(
          `${tableRows}:nth-child(${i + 1}) td:nth-child(1)`
        )
        break
      }
    }
  }
...