Шаблонный литерал не работает в селекторе запросов - PullRequest
2 голосов
/ 16 апреля 2020

Я перебираю выпадающий список и пытаюсь выбрать отдельные опции. Если я пытаюсь использовать шаблонный литерал, то querySelector возвращает ноль.

Вот два разных запроса: один с литералом шаблона, а другой - без. Я использую обратные тики, и все то же самое, но первый запрос возвращает ноль, а второй возвращает правильное значение, даже если в этом случае «i» = 2.

const value = await self.page.evaluate(() => {
              return document.querySelector(`select option:nth-child(${i})`);
});

const value1 = await self.page.evaluate(() => {
              return document.querySelector(`select option:nth-child(2)`);           
});

// Structure
for (let i = 2; i < options.length; i++){

    if (options[i]....){
        const value = await self.page.evaluate((i) => {
             return document.querySelector(`select option:nth-child(${i})`);
            });

    }
}

Почему это происходит?

Ответы [ 3 ]

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

Связано: Кукольник: передать переменную в .evaluate ()

Вам нужно передать еще один аргумент page.evaluate, чтобы i находился в области действия

const value = await self.page.evaluate((i) => {
    return document.querySelector(`select option:nth-child(${i})`);
}, i);
2 голосов
/ 17 апреля 2020

Поскольку вы передаете функцию в качестве аргумента, переменная i выйдет из области видимости при вызове функции. Вы должны передать значение при определении функции:

const value = await self.page.evaluate((i) => {
    return document.querySelector(`select option:nth-child(${i})`);
});
1 голос
/ 17 апреля 2020

На всякий случай похоже, что вы выбрали длинный путь.

Если вы намеревались извлечь текстовые значения <option> в массив, вы могли бы использовать Document.querySelectorAll():

const [,...options] = [...document.querySelectorAll('select option')].map(option => option.textContent)

console.log(options)
<select>
  <option disabled selected>Select</option>
  <option>first option</option>
  <option>second option</option>
  <option>last option</option>
</select>

ps , если требуется value каждого параметра, вы можете просто заменить .textContent на .value, если узлы DOM сами, просто пропустите map() -часть

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...