时间戳

首页 > 解决方案 > 如何使用 Tampermonkey 在 React 应用程序中模拟点击？

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

问题描述

我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的单击。不幸的是，由于 React 有自己的影子 DOM，使用的幼稚方法document.querySelector()不起作用。我遇到了一些需要对 react 组件本身进行修改的解决方案，而其他一些解决方案则试图利用 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 开发工具）：

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 来说可行吗？

标签： javascriptreactjstampermonkeyreact-testing-libraryclient-side-scripting

解决方案

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

推荐阅读