如何使用 tampermonkey 在 React 应用程序中模拟点击？

Question

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

总结一下我的问题：我必须使用 React 单击组件 "managed"。有什么方法可以从 Tampermonkey（使用普通的旧 javascript）做到这一点？

https://reactjs.org/docs/test-utils.html

是否有一种普通的旧 javascript 方法可以在动态生成的反应元素上触发点击事件？

代码：

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

相关的 React 组件如下（来自 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...

似乎如果我可以访问 React 组件，那么我就可以发送正确的 setState。但这对 Tampermonkey 可行吗？

Answer 1

好的，我明白了。事实证明，您可以通过常规 javascript 与 React 生成的元素（大部分）进行交互。但是，您需要等待元素真正生成！因此，我的原始脚本有效，我只需要延迟它的执行直到文档准备好，我使用 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);

如何使用 tampermonkey 在 React 应用程序中模拟点击？

How to simulate click in react app using tampermonkey?

javascript

client-side-scripting

tampermonkey

reactjs

react-testing-library