1.简介

标签操作其实也是基于浏览器上下文（BrowserContext）进行操作的，而且宏哥在之前的BrowserContext也有提到过，但是有的童鞋或者小伙伴还是不清楚怎么操作，或者思路有点模糊，因此今天单独来对其进行讲解和分享一下，希望您有所帮助。

2.单标签页

单个标签操作这个是最简单的，之前讲的绝大多数都是单个标签的操作。通过context.new_page()就可以创建一个页面。

实战举例：以度娘为例，首先启动浏览器，然后再设置浏览器的大小。查询“北京宏哥”后，刷新页面执行回退到百度首页，然后有执行前进进入到搜索“北京宏哥”页面，最后退出浏览器。

2.1代码设计

按照上边的步骤进行代码设计，如下图所示：

2.2参考代码

# coding=utf-8🔥# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行# 2.注释：包括记录创建时间，创建人，项目名称。
'''# 3.导入模块
from playwright.sync_api import sync_playwrightwith sync_playwright() as p :# 1.启动浏览器browser  = p.chromium.launch(headless=False)# 2.设置浏览器窗口大小context = browser.new_context(viewport={'width': 1920, 'height': 1080},)page = context.new_page()# 3.访问度娘page.goto("https://www.baidu.com")# 等待5秒page.wait_for_timeout(5000)# 4.输入“北京宏哥”，点击“百度一下”page.fill("input[name=\"wd\"]", "北京宏哥")page.click("text=百度一下")# 等待5秒page.wait_for_timeout(5000)# 5.刷新页面page.reload()# 等待5秒page.wait_for_timeout(5000)# 6.浏览器后退page.go_back()# 等待5秒page.wait_for_timeout(5000)# 7.浏览器前进page.go_forward()# 8.浏览器退出page.wait_for_timeout(5000)context.close()browser.close()

2.3运行代码

1.运行代码，右键Run'Test'，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作，

3.多标签页

每个浏览器上下文可以承载多个页面（选项卡）。

• 每个页面都像一个聚焦的活动页面。不需要将页面置于最前面。
• 上下文中的页面遵循上下文级别的模拟，例如视口大小、自定义网络路由或浏览器区域设置。

# create two pages
page_one = context.new_page()
page_two = context.new_page()# get pages of a browser context
all_pages = context.pages

实战举例：在page_one 标签页打开百度，输入“北京-宏哥”， 在page_two 标签页打开百度，输入“宏哥”。

3.1代码设计

3.2参考代码

# coding=utf-8🔥# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-07-13
@author: 北京-宏哥   QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列入门篇-Python+Playwright自动化测试-10-标签页操作（tab）
'''# 3.导入模块
from playwright.sync_api import sync_playwright#打开两个浏览器上下文
with sync_playwright() as p:browser = p.chromium.launch(headless=False, slow_mo=100)context = browser.new_context()  # 创建上下文，浏览器实例1page1 = context.new_page()    # 打开标签页1page2 = context.new_page()  # 打开标签页2page1.goto("https://www.baidu.com/")page1.fill('#kw', "北京宏哥")page1.wait_for_timeout(1000)page2.goto("https://www.baidu.com/")page2.fill('#kw', "宏哥")page2.wait_for_timeout(1000)browser.close()

3.3运行代码

1.运行代码，右键Run'Test'，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。虽然你看不到第一个页面的操作，实际上它已经操作了，每个页面 page对象都是聚焦的活动页面， 不需要将页面置于最前面。如下图所示：

4.处理新标签页

浏览器上下文中的事件page可用于获取在上下文中创建的新页面。这可用于处理通过target="_blank"链接打开的新页面。

# Get page after a specific action (e.g. clicking a link)
with context.expect_page() as new_page_info:page.get_by_text("open new tab").click() # Opens a new tab
new_page = new_page_info.valuenew_page.wait_for_load_state()
print(new_page.title())

实战举例：打开百度页面的-新闻链接，会出现一个新标签页，如下图所示：

4.1代码设计

4.2参考代码

# coding=utf-8🔥# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-07-13
@author: 北京-宏哥   QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列入门篇-Python+Playwright自动化测试-10-标签页操作（tab）
'''# 3.导入模块
from playwright.sync_api import sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch(headless=False, slow_mo=1000)context = browser.new_context()  # 创建上下文，浏览器实例page = context.new_page()    # 打开标签页page.goto("https://www.baidu.com/")print(page.title())# Get page after a specific action (e.g. clicking a link)with context.expect_page() as new_page_info:page.click('text=新闻')  # Opens a new tabnew_page = new_page_info.valuenew_page.wait_for_load_state()  # 等待页面加载到指定状态print(new_page.title())browser.close()

4.3运行代码

1.运行代码，右键Run'Test'，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

如果触发新页面的操作未知，可以使用以下模式。

# Get all new pages (including popups) in the context
def handle_page(page):page.wait_for_load_state()print(page.title())context.on("page", handle_page)

5.处理弹出窗口

如果页面打开一个弹出窗口（例如通过链接打开的页面），您可以通过监听页面上的事件target="_blank"来获取对它的引用。popup
除了browserContext.on('page')事件之外还会发出此事件，但仅针对与此页面相关的弹出窗口。

# Get popup after a specific action (e.g., click)
with page.expect_popup() as popup_info:page.get_by_text("open the popup").click()
popup = popup_info.valuepopup.wait_for_load_state()
print(popup.title())

如果触发弹出窗口的操作未知，则可以使用以下模式。

# Get all popups when they open
def handle_popup(popup):popup.wait_for_load_state()print(popup.title())page.on("popup", handle_popup)

6.小结

  好了，时间不早了，关于标签操作今天就分享到这里。感谢你耐心地阅读。

最后：

为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们如果需要可以自行免费领取 【保证100%免费】 

 

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

 资料获取方式：