puppeteer|自动化UI测试|JS|零基础入门(二)——找到页面元素与输入、点击

news/2024/7/19 12:48:19 标签: 软件测试, js, ui, chrome devtools

puppeteer——找到页面元素、输入与点击

  • 从API学习
    • page.$(selector)
    • password_text.type(text)
    • login_btn.click()


话不多说,上干货

	//从page中找到SELECTOR.PASSWORD_TEXT所指向的密码输入框
	const password_text = await page.$(SELECTOR.PASSWORD_TEXT);
	//向密码框输入文本TEXT.PASSWORD
    await password_text.type(TEXT.PASSWORD);
    //从page中找到SELECTOR.LOGIN_BTN所指向的登录按钮
    const login_btn = await page.$(SELECTOR.LOGIN_BTN);
    //点击登录按钮
    await login_btn.click();

从API学习

page.$(selector)

这个方法返回这个元素的元素句柄,在代码中我用一个常量保存这个句柄方便后续操作。

selector——页面元素选择器
这个具体怎么找到呢,以百度为例,演示如下:
1、Ctrl+Shift+C 或 F12后点击图中1处选择器 —— 找到需要的元素(如图2处)点击,找到3处
在这里插入图片描述
2、依次——右键→copy→copy selecotr
在这里插入图片描述
3、粘贴出来的就是此输入框的selector——#kw

这里需要注意的是,在传入selector时,要加引号(如’#kw’),作为string类型传入


password_text.type(text)

这里的password_text实际上就是输入框的元素句柄,在官方文档中这样写:

elementHandle.type(text[, options])

text就是我们希望自动输入的文本
而这里有一个options参数,里面实际上只用来设置delay延迟输入的,就像:

await elementHandle.type(‘World’, {delay: 100}); // 像人一样输入的慢一点

如果用过自动输入,就会知道电脑给你输入的时候完全是一瞬间,有些网站会因此针对性进行是否为真人操作的检查,这个参数未来遇到这类网站会有大用处。


login_btn.click()

这里的login_btn实际上就是登录按钮的元素句柄,在官方文档中这样写:

elementHandle.click([options])

这里的options我平常不怎么用,但里面的参数也很有意思可以自行前往了解。


记录学习、爬坑经验
0年经验小白,欢迎大佬指点!
希望可以帮到你!


http://www.niftyadmin.cn/n/1356695.html

相关文章

NYOJ-A/B Problem

A/B Problem 时间限制:1000 ms | 内存限制:65535 KB难度:3描述做了AB Problem,A/B Problem不是什么问题了吧! 输入每组测试样例一行,首先一个号码A,中间一个或多个空格,然后一个符…

puppeteer|自动化UI测试|JS|零基础入门(三)——异步操作与promise、async、await

puppeteer——异步操作、promise、async、await 异步操作promiseasync与await内容硬核,个人理解! 前面的代码中,开头都是以async、await开头,并且有看到promise类型的返回值,今天撸顺它,看看到底是怎么个事…

NYOJ-分数拆分

分数拆分 时间限制:3000 ms | 内存限制:65535 KB难度:1描述现在输入一个正整数k,找到所有的正整数x>y,使得1/k1/x1/y. 输入第一行输入一个整数n,代表有n组测试数据。接下来n行每行输入一个正整数k输出按顺序输出对应每行的k找到所有满足…

puppeteer|自动化UI测试|JS|零基础入门(四)——页面截图、元素截图

话不多说,看代码 //登陆页面截图,保存在ScreenShot文件夹,并命名为login_page.pngawait page.screenshot({path:login_page.png}) //登陆按钮截图,保存在ScreenShot文件夹,并命名为login_button.pngawait login_btn.…

NYOJ-小明的调查作业

小明的调查作业 时间限制:1000 ms | 内存限制:65535 KB难度:1描述小明的老师布置了一份调查作业,小明想在学校中请一些同学一起做一项问卷调查,聪明的小明为了实验的客观性,想利用自己的计算机知识帮助自…

puppeteer|自动化UI测试|JS|零基础入门(五)——frame、iframe

话不多说,看代码 //用frames函数取出页面所有iframeconst frames await page.frames();//使用循环取出iframefor (var i of frames) { //使用url()函数得到里面的url标题进行对比if (i.url().includes(frame_url)){const frame i;} };await frame.waitForSelector…

NYOJ-另一种阶乘问题

另一种阶乘问题 时间限制:3000 ms | 内存限制:65535 KB难度:1描述大家都知道阶乘这个概念,举个简单的例子:5!1*2*3*4*5.现在我们引入一种新的阶乘概念,将原来的每个数相乘变为i不大于n的所有奇…

NYOJ-众数问题

众数问题 时间限制:3000 ms | 内存限制:65535 KB难度:3描述所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重的重数最大的元素成为众数。例如&a…