Puppeteer之多tab页下运行自动化测试以及实现页面元素拖动操作

上篇博客介绍了如何处理弹框以及操作iframe里面的页面元素，此篇博客将介绍如何在多tab页间切换以及完成页面元素的拖动操作。同样为了完成此次课程目标，拆分了2个task。

• 多tab页操作
• 实现页面元素拖动操作

接下来我们就开始第一个task。

多tab页操作

多tab间的跳转操作主要有两种方式进行解决，第一种是能提前获取到多个tab的页面地址，通过创建多个page对象，调用page.goto()方法打开需要跳转的tab页面，再通过page.bringToFront()实现多tab页间切换。第二种是增加监听的方式，当监听到主页面上点击某个连接，页面弹出一个新的tab页后，将新tab页的page对象赋值到给原有的page对象，这样就可以操作新tab页上面的所有元素了。

接下来让我们先看第一种实现方式的案例，同样，执行“npn run multiple-tab”即可执行下面的案例。

describe("multiple tab demo", async () => {
    it("change to another tab with multiple page object", async () => {
        await page.goto("http://juliemr.github.io/protractor-demo/");
        //前面讲过，引入了jest-puppeteer，这个第三方包对外提供了一个全局的page对象，这里用全局的page对象访问第一个页面

        const page2 = await browser.newPage();
        //调用browser.newPage()创建了第二个page对象

        await page2.goto("https://angular.realworld.io/");
        //第二个page对象打开新的一个web页面，运行案例时可以发现当page2对象打开页面时，焦点在page2对象上
        
        await page.bringToFront();
        //调用bringToFront（）切换到第一个页面

        await expect(page).toFill('input[ng-model="first"]', '5');
        await expect(page).toSelect('select[ng-model="operator"]', 'SUBTRACTION');
        await expect(page).toFill('input[ng-model="second"]', '3');
        await expect(page).toClick('#gobutton');
        await expect(page).toMatchElement('h2', {text: '2'});
        //以上是在第一个页面上进行的操作，使用的页面对象都是page

        await page2.bringToFront();
        //调用bringToFront（）切换到第二个页面

        await expect(page2).toClick('app-layout-header li a', {text: 'Sign in'});
        await expect(page2).toFill('app-auth-page form input[formcontrolname="email"]', 'e2etest@163.com');
        await expect(page2).toFill('app-auth-page form input[formcontrolname="password"]', '12345678');
        await expect(page2).toClick('app-auth-page button[type="submit"]');
        //以上是在第二个页面上进行的操作，使用的页面对象都是page2
    });
});

通过上面的案例可以发现，要实现多tab页间的跳转很简单，有多少个tab页，就创建多少个page对象，然后通过调用pageX.bringToFront()切换到要操作的tab页上即可。

接下来我们看看第二种实现机制，监听机制，当监听到有新的tab页时，将新的tab页对象赋值给page对象，这样就实现了跳转到新的tab页。同样，执行“npm run multiple-tab2"即可执行下面的案例。

const waitUntil = require('../common/waitUntil');
describe("multiple tab2 demo",  () => {
    it("change to another tab with listener way", async () => {
        browser.on('targetcreated', async (target) => {
            if (target.type() === 'page') {
                page = await target.page();
            }
        });
        //通过browser.on()进行监听，当监听到有新的page对象生成时，将新生成的page对象赋值给原来的有page对象

        await page.goto("https://freshdesignweb.com/jquery-html5-file-upload/");
        await expect(page).toClick('a[href="https://codepen.io/bi11johnston/pen/bsGDf"]');
       //打开页面，点击页面的连接，当点击这个页面连接时，会打开一个新的tab页

        await waitUntil.sleep(10000);
        // 这里调用了固定时间等待方法，等待新tab页的加载

        await page.waitForSelector('a[href="/login"]');
        await page.click('a[href="/login"]');
        //因为新tab页对象已经赋值给page对象，上面两步操作都是在新tab页中进行的
        //点击登陆按钮后，显示登陆界面，下面是在登陆界面上输入用户名、密码

        await expect(page).toFill('#login-email-field', 'testUser');
        await expect(page).toFill('#login-password-field_', 'testPassword');
    })
});

