playwright 的安装使用（8）编写测试（元素定位4）

参考： https://playwright.dev/docs/pages#pages

每个 BrowserContext 可以有多个页面。页面是指浏览器上下文中的单个选项卡或弹出窗口。它应该用于导航到 URL 并与页面内容交互。

<span style="color:#393a34"><em>// Create a page.</em>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> page <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> context<span style="color:#393a34">.</span><span style="color:#8250df">newPage</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span>
<span style="color:#393a34"><em>// Navigate explicitly, similar to entering a URL in the browser.</em>
</span><span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">goto</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;http://example.com&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><em>// Fill an input.</em>
</span><span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;#search&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">fill</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;query&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span>
<span style="color:#393a34"><em>// Navigate implicitly by clicking a link.</em>
</span><span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;#submit&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><em>// Expect a new url.</em>
</span><span style="color:#393a34"><span style="color:#116329">console</span><span style="color:#393a34">.</span><span style="color:#8250df">log</span><span style="color:#393a34">(</span>page<span style="color:#393a34">.</span><span style="color:#8250df">url</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

多个页面

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

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

<span style="color:#393a34"><em>// Create two pages</em>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> pageOne <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> context<span style="color:#393a34">.</span><span style="color:#8250df">newPage</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> pageTwo <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> context<span style="color:#393a34">.</span><span style="color:#8250df">newPage</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span>
<span style="color:#393a34"><em>// Get pages of a browser context</em>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> allPages <span style="color:#d73a49">=</span> context<span style="color:#393a34">.</span><span style="color:#8250df">pages</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

处理新页面

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

<span style="color:#393a34"><em>// Get page after a specific action (e.g. clicking a link)</em>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> <span style="color:#393a34">[</span>newPage<span style="color:#393a34">]</span> <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> <span style="color:#116329">Promise</span><span style="color:#393a34">.</span><span style="color:#8250df">all</span><span style="color:#393a34">(</span><span style="color:#393a34">[</span>
</span><span style="color:#393a34">  context<span style="color:#393a34">.</span><span style="color:#8250df">waitForEvent</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;page&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">,</span>
</span><span style="color:#393a34">  page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;a[target=&quot;_blank&quot;]&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span> <em>// Opens a new tab</em>
</span><span style="color:#393a34"><span style="color:#393a34">]</span><span style="color:#393a34">)</span>
</span><span style="color:#393a34"><span style="color:#cf222e">await</span> newPage<span style="color:#393a34">.</span><span style="color:#8250df">waitForLoadState</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#116329">console</span><span style="color:#393a34">.</span><span style="color:#8250df">log</span><span style="color:#393a34">(</span><span style="color:#cf222e">await</span> newPage<span style="color:#393a34">.</span><span style="color:#8250df">title</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

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

<span style="color:#393a34"><em>// Get all new pages (including popups) in the context</em>
</span><span style="color:#393a34">context<span style="color:#393a34">.</span><span style="color:#8250df">on</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;page&#39;</span><span style="color:#393a34">,</span> <span style="color:#cf222e">async</span> <span style="color:#953800">page</span> <span style="color:#d73a49">=&gt;</span> <span style="color:#393a34">{</span>
</span><span style="color:#393a34">  <span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">waitForLoadState</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34">  <span style="color:#116329">console</span><span style="color:#393a34">.</span><span style="color:#8250df">log</span><span style="color:#393a34">(</span><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">title</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#393a34">}</span><span style="color:#393a34">)</span></span>

处理弹出窗口

如果页面打开一个弹出窗口（例如通过 target="_blank" 链接打开的页面），您可以通过监听页面上的弹出事件来获取对它的引用。

除了 browserContext.on('page') 事件之外，还会发出此事件，但仅针对与此页面相关的弹出窗口。

<span style="color:#393a34"><em>// Note that Promise.all prevents a race condition</em>
</span><span style="color:#393a34"><em>// between clicking and waiting for the popup.</em>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> <span style="color:#393a34">[</span>popup<span style="color:#393a34">]</span> <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> <span style="color:#116329">Promise</span><span style="color:#393a34">.</span><span style="color:#8250df">all</span><span style="color:#393a34">(</span><span style="color:#393a34">[</span>
</span><span style="color:#393a34">  <em>// It is important to call waitForEvent before click to set up waiting.</em>
</span><span style="color:#393a34">  page<span style="color:#393a34">.</span><span style="color:#8250df">waitForEvent</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;popup&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">,</span>
</span><span style="color:#393a34">  <em>// Opens popup.</em>
</span><span style="color:#393a34">  page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;#open&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">,</span>
</span><span style="color:#393a34"><span style="color:#393a34">]</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#cf222e">await</span> popup<span style="color:#393a34">.</span><span style="color:#8250df">waitForLoadState</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#116329">console</span><span style="color:#393a34">.</span><span style="color:#8250df">log</span><span style="color:#393a34">(</span><span style="color:#cf222e">await</span> popup<span style="color:#393a34">.</span><span style="color:#8250df">title</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

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

<span style="color:#393a34"><em>// Get all popups when they open</em>
</span><span style="color:#393a34">page<span style="color:#393a34">.</span><span style="color:#8250df">on</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;popup&#39;</span><span style="color:#393a34">,</span> <span style="color:#cf222e">async</span> <span style="color:#953800">popup</span> <span style="color:#d73a49">=&gt;</span> <span style="color:#393a34">{</span>
</span><span style="color:#393a34">  <span style="color:#cf222e">await</span> popup<span style="color:#393a34">.</span><span style="color:#8250df">waitForLoadState</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34">  <span style="color:#cf222e">await</span> popup<span style="color:#393a34">.</span><span style="color:#8250df">title</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#393a34">}</span><span style="color:#393a34">)</span></span>