Кукловод: убрать квадратные скобки в селекторе - PullRequest
Новая
       8

Кукловод: убрать квадратные скобки в селекторе

0 голосов
/ 10 сентября 2018

Мне нужно выбрать элементы с идентификаторами, содержащими квадратные скобки.

т.е. 

#element[0]

Однако я продолжаю получать:

Ошибка: не удалось найти селектор соответствия элемента "element [0]"

Я избежал элемента в селекторе с помощью \, но это не работает. 

page.select("#fruit\[0\]", "apples")

Двойные обратные слэши тоже не работают. i.e.:

page.select("#fruit\\[0\\]", "apples")

ОБНОВЛЕНИЕ: элемент, который я пытаюсь выбрать: 

<select id="fruit[0]">
  <option>Please make a selection</option>
  <option>apples</option>
</select>

ПРИМЕЧАНИЕ: я получаю ту же ошибку, даже когда пытаюсь использовать метод page.waitFor с запросом выше.

Ответы [ 3 ]

0 голосов
/ 10 сентября 2018

Возможно, вы указали неверный идентификатор.

Если вы программно генерируете идентификаторы при создании элементов HTML (т. Е. fruit[0], fruit[1]), то хранится значение , а не ссылка.

Пример: у меня есть массив fruit = [apple, banana], и я создаю элемент ... <button id=fruit[0]>Click me</button> Если я хочу выбрать эту кнопку, тогда мне нужно page.select('#apple') вместо page.select('#fruit[0]')

0 голосов
/ 10 сентября 2018

Использование [id="fruit[0]"]:

Вы можете использовать селектор атрибута CSS в отношении атрибута id элемента: 

await page.waitFor( '[id="fruit[0]"]' );

await page.select( '[id="fruit[0]"]', 'apples' );
0 голосов
/ 10 сентября 2018

Выход с использованием закодированных данных

Если вы даже попытаетесь сделать document.querySelector('#fruit[0]') в своем браузере, вы получите ту же ошибку. Экранирование не работает, потому что к тому времени, когда кукловод читает его, он уже проанализирован и не имеет того же экранированного значения. Несколько способов избежать их.

Скажем, у нас есть такой элемент, 

<a href="/" id="sample[112]">Bar</a>

Теперь, если вы хотите использовать vanila JS, вы можете попробовать следующее:

enter image description here

Что гласит следующее: 

< document.querySelector(CSS.escape('#sample[112]'))
> null

< document.querySelector('#sample[112]')
> Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#sample[112]' is not a valid selector.

< document.querySelector('#sample\5b 112\5d')
> ncaught DOMException: Failed to execute 'querySelector' on 'Document': '#sampleb 112d' is not a valid selector.

< document.querySelector('#sample\\5b 112\\5d')
> <a href="/" id="sample[112]">Bar</a>

Как вы можете видеть выше, левая скобка - 5b, а правая скобка - 5d, и нам даже пришлось убежать от этого и пришлось поставить пробел, чтобы браузер мог его проанализировать.

Вы должны попробовать приведенные выше коды и найти, какой из них подходит для вашего сайта.

Реальные сценарии

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

Кроме того, я мог дважды избежать этого и получать данные без их кодирования. В конце концов, nodeJS отличается от консоли браузера, и все будет работать по-разному в сценарии.

Источник, используемый для HTML, 

<select id="sample[1]"><option>mango</option><option>apple</option></select>

И код кукловода, используемый для тестирования, 

const puppeteer = require("puppeteer");

function setSelectByText(selector, text) {
  // Loop through sequentially//
  const ele = document.querySelector(selector);
  console.log(ele);

  for (let ii = 0; ii < ele.length; ii++) {
    if (ele.options[ii].text == text) {
      // Found!
      ele.options[ii].selected = true;
      return true;
    }
  }
  return false;
}

puppeteer.launch().then(async browser => {
  console.log("Opening browser");
  const page = await browser.newPage();

  console.log("Going to site");
  await page.goto("http://0.0.0.0:8080"); // temporary website created for testing

  await page.evaluate(setSelectByText, "#sample\\[1\\]", "apple"); // we can use this over and over, without creating a separate function, just passing them as arguments

  await page.screenshot({ path: "test.png" });

  await browser.close();
});

enter image description here

...