通过上面的案例可以看到调用bowser.on()监听新生成的page对象，即可在新tab页上操作页面元素。上面的案例是直接把新新生成的tab页对象赋值给原有的page对象，这样做有个小弊端是：如果业务场景中需要跳回到原来的页面进行相关操作，则无法跳转回去。看到这里，你想到了如何用监听的方式实现多个tab页间来回切换了么？实际很简单，当监听到有新的tab页生成后，将新的tab页赋值给page2即可，这样就可以用案例一中的方式在两个页对象间来回切换。这个就留给大家作为小练习，这里就不再演示了。

综合上面两个例子，最灵活的方式是监听+多tab页对象切换机制，因为实际项目中，跳转到的新页面baseUrl可能无法提前预知，另外实际业务场景下更多的也是点击原有页面的某个元素后，跳转到新tab页上继续操作。故处理多tab页间跳转的场景建议使用监听+多tab页对象切换机制，即案例一和案例二结合方式。

上面讲解了如何处理多tab页间切换的场景，接下来让我们学习如何利用puppeteer框提供的方法实现页面元素的拖动操作。

实现页面元素拖动操作

实际项目中经常会遇到拖动页面元素的操作，针对此类操作puppeteer没有提供封装好的方法，所以要实现元素的拖动要比之前的场景复杂些，那如何实现拖动操作呢？拖动操作实际过程是鼠标选择目标元素，且鼠标左键不释放，拖动目标元素到目标位置，然后释放鼠标左键的过程。所以，可以通过模拟鼠标操作实现拖动页面元素。具体实现代码如下所示。同样，执行“npm run drag-element”即可运行下面的案例。

首选创建drag.js,该文件中封装拖动元素方法，供测试案例使用。

const drag = require('./function/drag'); 
// 引入封装drag方法的js文件
describe('drag demo' ,()=> {
    it('should drag element successfully', async() => {
        await page.goto('https://devexpress.github.io/testcafe/example/');
        await expect(page).toClick('#tried-test-cafe');
        //打开该应用后，勾选此多选款后，下面的拖动条才能被拖动

        await page.focus('.slider-container #slider span');
        //运行自动化case是，打开的页面，拖动调不在viewport里面，这里通过调用focus让框架自动把需要被拖动的元素移动到viewport中

        const sourceElementHandle=await page.$('.slider-container #slider span');
        //获取初始位置元素的elementHandle

        const targetElementHandle= await page.$('.slider-value:nth-child(2)');
        //获取目标位置元素的elementHandle

        drag.dragElement(sourceElementHandle,targetElementHandle);
        //调用下面封装的方法实现拖动操作

        await page.waitFor(5000);
       //添加等待，方便查看拖动后的效果 
    })
});

drag.js文件内容,可以看到如果要调用page.mouse.move(x,y)模拟页面元素拖动，需要传入初始位置和目标位置的X坐标和Y坐标。要获取某个页面元素的X，Y坐标，可以调用elementHandle.getBoundingClientRect()方法。

async function dragElement(sourceElementHandle ,targetElementHandle) {
    //dragElement方法接受两个参数，被拖动元素的elementHandle和目标位置元素的elementHandle

        const sourceRect = await page.evaluate((elementHandle) => {
                const {top, left, bottom, right} = elementHandle.getBoundingClientRect();
                return {top, left, bottom, right};
        }, sourceElementHandle);
        //调用elementHandle.getBoundingClientRect获取页面元素坐标信息

        const targetRect = await page.evaluate((elementHandle) => {
                const {top, left, bottom, right} = elementHandle.getBoundingClientRect();
                return {top, left, bottom, right};
        }, targetElementHandle);

        await page.mouse.move((sourceRect.left+sourceRect.right)/2,(sourceRect.top+sourceRect.bottom)/2);
        // 计算得到初始位置

        await page.mouse.down();
        // 模拟点击鼠标左键，且处于不释放状态

        await page.mouse.move((targetRect.left+targetRect.right)/2,(targetRect.top+targetRect.bottom)/2);
        // 计算得到目标位置

        await page.mouse.up();
        //释放鼠标左键
}
module.exports = {dragElement:dragElement};

执行上面的案例脚本，执行结果如下所示，可以看到拖动条上面的小框拖动到了第二个刻度位置。上面定义的目标位置元素是“.slider-value:nth-child(2)”，案例运行结果与目标位置元素匹配，说明脚本正确，与期望一致。