如何用Python实现网页元素点击模拟？初学者必看：触屏点击操作教程

初学者，Python如何模拟网页按钮点击

首页，我们先掌握网页点击的实质：

实际上，从数据底层理解，我们对网页的操作可以概括为向服务器发送数据。

这样一来，我们有两种方法利用Python模拟网页按钮点击：

方法一：间接模拟。模拟向服务器发送数据。可以使用抓包工具，查看点击按钮时到底向服务器发送的是什么数据，然后使用python模拟发送的数据。

方法二：真实模拟。可以先找到按钮，然后执行点击。这个有现成的库，Selenium。

HCaptcha的模拟点击破解教程来了！

前面的文章我们介绍过ReCaptcha的模拟点击破解教程，但除了ReCaptcha，还有另外和ReCapacha验证流程很相似的验证码，叫做HCaptcha。

ReCaptcha是谷歌家的，因为某些原因，咱们国内是无法使用ReCaptcha的，所以有时候HCaptcha也成了一些国际性网站的较好的选择。

那今天我们就来了解下HCaptcha及其模拟点击破解流程。

HCaptcha

我们首先看看HCaptcha的验证交互流程，其Demo网站为 ，打开之后，我们可以看到如下的验证码入口页面：

看起来入口和ReCaptcha很相似的对吧，其实验证流程也是很相似的。

当我们点击复选框时，验证码会先通过其风险分析引擎判断当前用户的风险，如果是低风险用户，便可以直接通过，反之，验证码会弹出对话框，让我们回答对话框中的问题，类似如下：

这时候我们看到HCaptcha验证码会给我们一个问题，比如上图的问题是「请点击每张包含飞机的图片」，我们需要从下面的九张图中选择出含有飞机的图片，如果九张图片中，没有飞机，则点击「跳过/ Skip」按钮，如果有，则将所有带有飞机的图片都选择上，跳过按钮会变成「检查/ Verify」按钮，验证通过之后我们就可以看到如下的验证成功的效果了：

是不是整体流程和ReCaptcha还是非常的相近？

但其实这个比ReCaptcha简单一些，它的验证码图片每次一定是3x3的，没有4x4的，而且点击一个图之后不会再出现一个新的小图让我们二次选择，所以其破解思路也相对简单一些。

如何破解

整个流程其实我们稍微梳理下，就知道整体的破解思路了，有这么两个关键点：

第一是把上面的文字内容找出来，以便于我们知道要点击的内容是什么。

第二就是我们要知道哪些目标图片和上面的文字是匹配的，找到了依次模拟点击就好了。

听起来似乎很简单的对吧，但第二点是一个难点，我们咋知道哪些图片和文字匹配的呢？这就是一个难题。

前面ReCaptcha的破解过程我们了解过了使用YesCaptcha来进行图片的识别，除了ReCaptcha，YesCaptcha其实也支持HCaptcha的验证码识别，利用YesCaptcha我们也能轻松知道哪些图片和输入内容是匹配的。

下面让我们来试试看。

YesCaptcha

在使用之前我们需要先注册下这个网站，网站地址是 ，注册个账号之后大家可以在后台获取一个账户密钥，也就是ClientKey，保存备用。

OK，然后我们可以查看下这里的官方文档：，这里介绍介绍了一个API，大致内容是这样的。

首先有一个创建任务的API，API地址为 ，然后看下请求参数：

这里我们需要传入这么几个参数：

type：内容就是****

queries：是验证码对应的Base64编码，这里直接转成一个列表就可以

question：对应的问题ID，也就是识别目标的代号，这里其实就是问题整句的内容

corrdinate：一个返回结果的控制开关，默认会返回每张图片识别的true/ false结果，也就是第x张图片是否和图片匹配，如果加上该参数，那么API就会返回对应匹配图片的索引。

比如这里我们可以POST这样的一个内容给服务器，结构如下：

