javascript - 如何使用 Tampermonkey 在 React 应用程序中模拟点击？

Question

我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的单击。不幸的是，由于 React 有自己的影子 DOM，使用 document.querySelector() 的天真方法不工作。我遇到了一些需要对 react 组件本身进行修改的解决方案，而其他一些解决方案则试图利用 React 测试工具，这在 Tampermonkey 上下文中都不是很好。

总结一下我的问题:我必须使用 React 单击“托管”组件。 Tampermonkey(使用普通的旧javascript)有什么办法吗？

Simulate click event on react element
How to programmatically fill input elements built with React?
https://reactjs.org/docs/test-utils.html

是否有一种简单的旧 javascript 方法可以在动态生成的 react 元素上触发点击事件？

代码:

我想要的元素的选择器是#rubric_criterion_8 > div > table > tbody > tr:nth-child(5) > td.level-description ，它适用于 document.querySelector() .但是点击事件不起作用。

相关的 react 组件如下(来自 Chrome 开发工具):

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...

似乎如果我可以访问 react 组件，那么我可以发送正确的 setState .但这对 Tampermonkey 来说可行吗？

Answer 1

好的，我想通了。事实证明，您可以通过常规 javascript 与 React 生成的元素(大部分)进行交互。但是，您需要等待元素实际生成!因此，我的原始脚本有效，我只需要延迟执行它，直到文档准备好，我使用 setTimeout 一起破解了它。 ，因为我不想在我的 Tampermonkey 脚本中添加 jquery 依赖项。

这是脚本的最小工作示例:

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);