Skip to content

PM-27093 Update BIT to access shadow dom notification bar #413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

PM-27093 Update BIT to access shadow dom notification bar #413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f96356
PM-27093 add util to find shadow dom iframe
dan-livefront Oct 17, 2025
7d971aa
remove flaky not visible assertion
dan-livefront Oct 17, 2025
49b9264
since the frame is detached I will rely on the detach for the shadow …
dan-livefront Oct 17, 2025
0b924a9
do not wait for frames when notification should not trigger
dan-livefront Oct 17, 2025
57e35fa
use variable for extensionUrl
dan-livefront Oct 17, 2025
f144005
dry up code
dan-livefront Oct 17, 2025
5649c97
await the fill of value to avoid a flaky fail
dan-livefront Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 63 additions & 45 deletions tests/static/notifications.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
} from "../../constants";
import { test, expect } from "../fixtures.browser";
import { FillProperties } from "../../abstractions";
import { getPagesToTest, formatUrlToFilename } from "../utils";
import {
getPagesToTest,
formatUrlToFilename,
getNotificationElements,
} from "../utils";

const testOutputPath = "notifications";
let testRetryCount = 0;
Expand Down Expand Up @@ -36,6 +40,7 @@ test.describe("Extension triggers a notification when a page form is submitted w

let testPage = await extensionSetup;
testPage.setDefaultNavigationTimeout(defaultNavigationTimeout);
const extensionURL = `chrome-extension://${extensionId}/notification/bar.html`;

// Needed to allow the background reload further down
await test.step("Set vault to never timeout", async () => {
Expand Down Expand Up @@ -111,7 +116,7 @@ test.describe("Extension triggers a notification when a page form is submitted w
expectedValue = currentInput.value.split("").reverse().join("");
}

currentInputElement.fill(expectedValue);
await currentInputElement.fill(expectedValue);

await expect(currentInputElement).toHaveValue(expectedValue);

Expand Down Expand Up @@ -163,30 +168,37 @@ test.describe("Extension triggers a notification when a page form is submitted w
),
});

const notificationLocator = testPage
.locator("#bit-notification-bar-iframe")
.contentFrame();

const newCipherNotificationLocator = notificationLocator.locator(
'[data-testid="save-notification-bar"]',
);

const notificationCloseButtonLocator = notificationLocator.getByRole(
"button",
{ name: "Close" },
);

if (shouldNotTriggerNewNotification) {
// Ensure the wrong type of notification does not appear
await expect(newCipherNotificationLocator).not.toBeVisible();
// Check that no notification frame exists
const existingFrame = testPage
.frames()
.find((frame) => frame.url().startsWith(extensionURL));

if (existingFrame) {
const newCipherNotificationLocator = existingFrame.getByTestId(
"save-notification-bar",
);
// Ensure the wrong type of notification does not appear
await expect(newCipherNotificationLocator).not.toBeVisible();
}
// If no frame exists, no assertion needed
} else {
// Ensure the correct type of notification appears
await expect(newCipherNotificationLocator).toBeVisible();

// Close the notification for the next triggering case
await notificationCloseButtonLocator.click();
const { notificationLocator, notificationElement, closeButton } =
await getNotificationElements(
testPage,
extensionId,
"save-notification-bar",
);

await expect(notificationCloseButtonLocator).not.toBeVisible();
// Ensure the correct type of notification appears
await expect(notificationElement).toBeVisible();

// Close the notification and verify it was detached
const frameDetached = testPage.waitForEvent("framedetached", {
predicate: (frame) => frame === notificationLocator,
});
await closeButton.click();
await expect(frameDetached).resolves.toBeDefined();
}
});
});
Expand Down Expand Up @@ -246,7 +258,7 @@ test.describe("Extension triggers a notification when a page form is submitted w
expectedValue = currentInput.value.split("").reverse().join("");
}

currentInputElement.fill(expectedValue);
await currentInputElement.fill(expectedValue);

await expect(currentInputElement).toHaveValue(expectedValue);

Expand Down Expand Up @@ -298,30 +310,36 @@ test.describe("Extension triggers a notification when a page form is submitted w
),
});

const notificationLocator = testPage
.locator("#bit-notification-bar-iframe")
.contentFrame();

const updatePasswordNotificationLocator = notificationLocator.locator(
'[data-testid="update-notification-bar"]',
);

const notificationCloseButtonLocator = notificationLocator.getByRole(
"button",
{ name: "Close" },
);

if (shouldNotTriggerUpdateNotification) {
// Ensure the wrong type of notification does not appear
await expect(updatePasswordNotificationLocator).not.toBeVisible();
// Check that no notification frame exists
const existingFrame = testPage
.frames()
.find((frame) => frame.url().startsWith(extensionURL));

if (existingFrame) {
const updatePasswordNotificationLocator =
existingFrame.getByTestId("update-notification-bar");
// Ensure the wrong type of notification does not appear
await expect(updatePasswordNotificationLocator).not.toBeVisible();
}
// If no frame exists, no assertion needed
} else {
// Ensure the correct type of notification appears
await expect(updatePasswordNotificationLocator).toBeVisible();

// Close the notification for the next triggering case
await notificationCloseButtonLocator.click();
const { notificationLocator, notificationElement, closeButton } =
await getNotificationElements(
testPage,
extensionId,
"update-notification-bar",
);

await expect(notificationCloseButtonLocator).not.toBeVisible();
// Ensure the correct type of notification appears
await expect(notificationElement).toBeVisible();

// Close the notification and verify it was detached
const frameDetached = testPage.waitForEvent("framedetached", {
predicate: (frame) => frame === notificationLocator,
});
await closeButton.click();
await expect(frameDetached).resolves.toBeDefined();
}
});
});
Expand Down
35 changes: 35 additions & 0 deletions tests/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,41 @@ export function formatUrlToFilename(urlString: string) {
return urlString.replace(/[^a-z\d]/gi, "-");
}

export async function getNotificationFrame(
page: import("@playwright/test").Page,
extensionId: string,
) {
const expectedAddressStart = `chrome-extension://${extensionId}/notification/bar.html`;

let notificationFrame = page
.frames()
.find((frame) => frame.url().startsWith(expectedAddressStart));

if (!notificationFrame) {
notificationFrame = await page.waitForEvent("frameattached", {
timeout: 5_000,
predicate: (frame) => frame.url().startsWith(expectedAddressStart),
});
}

await notificationFrame.waitForLoadState("domcontentloaded");
return notificationFrame;
}

export async function getNotificationElements(
page: import("@playwright/test").Page,
extensionId: string,
testId: string,
) {
const notificationLocator = await getNotificationFrame(page, extensionId);
const notificationElement = notificationLocator.getByTestId(testId);
const closeButton = notificationLocator.getByRole("button", {
name: "Close",
});

return { notificationLocator, notificationElement, closeButton };
}

export async function a11yTestView({
testInfo,
testPage,
Expand Down
Loading