selenium---浏览器F12的正确用法

这篇具有很好参考价值的文章主要介绍了selenium---浏览器F12的正确用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

测试过程中经常会进行抓包来查看一些错误内容,判断是前端的问题还是后端的问题,常见的抓包工具有Fiddler,Charles,还有web端的F12。今天安静来介绍下如何通过F12进行抓包查看请求内容

浏览器抓包

打开百度按下键盘F12或者邮件选择检查,这里可以看到有一些选项:Elements,Console,Sources,Netork,performance,Memory,Application,Secutity,Lighthouse,那么这写选择都是干什么的呢?对于我们测试来说能给我们提供什么信息呢?安静一个个进行介绍f12怎么看请求的参数,selenium,css,javascript,html,前端

Elements

Elements:表示当前页面的HTML内容,一些挡圈页面上的元素属性,都可以在这里进行查看到。

我们也可以进行修改一些参数变成我们想要的内容。比如:我们想要将"百度一下"变成“测试-安静”,直接双击HTML页面上的文字"百度一下"进行修改。

f12怎么看请求的参数,selenium,css,javascript,html,前端

Console

Console:这里使用到JaveScript中的定位方法。 那么对于我们测试来说有什么用呢? 我们可以在Console中通过JS语法查看元素是否唯一性,以及确定我们的定位是否正确,这里的支持语法比较多,如:xpath,css,id,name,class,tag。具体的我们举例来简单说明

xpath语法

xpath需要在前面加入$x,后面跟xpath正常语法,语法: $x("//*[@id='xx']") 安静还是拿百度来举例,这里length=1表示只有一个元素符合我们输入的语法,也确保了我们的元素唯一性

f12怎么看请求的参数,selenium,css,javascript,html,前端

CSS语法

Css在前面加入$$,后面正常跟Css写法。语法: $$('#xx') 这里写的是css的定位语法

f12怎么看请求的参数,selenium,css,javascript,html,前端

ID语法

ID语法书写:document.getElementById("xx")

f12怎么看请求的参数,selenium,css,javascript,html,前端

class语法

class语法书写:document.getElementsByClassName("xx")

f12怎么看请求的参数,selenium,css,javascript,html,前端

Sources

这里主要介绍了一些JS,css等一些渲染文件,对于我们测试来说可能不是特别重要,除非有特定需求,可以了解下。

Netork

Netork用来查看网络请求内容。也就是一些htttp请求,比如get,post,put, delete等多种方式,当然最常见的还是get和post。

get请求

f12怎么看请求的参数,selenium,css,javascript,html,前端

通过上图可以看到,我们的一些请求百度的URL,以及请求方式,请求头中的参数信息,下面还有一些请求的get的参数值(这里安静没有截图出来。)

post请求

安静通过豆瓣网的登录来查看一些参数请求内容

f12怎么看请求的参数,selenium,css,javascript,html,前端

可以看到请求登录的url地址,请求方式post,以及请求头包含的内容

f12怎么看请求的参数,selenium,css,javascript,html,前端

图上可以很请求的看到登录的post请求参数内容。

服务器返回内容

服务端的返回内容需要在这个页面中的preview中进行查看。

f12怎么看请求的参数,selenium,css,javascript,html,前端

通过上图可以看到,输入了错误的账号名和密码去进行登录,登录失败,服务器返回了账号密码错误。

performance

performance:可以简单的来做一下页面的一个性能分析,安静这里通过百度来演示。

f12怎么看请求的参数,selenium,css,javascript,html,前端

Memory

Memory:可以来录制一段页面上的内容,然后进行分析其内存情况。

f12怎么看请求的参数,selenium,css,javascript,html,前端

Application

Application:表示其请求中所存放的cookies,token,缓存内容,css,js等一些值。如果是测试cookies相关,可以进行在这个页面中查看cookies内容。

f12怎么看请求的参数,selenium,css,javascript,html,前端

总结

这里安静简单的通过一些案例进行介绍了如何使用F12以及通过F12进行抓取请求内容,以及查看元素属性并确定属性的唯一值。熟练的使用F12工具,可以帮助我们在工作中快速定位到bug。感谢您的阅读。希望对您有所帮助。文章来源地址https://www.toymoban.com/news/detail-704964.html

