Web UI自动化测试实例(登录网易云音乐账户)——（五）Taiko

初步想法：用Taiko自动化工具，实现登录太简单了吧！

一、对taiko的认识

1. 初识taiko： 自动化测试工具-----Taiko
2. taiko的安装：可能踩如下坑，那些年的坑之node.js 和 taiko

二、应用----Taiko

1. 手机号登录网易云音乐的全部步骤：步骤

2. 之前用Python+selenium实现了手机号登录网易云音乐UI自动化，见
   Web UI自动化测试实例(登入网易云音乐账户)——（四）Python+Unittest+selenium_POM模式

3. 本次用taiko,
   taiko无需定位元素控件，很直观地使用界面上显示名称+API，taiko 提供了丰富的selector API 和其他api。（每一个API都通俗易懂，不过还是有些API需要研究的，比如，当界面上出现了好多个名称一样的，程序如何准确定位到它？）（本文中，这个界面上的，登录控件，直接传入click(‘登录’)是无法正确定位到的，因为有好多个叫登录的，后续我还要去看看，/(ㄒoㄒ)//(ㄒoㄒ)/）
   

Taiko的应用

de
先进入taiko

在taiko控制台下，分别输入如下，

#打开chrome浏览器
openBrowser({headless: false})
#全屏
resizeWindow({width:1280, height:800})
#打开网易云音乐
goto('https://music.163.com/')
#点击 登录
click('登录')
#点击 选择其他登录模式
click('选择其他登录模式')
#点击 同意
checkBox(near('同意')).check()
#点击手机号登录
click('手机号登录')
#光标聚焦到请输入手机号码输入框
 focus(textBox('请输入手机号'))
#输入手机号码
write('18201893613')
#光标聚焦到请输入密码输入框
focus(textBox('请输入密码'))
#输入密码
write('fcgj656')
#点击登录，这个不要输入了
click('登录')  #该api需要研究，此处的click('登录')并不能点击到正确的登录元素控件的位置

显示结果如下：

2. 如果不想要终端一个个输入，通过执行js文件,可使用如下：

demo.js

const { openBrowser, resizeWindow, goto, click, near, checkBox, textBox, focus, write, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser({headless: false});
        await resizeWindow({width:1280, height:800});
        await goto('https://music.163.com/');
        await click('登录');
        await click('选择其他登录模式');
        await checkBox(near('同意')).check();
        await click('手机号登录');
        await focus(textBox('请输入手机号'));
        await write('18201893613');
        await focus(textBox('请输入密码'));
        await write('fcgj656');
        // await click('登录'); 点击登录这个界面，因为界面上有两个登录，需要区分，还需研究一下 
        
    } catch (error) {
        console.error(error);
    } finally {
        await closeBrowser();
    }
})();

terminal界面输入

npx taiko .\demo.js

PS：
采用taiko控制台，一个个命令输入的方式，平常不debug的话，要及时关闭，太吃cpu内存了，之前把我90%占完了，/(ㄒoㄒ)/~~