反应作弊器：通过轮询方案，在浏览器控制台中完成

本文链接：https://blog.csdn.net/f12306555/article/details/129860004

一、问题描述

二、工作准备

之前已经通过selenium方案实现反应作弊器。用selenium实现反应作弊器的文章链接如下。反应作弊器：selenium实现_LBF好人的博客-CSDN博客先用stub/mock页面对代码测试，如果通过stub/mock测试，并且stub/mock页面正如我们所期待的那样工作，说明我们编写的代码无错误，这时去用代码运行目标网站时也会如我们期待的一样工作，就不会对目标网站造成破坏。在stub/mock页面中调试完毕，得到预期结果之后，在反应测试网站测试，得到的反应时间为39ms，对比人手动在网站测试的成绩如图1-3的261ms，反应时间变短。这个反应时间是从页面由红色变为绿色开始，到点击页面为止这段时间，如图1-3，这次测试的反应时间为261ms。https://blog.csdn.net/f12306555/article/details/129337775

一、问题描述

我们测反应速度时，测得的结果一般在300ms左右。

这是反应测试网站：https://humanbenchmark.com/tests/reactiontime

反应测试网站页面包括三种颜色，红（准确的rgb值为rgb(206, 38, 54)）、绿（准确的rgb值为rgb(75, 219, 106)）和蓝（准确的rgb值为rgb(43, 135, 209)），如图1-1，1-2和1-3。

图1-1

图1-2

图1-3

进入反应测试网站，当出现上述红色页面时，根据页面提示“Wait for green”等待即可。在随机等待几秒（大约三秒）之后，页面会自动变为绿色，并且有“Click”字样，当页面变为绿色时就应该点击页面，点击页面之后就会变为蓝色，并且页面上会记录你的反应时间。

这个反应时间是从页面由红色变为绿色开始，到点击页面为止这段时间，如图1-3，这次测试的反应时间为261ms。如果想继续测反应时间，再点击蓝色页面即可。

现在要通过轮询，在浏览器控制台中输入代码来加快反应测试结果。更重要的是学习技术，学习知识。

二、工作准备

2.1 安装浏览器

此方案使用的浏览器是Google Chrome。

2.2 stub/mock页面

写一个简单的stub/mock页面，用于在调试作弊器时测试。在完成编写作弊器代码之前，要经过若干次的代码调试，而调试的结果虽然是可以预知的，但是在代码编写过程中可能会出现不可避免的逻辑错误、语法错误等。如果在代码编写完成并运行成功之前去用目标网站去调试，对目标网站可能造成破坏，可能会被目标网站视为恶意攻击。所以先用stub/mock页面对代码测试，如果通过stub/mock测试，并且stub/mock页面正如我们所期待的那样工作，说明我们编写的代码无错误，这时去用代码运行目标网站时也会如我们期待的一样工作，就不会对目标网站造成破坏。

页面代码见附录A。

页面功能：在一定时间间隔可以改变页面颜色（代码中设置的时间间隔是3秒）。

页面展示效果，如图2-1和图2-2，stub/mock页面颜色的rgb值与反应测试网站的rgb值相同。

图2-1

图2-2

红色和绿色下方的“反应时间”处，在点击绿色页面时会记录反应时间的毫秒数，如图2-3，手动点击，此次反应时间是380ms。

图2-3

三、技术路线

通过setInterval轮询，在浏览器控制台中输入代码，实现反应作弊器。

具体流程如下。

1.设置setInterval轮询，轮询的时间间隔设置为10ms。

2.每隔10ms获取一次页面的颜色。

3.当页面的颜色变为绿色时，触发点击事件。

四、在stub/mock中测试

4.1 代码实现

在谷歌浏览器中打开页面，然后F12（或鼠标右键检查），在控制台中输入下面这段代码。

let bg = document.getElementById('bg');
let color = bg.style.backgroundColor;
let i = setInterval(() => {
    color = bg.style.backgroundColor;
    if(color == "rgb(75, 219, 106)") {
        bg.click();
    }

}, 10)

在控制台中输入，如图4-1。

图4-1

代码中，

1.设置了setInterval轮询，轮询的时间间隔为10ms，

2.通过DOM对象获取页面颜色，

