1# Multi-Tab, Window & Popup Testing
2 
3This file covers **single-user scenarios** with multiple browser tabs, windows, and popups. For **multi-user collaboration testing** (multiple users interacting simultaneously), see [multi-user.md](multi-user.md).
4 
5## Table of Contents
6 
71. [Popup Handling](#popup-handling)
82. [New Tab Navigation](#new-tab-navigation)
93. [OAuth Flows](#oauth-flows)
104. [Multiple Windows](#multiple-windows)
115. [Tab Coordination](#tab-coordination)
12 
13## Popup Handling
14 
15### Basic Popup
16 
17```typescript
18test("handle popup window", async ({ page }) => {
19  await page.goto("/");
20 
21  // Start waiting for popup before triggering it
22  const popupPromise = page.waitForEvent("popup");
23  await page.getByRole("button", { name: "Open Support Chat" }).click();
24  const popup = await popupPromise;
25 
26  // Wait for popup to load
27  await popup.waitForLoadState();
28 
29  // Interact with popup
30  await popup.getByLabel("Message").fill("Need help");
31  await popup.getByRole("button", { name: "Send" }).click();
32 
33  await expect(popup.getByText("Message sent")).toBeVisible();
34 
35  // Close popup
36  await popup.close();
37});
38```
39 
40### Popup with Authentication
41 
42```typescript
43test("popup login flow", async ({ page }) => {
44  await page.goto("/dashboard");
45 
46  const popupPromise = page.waitForEvent("popup");
47  await page.getByRole("button", { name: "Connect Account" }).click();
48  const popup = await popupPromise;
49 
50  await popup.waitForLoadState();
51 
52  // Complete login in popup
53  await popup.getByLabel("Email").fill("[email protected]");
54  await popup.getByLabel("Password").fill("password123");
55  await popup.getByRole("button", { name: "Log In" }).click();
56 
57  // Popup should close automatically after auth
58  await popup.waitForEvent("close");
59 
60  // Main page should reflect connected state
61  await expect(page.getByText("Account connected")).toBeVisible();
62});
63```
64 
65### Handle Blocked Popups
66 
67```typescript
68test("handle popup blocker", async ({ page }) => {
69  await page.goto("/share");
70 
71  // Listen for console messages about blocked popup
72  page.on("console", (msg) => {
73    if (msg.text().includes("popup blocked")) {
74      console.log("Popup was blocked");
75    }
76  });
77 
78  const popupPromise = page.waitForEvent("popup").catch(() => null);
79  await page.getByRole("button", { name: "Share to Twitter" }).click();
80  const popup = await popupPromise;
81 
82  if (!popup) {
83    // Popup blocked - app should show fallback
84    await expect(page.getByText("Copy share link instead")).toBeVisible();
85  }
86});
87```
88 
89## New Tab Navigation
90 
91### Link Opens in New Tab
92 
93```typescript
94test("external link opens in new tab", async ({ page, context }) => {
95  await page.goto("/resources");
96 
97  // Wait for new page in context
98  const pagePromise = context.waitForEvent("page");
99  await page.getByRole("link", { name: "Documentation" }).click();
100  const newPage = await pagePromise;
101 
102  await newPage.waitForLoadState();
103 
104  expect(newPage.url()).toContain("docs.example.com");
105  await expect(newPage.getByRole("heading", { level: 1 })).toBeVisible();
106 
107  // Original page still there
108  expect(page.url()).toContain("/resources");
109 
110  await newPage.close();
111});
112```
113 
114### Intercept New Tab
115 
116```typescript
117test("prevent new tab for testing", async ({ page }) => {
118  await page.goto("/links");
119 
120  // Remove target="_blank" to keep navigation in same tab
121  await page.evaluate(() => {
122    document.querySelectorAll('a[target="_blank"]').forEach((a) => {
123      a.removeAttribute("target");
124    });
125  });
126 
127  // Now link opens in same tab
128  await page.getByRole("link", { name: "External Site" }).click();
129 
130  // Can test the destination page
131  await expect(page).toHaveURL(/external-site\.com/);
132});
133```
134 
135## OAuth Flows
136 
137### Google OAuth Popup
138 
139```typescript
140test("Google OAuth login", async ({ page }) => {
141  await page.goto("/login");
142 
143  const popupPromise = page.waitForEvent("popup");
144  await page.getByRole("button", { name: "Sign in with Google" }).click();
145  const popup = await popupPromise;
146 
147  await popup.waitForLoadState();
148 
149  // Handle Google's OAuth flow
150  await popup.getByLabel("Email or phone").fill("[email protected]");
151  await popup.getByRole("button", { name: "Next" }).click();
152 
153  await popup.getByLabel("Enter your password").fill("password");
154  await popup.getByRole("button", { name: "Next" }).click();
155 
156  // Wait for redirect back and popup close
157  await popup.waitForEvent("close");
158 
159  // Verify logged in on main page
160  await expect(page.getByText("Welcome, Test User")).toBeVisible();
161});
162```
163 
164### Mock OAuth (Recommended)
165 
166```typescript
167test("mock OAuth flow", async ({ page, context }) => {
168  // Mock the OAuth callback instead of real flow
169  await page.route("**/auth/callback**", async (route) => {
170    // Simulate successful OAuth
171    const url = new URL(route.request().url());
172    url.searchParams.set("code", "mock-auth-code");
173    await route.fulfill({
174      status: 302,
175      headers: { Location: "/dashboard" },
176    });
177  });
178 
179  // Mock token exchange
180  await page.route("**/api/auth/token", (route) =>
181    route.fulfill({
182      json: {
183        access_token: "mock-token",
184        user: { name: "Test User", email: "[email protected]" },
185      },
186    }),
187  );
188 
189  await page.goto("/login");
190  await page.getByRole("button", { name: "Sign in with Google" }).click();
191 
192  // Should redirect to dashboard without actual OAuth
193  await expect(page).toHaveURL("/dashboard");
194  await expect(page.getByText("Welcome, Test User")).toBeVisible();
195});
196```
197 
198### OAuth Fixture
199 
200> **For comprehensive OAuth mocking patterns** (fixtures, multiple providers, SAML SSO), see [third-party.md](third-party.md#oauthsso-mocking). This section focuses on popup window handling mechanics for OAuth flows.
201 
202## Multiple Windows
203 
204### Test Across Multiple Windows
205 
206```typescript
207test("sync between windows", async ({ context }) => {
208  // Open two pages
209  const page1 = await context.newPage();
210  const page2 = await context.newPage();
211 
212  await page1.goto("/dashboard");
213  await page2.goto("/dashboard");
214 
215  // Make change in first window
216  await page1.getByRole("button", { name: "Add Item" }).click();
217  await page1.getByLabel("Name").fill("New Item");
218  await page1.getByRole("button", { name: "Save" }).click();
219 
220  // Should sync to second window (if app supports real-time sync)
221  await expect(page2.getByText("New Item")).toBeVisible({ timeout: 10000 });
222});
223```
224 
225### Different Users in Different Windows
226 
227> **For multi-user collaboration patterns** (admin/user interactions, real-time collaboration, role-based testing, concurrent actions), see [multi-user.md](multi-user.md). This file focuses on single-user scenarios with multiple tabs/windows/popups.
228 
229## Tab Coordination
230 
231### Switch Between Tabs
232 
233```typescript
234test("manage multiple tabs", async ({ context }) => {
235  const page1 = await context.newPage();
236  await page1.goto("/editor");
237 
238  const page2 = await context.newPage();
239  await page2.goto("/preview");
240 
241  // Edit in first tab
242  await page1.bringToFront();
243  await page1.getByLabel("Content").fill("Hello World");
244 
245  // Check preview in second tab
246  await page2.bringToFront();
247  await page2.reload(); // If preview needs refresh
248  await expect(page2.getByText("Hello World")).toBeVisible();
249});
250```
251 
252### Close All Tabs Except One
253 
254```typescript
255test("cleanup tabs after test", async ({ context }) => {
256  const mainPage = await context.newPage();
257  await mainPage.goto("/");
258 
259  // Open several popups during test
260  for (let i = 0; i < 3; i++) {
261    const popup = await context.newPage();
262    await popup.goto(`/popup/${i}`);
263  }
264 
265  // Close all except main page
266  for (const page of context.pages()) {
267    if (page !== mainPage) {
268      await page.close();
269    }
270  }
271 
272  expect(context.pages()).toHaveLength(1);
273});
274```
275 
276## Anti-Patterns to Avoid
277 
278| Anti-Pattern            | Problem                        | Solution                                   |
279| ----------------------- | ------------------------------ | ------------------------------------------ |
280| Not waiting for popup   | Race condition                 | Use `waitForEvent("popup")` before trigger |
281| Testing real OAuth      | Slow, flaky, needs credentials | Mock OAuth endpoints                       |
282| Assuming popup opens    | May be blocked                 | Handle both open and blocked cases         |
283| Not closing extra pages | Resource leak                  | Close pages in cleanup                     |
284 
285## Related References
286 
287- **Authentication**: See [fixtures-hooks.md](../core/fixtures-hooks.md) for auth patterns
288- **Network**: See [network-advanced.md](network-advanced.md) for mocking OAuth
289