前端web页面链接回归测试

前端web页面链接回归测试

概述

项目测试过程中会进行页面的回归测试，但是对于页面比较多，尤其是页面内链接比较多的地方，前端很难做到每个链接的回归测试，尤其对于腾讯广告官网，首页中链接有上百个，代码修改后，很难纯人工回归测试。但是，为了防止一些潜在错误的url，避免线上访问有404的情况，本文实践并整理了一些操作简单效果良好的方法，跟大家分享，不足之处请指正。

涉及的主要工具

• 1、Xenu Link Sleuth

• 2、screamingfrog

• 3、firefox link checker 插件（墙裂推荐）

1、Xenu Link Sleuth

• 官网介绍
• 有争议的：Good Practice or Waste Of Time

优点

• 目前最流程知名的工具，支持本地网页文件检查连接，也可以输入网址检查，分别列出网站的活链接以及死链接含图片链接。可以制作出HTML格式的网站地图，检测结果很清晰

AAAA.png

缺点

• 不支持mac

遗憾的是不支持mac环境，家里没有window机器，所以官网的图放一张。等回到公司后再拿window机器尝试。

其他类似的校验器

都不支持mac，所以不是我的菜，window同学可以尝试

• HTML Link Validator
• [Web Link Validator] (http://www.relsoftware.com/wlv/)

2、Screaming frog

• 官网介绍

不知道是不是在家网络环境的原因，官网点击下载，始终无法下载。

• 主要功能
  • 检测404链接
  • 检测临时或者永久重定向的链接
  • 分析页面标题和meat数据
  • 检测重复的url
  • 收集数据
• 缺点
  • 下载速度如蜗牛，官网下载无法成功
  • 个人下载地址

introduction.png screamingFrogdemo.png treeerro.png

3、firefox link checker

个人推荐！！！

• 如何安装

  • 1、点击火狐浏览器右上角选项按钮，选择“附加组件管理”；
  • 2、在弹出界面中的搜索栏搜索：link checker；
  • 3、在界面下方会展示搜索结果，点击后面的安装按钮即可安装，该扩展安装后需要重启浏览器。

• 如何使用

  • 打开要检测的页面，点击插件便可

• 如何查看

  • 自动检测完毕后，页面有link的地方会有标识块。
  • 绿色表示检测成功
  • 黄色表示url 重定向
  • 红色表示url 404
  • 打开控制台，查看重定向和404的页面

firefox.png

缺点

• 点击error时，无法直接跳转到报错的地方，有些埋藏的比较深的url 404时不好找。但是可以打开控制台进行查看

firefoxerror.png

参考文章

• [xenu-link-sleuth] (https://wptavern.com/how-to-check-for-broken-links-on-your-site-using-xenu-link-sleuth)
• good or bad
• screamingfrog