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

最新推荐文章于 2025-05-09 16:21:55 发布

原创

最新推荐文章于 2025-05-09 16:21:55 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#自动化 #测试工具 #javascript #ui

上篇博客介绍了如何处理弹框以及操作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"]'