Драматургический эквивалент find() в кипарисе

Есть ли способ пройти через html-элементы в драматурге, например cy.get("abc").find("div") в кипарисе?

Другими словами, любой find() эквивалентный метод у драматурга?

page.locator("abc").find() не является допустимым методом в драматургии :(

Согласно cypress docs, кажется, что он пытается найти потомков данного селектора. Вы этого хотите? Или любой другой конкретный вариант использования?

Kartoos 15.11.2022 11:48

Нужна такая же функция в драматурге, где я могу просматривать элементы html. У нас есть что-то подобное?

user16391157 15.11.2022 13:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
107
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Если вы назначите дескриптор родительского элемента переменной, любая из функций findBy* (или locator) будет искать только в родительском элементе. Пример ниже, где родителем является div, потомком является button, и мы используем .locator() для поиска элементов.

test('foo', async ({ page }) => {
  await page.goto('/foo');
  const parent = await page.locator('div');
  const child = await parent.locator('button');
});

Давайте рассмотрим сайт https://www.example.com со следующим HTML

<body style = "">
  <div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p>
      <a href = "https://www.iana.org/domains/example">More information...</a>
    </p>
  </div>
</body>

Как упоминал @agoff, вы можете использовать вложенный локатор page.locator('p').locator('a') или указать вложенный селектор непосредственно в локаторе page.locator('p >> a')

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.example.com/');

  // Here res1 and res2 produces same output
  const res1 = await page.locator('p').locator('a'); // nested locator
  const res2 = await page.locator('p >> a'); // directly specifying the selector to check the nested elements
  const out1 = await res1.innerText();
  const out2 = await res2.innerText();
  console.info(out1 == out2); // output: true
  console.info(out1); // output: More information...
  console.info(out2); // output: More information...

  // Traversal
  const result = await page.locator('p');
  const elementList = await result.elementHandles(); // elementList will contain list of <p> tags
  for (const element of elementList)
  {
    const out = await element.innerText()
    console.info(out);
  }
  // The above will output both the <p> tags' innerText i.e
  // This domain is for use in illustrative examples in...
  // More information...

  await browser.close();
})();

Поскольку вы упомянули, что вам нужно пройти через элементы HTML, elementHandles можно использовать для обхода элементов, указанных локатором, как указано в приведенном выше коде.

Ответ принят как подходящий

Вы можете просто объединить селекторы, это разрешится div ниже abc

page.locator("abc div")

Другие вопросы по теме