Python 爬虫 Selenium 中滑动验证码

最新推荐文章于 2025-05-28 09:52:53 发布

原创

最新推荐文章于 2025-05-28 09:52:53 发布 · 3.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#selenium

本文介绍了如何使用Vue实现图片滑动验证码，并利用Selenium进行识别和模拟滑动。首先，通过Vue插件vue-puzzle-vcode创建滑动验证码，然后用Selenium点击进入验证界面，获取验证码图片，通过图像处理匹配缺口位置，最后模拟滑动轨迹完成验证。代码示例详细展示了整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Python 爬虫 Selenium 中滑动验证码

免责声明：自本文章发布起, 本文章仅供参考，不得转载，不得复制等操作。浏览本文章的当事人如涉及到任何违反国家法律法规造成的一切后果由浏览本文章的当事人自行承担与本文章博客主无关。以及由于浏览本文章的当事人转载，复制等操作涉及到任何违反国家法律法规引起的纠纷和造成的一切后果由浏览本文章的当事人自行承担与本文章博客主无关。

1. Vue 实现图片滑动验证码

1.1 安装插件

使用 vue-puzzle-vcode 插件:
官方网址: https://gitee.com/beeworkshop/vue-puzzle-vcode/tree/master/

npm install vue-puzzle-vcode --save

1.2 实现例子

设置更多参数看官网

<template>
  <div id="app">
    <Vcode
        :imgs="imgs"
        :show="isShow"
        @success="success"
        @close="close"
    />
    <button @click="submit">登录</button>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";

import img1 from "./assets/1.webp";
import img2 from "./assets/2.jpg";
import img3 from "./assets/3.jpg";
import img4 from "./assets/4.jpg";

export default {
     
     
  data() {
     
     
    return {
     
     
      isShow: false, // 验证码模态框是否出现
      imgs: [img1, img2, img3, img4]  // 验证码模态框背景照片
    };
  },
  components: {
     
     
    Vcode
  },
  methods: {
     
     
    submit() {
     
     
      this.isShow = true;
    },
    // 用户通过了验证
    success(msg) {
     
     
      console.log(msg);
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
     
     
      this.isShow = false;
    }
  }
};
</script>

<style>
#app {
     
     
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

button {
     
     
  font-size: 25px;
  padding: 5px 30px;
  border-radius: 0;
  background-color: #48a9ff;
  border: aliceblue;
  cursor: pointer