Как смоделировать клик в приложении реакции, используя тампермонк? - PullRequest
Новая
       4

Как смоделировать клик в приложении реакции, используя тампермонк?

0 голосов
/ 02 марта 2020

Я пытаюсь смоделировать щелчок по элементу React, используя скрипт Tampermonkey. К сожалению, поскольку в React имеется собственный теневой DOM, наивные подходы, использующие document.querySelector(), не работают. Я сталкивался с некоторыми решениями, которые требуют модификации самих компонентов реагирования, в то время как некоторые другие пытаются использовать утилиты тестирования React, но ни одно из них не является хорошим в контексте Tampermonkey.

Подводя итог моему вопросу: я должен нажать на компонент «управляемый», используя React. Есть ли способ сделать это из Tampermonkey (который использует простой старый javascript)?

Имитация события щелчка на элементе реагирования Как программно заполнить элементы ввода, созданные с помощью React? https://reactjs.org/docs/test-utils.html

Существует ли простой старый javascript подход к запуску события щелчка в динамически генерируемом реактивном элементе?

Код:

Селектором для элемента, который я хочу, является #rubric_criterion_8 > div > table > tbody > tr:nth-child(5) > td.level-description, который отлично работает с document.querySelector(). Но событие щелчка не работает.

Соответствующий компонент реагирования находится ниже (из Chrome Dev Tools): 

export class MarksPanel extends React.Component {
  static defaultProps = {
    marks: []
  };

  constructor(props) {
    super(props);
    this.state = {
      expanded: new Set(),
    }
  }

  componentDidMount() {
    if (!this.props.released_to_students) {
      // TODO: Convert this to pure React
      // Capture the mouse event to add "active-criterion" to the clicked element
      $(document).on('click', '.rubric_criterion, .flexible_criterion, .checkbox_criterion', (e) => {
        let criterion = $(e.target).closest('.rubric_criterion, .flexible_criterion, .checkbox_criterion');
        if (!criterion.hasClass('unassigned')) {
          e.preventDefault();
          activeCriterion(criterion);
        }
      });
    }

//more code...

Похоже, что если я смогу получить доступ к компоненту реагирования, тогда я могу отправить соответствующий setState. Но возможно ли это от Tampermonkey?

1 Ответ

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

ОК, я понял это. Оказывается, вы можете взаимодействовать с сгенерированными React элементами (по большей части) через обычный javascript. Тем не менее, вам нужно подождать, пока элементы будут сгенерированы! Следовательно, мой оригинальный скрипт работал, мне просто нужно было отложить его выполнение до тех пор, пока документ не будет готов, что я взломал вместе, используя setTimeout, так как я не хотел добавлять зависимость jquery в мой скрипт Tampermonkey.

Вот минимальный рабочий пример скрипта: 

function enter_marks(){

    console.log("script running");
    const set_mark = document.querySelector("#rubric_criterion_8 > div > table > tbody > tr:nth-child(5)").click()
    console.log("Mark set!")
    console.log("finished execution");
}

setTimeout(enter_marks,2000);
...