отправлять клики на кнопки «сгенерированный источник / вычисленный HTML» через консоль Chrome Dev Tools

Question

Мне нужно просмотреть большое количество видео на веб-странице (скриншот ниже). Видео частично скрыты. И чтобы просмотреть каждое видео, я должен нажать кнопку more один за другим (как показано на рисунке ниже).

Часто на странице 40 видео. Постоянно прокручивать и нажимать кнопку more снова и снова - это утомительно, и если я продолжу это делать, то думаю, что у меня будут повторяющиеся стрессовые травмы.

Итак, я решил использовать Chrome Dev Tools'console для идентификации кнопок и отправки им всех кликов в одном пакетном процессе.

Я могу найти кнопки more с помощью инструмента inspect в Chrome Dev Tools, например:

Хлебная крошка DOM-дерева кнопки more через inspect (нажмите, чтобы увеличить, внизу есть две части изображения):

Код разметки кнопки more выглядит следующим образом:

<button class="d2l-label-text" type="button">
    <d2l-icon class="d2l-button-subtle-icon" icon="d2l-tier1:chevron-down" dir="ltr"></d2l-icon>
    <span class="d2l-button-subtle-content"><!---->more<!----></span>
    <slot></slot>
</button>

и more button class is d2l-label-text

Я думал, что я сделаю что-то подобное в console:

> let allbuttonsArray = document.getElementsByClassName("d2l-label-text");

  for (let eachbutton of allbuttonsArray) {
    eachbutton.click();
  }

Однако, получается, что document.getElementsByClassName("d2l-label-text") нехватая что угодно. Длина массива результатов равна 0.

. Я попытался поэкспериментировать с некоторыми другими селекторами и обнаружил, что console не захватывает generated source/computed html, а только захватывает теги / элементы, которыетам в source (исходный источник, который можно получить через right-click, view source).

Мой вопрос: Что я делаю не так? Как заставить console захватить кнопки generated source/computed html more?

Answer 1

Как видно на скриншотах, элемент находится внутри ShadowRoot , что означает, что он недоступен напрямую с основного document.

. Чтобы найти такой элемент, выдолжен получить доступ к цепочке ShadowRoot рекурсивно.
В вашем случае в этой цепочке два элемента.

for (const more of document.querySelectorAll('d2l-more-less')) {
  for (const buttonSubtle of more.shadowRoot.querySelectorAll('d2l-button-subtle')) {
    const btn = buttonSubtle.shadowRoot.querySelector('button');
    if (btn) btn.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  }
}

В случае, если shadowRoot создается страницей в режиме 'closed', вы, вероятно, будете иметьподключить Element.prototype.attachShadow в скрипте контекста страницы .

Answer 2

Знаете ли вы, находится ли контент, который вы пытаетесь получить, внутри iframe на странице?

Если я так думаю, вам сначала нужно получить iframe, а затем использовать

theiframe.getElementsByClassName()