3.当页面颜色为绿色时，即color == rgb(75, 219, 106)，也就是页面由红色变为了绿色，此时触发点击事件。

4.2 实验结果

如图4-2，在控制台中输入代码后，点击回车。程序运行，测得的反应时间为2ms。达到了缩短反应时间的目的。路线正确，可以在反应测试网站测试。

图4-2

五、在反应测试网站实现

5.1 遇到问题

按照技术路线，在反应测试网站输入代码时，通过DOM对象触发click事件时失效。比如说用下面这段代码，在控制台中运行时，不会达到预期的效果（不会触发页面的click事件）。

document.querySelector("#root > div > div:nth-child(4) > div.view-go.e18o0sx0.css-saet2v.e19owgy77").click()

还实验了这段代码，也不会达到预期的效果。

let a = document.querySelector('#root > div > div:nth-child(4) > div:first-child')
document.getElementsByClassName(a.className)[0].click()

5.2 解决问题

如图5-1，这是反应测试网站中源代码中设置的事件监听器。多次实验，只有在删除源代码中的mousedown事件监听器时屏幕点击效果才会失效（也可以写一个脚本实现删除过程），所以判断鼠标点击效果可能与mousedown事件有关。

图5-1

所以，为了用代码实现点击效果，我创建了一个mousedown事件，并触发mousedown事件，最终达到了期望的效果。下面这段代码的功能是创建mousedown事件，并触发事件。

let a = document.querySelector('#root > div > div:nth-child(4) > div:first-child')
let e = document.createEvent('MouseEvents');
e.initMouseEvent( 'mousedown', true, true, window, 1, 12, 345, 7, 220, false, false, false, false, 0, null );
 a.dispatchEvent(e);

5.3 代码实现

在谷歌浏览器中打开反应测试网站https://humanbenchmark.com/tests/reactiontime，然后F12（或鼠标右键检查），在控制台中输入下面这段代码即可。

轮询，间隔10ms获取一次页面颜色信息，当页面颜色为绿色，即rgb(75, 219, 106)时，创建mousedown事件并触发。

let i = setInterval(()=>{
    let a = document.querySelector('#root > div > div:nth-child(4) > div:first-child')
    let styless = window.getComputedStyle(a)
    let color = styless.getPropertyValue('background')
    if(color == 'rgb(75, 219, 106) none repeat scroll 0% 0% / auto padding-box border-box') {
    let e = document.createEvent('MouseEvents');
    e.initMouseEvent( 'mousedown', true, true, window, 1, 12, 345, 7, 220, false, false, false, false, 0, null );
    a.dispatchEvent(e);
}
}, 10)

在控制台中输入代码，如图5-2。

图5-2

5.4 实验结果

如图5-3，这是通过轮询方案得到的实验结果。反应时间为5ms，达到了缩短反应时间的的效果。

图5-3

致谢

感谢我的导师杨贵福老师在我整个学习过程中细心的指导，以及感谢田洪轩师兄和李娜师姐的指导。

附录A

stub/mock页面代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试页面</title>
		<script type="text/javascript">
			var timeStart;
			var timeEnd;
			window.onload = function() {
				var bg = document.getElementById("bg");
				setColor();		
				bg.addEventListener('click', function greenToBlue() {
				    if(bg.style.backgroundColor == "rgb(75, 219, 106)") {
						bg.style.backgroundColor = "rgb(43, 135, 209)"
						timeEnd = new Date().getTime();
						document.getElementById('time').innerHTML = (timeEnd - timeStart) + 'ms';
				}
				})
				window.setTimeout("changeColor()",3000);	
			}
			function setColor() {
				bg.style.backgroundColor="rgb(206, 38, 54)"
			}
			function changeColor() {
				if(bg.style.backgroundColor == "rgb(206, 38, 54)") {
					bg.style.backgroundColor="rgb(75, 219, 106)";
					 timeStart = new Date().getTime();
				} else {
					bg.style.backgroundColor="rgb(206, 38, 54)";
				}
				window.setTimeout("changeColor()",3000);
			}
			
		</script>
	</head>
	<body>
		<div id="bg" style="width: 400px; height: 400px;">
		</div>
		<div id="time">反应时间</div>
	</body>
</html>