{"clientKey":"cc9c18d3e263515c2c072b36a7125eecc078618f","task":{"type":"HCaptchaClassification","queries": ["/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8Uw...", "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8Uw...", "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8Uw...",],"question":"请单击每个包含卡车的图像。"//直接上传问题整句}}

然后服务器就会返回类似这样的响应：

{"errorId": 0,"errorCode":"","status":"ready","solution":{"objects": [true, false, false, true, true, false, true, true]//返回图片是否为目标,"labels": ["truck","boat","boat","truck","truck","airplane-right","truck","truck"]//返回图片对应的标签},"taskId":"5aa8be0c-94a5-11ec-80d7-00163f00a53c""}

OK，我们可以看到，返回结果的solution字段中的objects字段就包含了一串true和false的列表，这就代表了每张图片是否和目标匹配。

知道了这个结果之后，我们只需要将返回结果为true的图片进行模拟点击就好了。

代码基础实现

行，那有了基本思路之后，那我们就开始用Python实现下整个流程吧，这里我们就拿 这个网站作为样例来讲解下整个识别和模拟点击过程。

识别封装

首先我们对上面的任务API实现一下封装，来先写一个类：

from loguru import logger

from app.settings import CAPTCHA_RESOLVER_API_KEY, CAPTCHA_RESOLVER_API_URL

import requests

class CaptchaResolver(object):

def init(self, api_url=CAPTCHA_RESOLVER_API_URL, api_key=CAPTCHA_RESOLVER_API_KEY):

self.api_url= api_url

self.api_key= api_key

def create_task(self, queries, question):

logger.debug(f'start to recognize image for question{question}')

data={"clientKey": self.api_key,"task":{"type":"HCaptchaClassification","queries": queries,"question": question}}

try:

response= requests.post(self.api_url, json=data)

result= response.json()

logger.debug(f'captcha recogize result{result}')

return result

except requests.RequestException:

logger.exception('error occurred while recognizing captcha', exc_info=True)

from loguru import logger

from app.settings import CAPTCHA_RESOLVER_API_KEY, CAPTCHA_RESOLVER_API_URL

import requests

class CaptchaSolver(object):

def init(self, api_url=CAPTCHA_RESOLVER_API_URL, api_key=CAPTCHA_RESOLVER_API_KEY):

self.api_url = api_url

self.api_key = api_key

def create_task(self, queries, question):

logger.debug(f'start to recognize image for question{question}')

data = {"clientKey": self.api_key,

"task": {"type": "HCaptchaClassification",

"queries": queries,

"question": question}}

try:

response = requests.post(self.api_url, json=data)

result = response.json()

logger.debug(f'captcha recognize result{result}')

return result

except requests.RequestException:

logger.exception('error occurred while recognizing captcha', exc_info=True)

OK, here we first define a class CaptchaSolver, which mainly accepts two parameters, one is api_url, which corresponds to this API address, and the other is api_key, which is the ClientKey introduced in the previous text.

Then we define a create_task method, which accepts two parameters, the first parameter queries is the Base64 encoding of each captcha image, and the second parameter question is the whole sentence to be recognized, which uses requests to simulate the entire request and finally returns the corresponding JSON response result.

Basic Framework

OK, so next we come to simulate opening the instance website with Selenium, then simulate clicking to trigger the captcha, and then recognize the captcha.

First, we write a rough framework:

import time

from selenium import webdriver

from selenium.webdriver.support.wait import WebDriverWait

from selenium.webdriver.remote.webelement import WebElement

from selenium.webdriver.common.action_chains import ActionChains

from app.captcha_resolver import CaptchaSolver

class Solution(object):

def init(self, url):

self.browser = webdriver.Chrome()

self.browser.get(url)

self.wait = WebDriverWait(self.browser, 10)

self.captcha_resolver = CaptchaResolver()

def del(self):

time.sleep(10)

self.browser.close()

Here, we first initialize a Chrome browser operation object in the constructor, then call the corresponding get method to open the instance website, and then declare a WebDriverWait object and a CaptchaResolver object to handle node search and captcha recognition operations, respectively, for future use.

Iframe Switch Support

Next, the next step is to simulate clicking the captcha entry to trigger the captcha, right?

By observing, we find that the captcha is very similar to ReCaptcha, and its entry is actually loaded in an iframe, the corresponding iframe is as follows:

And the popped out captcha image is also in another iframe, as shown in the figure below:

Selenium needs to switch to the corresponding iframe to find the corresponding node, otherwise it cannot find the corresponding node and cannot simulate clicking and so on.

So here we define several utility methods that can switch to the iframe corresponding to the entry and the iframe corresponding to the captcha itself, the code is as follows:

def get_captcha_entry_iframe(self)-> WebElement:self.browser.switch_to.default_content()captcha_entry_iframe= self.browser.find_element_by_css_selector('.h-captcha> iframe')return captcha_entry_iframedef switch_to_captcha_entry_iframe(self)-> None:captcha_entry_iframe: WebElement= self.get_captcha_entry_iframe()self.browser.switch_to.frame(captcha_entry_iframe)def get_captcha_content_iframe(self)-> WebElement:self.browser.switch_to.default_content()captcha_content_iframe= self.browser.find_element_by_xpath('//iframe[contains(title,"Main content")]')return captcha_content_iframedef switch_to_captcha_content_iframe(self)-> None:captcha_content_iframe: WebElement= self.get_captcha_content_iframe()self.browser.switch_to.frame(captcha_content_iframe)

This way, we just need to call switch_to_captcha_content_iframe to find the content inside the captcha image, and call switch_to_captcha_entry_iframe to find the content inside the captcha entry.

Triggering the Captcha

OK, so the next step is to simulate clicking the captcha entry to trigger the captcha, right?

The implementation is simple, the code is as follows:

def trigger_captcha(self)-> None:self.switch_to_captcha_entry_iframe()captcha_entry= self.wait.until(EC.presence_of_element_located((By.CSS_SELECTOR,'#anchor#checkbox')))captcha_entry.click()time.sleep(2)self.switch_to_captcha_content_iframe()captcha_element: WebElement= self.get_captcha_element()if captcha_element.is_displayed:logger.debug('triggered captcha successfully')