到了这里,关于selenium---浏览器F12的正确用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • F12 浏览器调试模式页面刷新 network 日志刷新消失的解决办法

    每次请求刷新后都把之前的请求记录刷新掉了,把preserve log勾选上后,所有的请求都会保留,再也不怕抓不到记录了。

    2024年02月15日
    浏览(55)
  • 多种方法解决谷歌(chrome)、edge、火狐等浏览器F12打不开调试页面或调试模式(面板)的问题。

    不论是前端开发者,还是后端开发者,我们在调试 web 项目时,偶尔弹出相关错误。 此时,我们需要打开浏览器的调试模式,如下图所示: 通过浏览器的调试模式,来排查错误的根源: 后端接口是否有问题 前端 js 或者相关前端框架是否有问题。 当然,我们也可以通过调试

    2024年02月09日
    浏览(59)
  • 进入网页后先输密码,密码(动态加密)正确在加载网页信息,否则不加载任何信息(F12也看不到数据)

    内部人员测试使用的网页,权限有些大,不适用与客户,但是需要再客户电脑上调试使用。 简单的html界面,要求: 使用js原生方法 prompt() 用途: 语法:

    2024年02月22日
    浏览(31)
  • python爬虫教程:selenium常用API用法和浏览器控制

    selenium api selenium 新版本( 4.8.2 )很多函数,包括元素定位、很多 API 方法均发生变化,本文记录以 selenium4.8.2 为准。 webdriver 常用 API 方法 描述 get(String url) 访问目标url地址,打开网页 current_url 获取当前页面url地址 title 获取页面标题 page_source 获取页面源代码 close() 关闭浏览器当

    2024年02月05日
    浏览(44)
  • f12工具

    抓包工具 elements查看器: 可用于自动化脚本的元素定位,前端页面-html页面 Selenium提供了八种定位元素方式 1、id 2、name 3、class_name 4、tag_name 5、link_text 6、partial_link_text 7、XPath(倾向于用相对路径://input【name=“phone”】) 8、CSS console控制台 source调试器 network网络 performance性能

    2024年02月09日
    浏览(29)
  • F12诡异Bug分享

    java运行的时候会产生class文件,其本身是跑class文件的,但某个实施反馈一个经典版本的长久bug。 当使用模糊查询时,一页一页查看,在倒数第二页时,点击下一页,页面静止不动。(正常情况下应该是会跳到最后一页。) 反馈后,我查看这个java文件的代码,没有问题。怀

    2024年02月13日
    浏览(28)
  • js防止F12扒数据

    当打开 F12 控制台时,效果如下:

    2024年02月13日
    浏览(29)
  • MiniNK WEB 选拔题 by F12

    除了梦想外一无所有的我们,将会和蔑视与困境做最后的斗争,这是最后一舞 N0wayBack 联合战队成立以来一直致力于信息安全技术的研究,作为联合战队活跃在各大 CTF (信息安全竞赛)赛事之中,并依靠着过硬的实力吸引了无数同样热爱安全的小伙伴。战队现有师傅20余名,

    2024年02月16日
    浏览(30)
  • web问题定位:F12,如何找到对应接口

    接口查看法,是我们最常用的定位前后端问题的方法。即:一般用来查看是后端返回给前端的数据有误,还是前端显示有误。 主流浏览器(如Chrome,FireFox,等)都有自带的接口查看工具,可以通过F12(设置–工具–开发者工具)开启抓包。每进行一个操作,一般都会调用对

    2024年02月04日
    浏览(38)
  • 解决Vue项目F12查看源代码问题

    在Vue项目中,Vue-cli默认可以通过F12查看前端代码,这可能会造成前端代码泄露。 为了代码的安全性,隐藏掉比较好。配置如下: Vue-cli2配置 打开config目录中的index.js文件,将build对象里的productionSourceMap设置成false Vue-cli3及以上版本配置 在跟目录打开Vue.config.js文件,如果没有

    2024年02月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包