diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 2b0b292497..7f50390c35 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -10096,9 +10096,18 @@ export interface Browser {
value: string;
}>;
+ /**
+ * indexedDB to set for context
+ */
indexedDB?: Array<{
+ /**
+ * database name
+ */
name: string;
+ /**
+ * database version
+ */
version: number;
stores: Array<{
@@ -10123,8 +10132,14 @@ export interface Browser {
}>;
records: Array<{
+ /**
+ * key, only defined if stores uses out-of-line keys
+ */
key?: string;
+ /**
+ * opaque value
+ */
value: string;
}>;
}>;
@@ -22297,9 +22312,18 @@ export interface BrowserContextOptions {
value: string;
}>;
+ /**
+ * indexedDB to set for context
+ */
indexedDB?: Array<{
+ /**
+ * database name
+ */
name: string;
+ /**
+ * database version
+ */
version: number;
stores: Array<{
@@ -22324,8 +22348,14 @@ export interface BrowserContextOptions {
}>;
records: Array<{
+ /**
+ * key, only defined if stores uses out-of-line keys
+ */
key?: string;
+ /**
+ * opaque value
+ */
value: string;
}>;
}>;
diff --git a/tests/assets/to-do-notifications/README.md b/tests/assets/to-do-notifications/README.md
new file mode 100644
index 0000000000..5bd8b1d38c
--- /dev/null
+++ b/tests/assets/to-do-notifications/README.md
@@ -0,0 +1 @@
+Source: https://github.com/mdn/dom-examples/tree/main/to-do-notifications
diff --git a/tests/assets/to-do-notifications/index.html b/tests/assets/to-do-notifications/index.html
new file mode 100644
index 0000000000..e9cd52c7b8
--- /dev/null
+++ b/tests/assets/to-do-notifications/index.html
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+ To-do list with Notifications
+
+
+
+
+
To-do list
+
+
+
+
+
+
+
+
+
+
+
Add new to-do item.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/assets/to-do-notifications/manifest.webapp b/tests/assets/to-do-notifications/manifest.webapp
new file mode 100644
index 0000000000..fe48e2e423
--- /dev/null
+++ b/tests/assets/to-do-notifications/manifest.webapp
@@ -0,0 +1,18 @@
+{
+ "version": "0.1",
+ "name": "To-do list",
+ "description": "Store to-do items on your device, and be notified when the deadlines are up.",
+ "launch_path": "/to-do-notifications/index.html",
+ "icons": {
+ "128": "/to-do-notifications/img/icon-128.png"
+ },
+ "developer": {
+ "name": "Chris Mills",
+ "url": "http://chrisdavidmills.github.io/to-do-notifications/"
+ },
+ "permissions": {
+ "desktop-notification": {
+ "description": "Needed for creating system notifications."
+ }
+ }
+}
\ No newline at end of file
diff --git a/tests/assets/to-do-notifications/scripts/todo.js b/tests/assets/to-do-notifications/scripts/todo.js
new file mode 100644
index 0000000000..2e3cfae210
--- /dev/null
+++ b/tests/assets/to-do-notifications/scripts/todo.js
@@ -0,0 +1,354 @@
+window.onload = () => {
+ const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+ // Hold an instance of a db object for us to store the IndexedDB data in
+ let db;
+
+ // Create a reference to the notifications list in the bottom of the app; we will write database messages into this list by
+ // appending list items as children of this element
+ const note = document.getElementById('notifications');
+
+ // All other UI elements we need for the app
+ const taskList = document.getElementById('task-list');
+ const taskForm = document.getElementById('task-form');
+ const title = document.getElementById('title');
+ const hours = document.getElementById('deadline-hours');
+ const minutes = document.getElementById('deadline-minutes');
+ const day = document.getElementById('deadline-day');
+ const month = document.getElementById('deadline-month');
+ const year = document.getElementById('deadline-year');
+ const notificationBtn = document.getElementById('enable');
+
+ // Do an initial check to see what the notification permission state is
+ if (Notification.permission === 'denied' || Notification.permission === 'default') {
+ notificationBtn.style.display = 'block';
+ } else {
+ notificationBtn.style.display = 'none';
+ }
+
+ note.appendChild(createListItem('App initialised.'));
+
+ // Let us open our database
+ const DBOpenRequest = window.indexedDB.open('toDoList', 4);
+
+ // Register two event handlers to act on the database being opened successfully, or not
+ DBOpenRequest.onerror = (event) => {
+ note.appendChild(createListItem('Error loading database.'));
+ };
+
+ DBOpenRequest.onsuccess = (event) => {
+ note.appendChild(createListItem('Database initialised.'));
+
+ // Store the result of opening the database in the db variable. This is used a lot below
+ db = DBOpenRequest.result;
+
+ // Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
+ displayData();
+ };
+
+ // This event handles the event whereby a new version of the database needs to be created
+ // Either one has not been created before, or a new version number has been submitted via the
+ // window.indexedDB.open line above
+ //it is only implemented in recent browsers
+ DBOpenRequest.onupgradeneeded = (event) => {
+ db = event.target.result;
+
+ db.onerror = (event) => {
+ note.appendChild(createListItem('Error loading database.'));
+ };
+
+ // Create an objectStore for this database
+ const objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' });
+
+ // Define what data items the objectStore will contain
+ objectStore.createIndex('hours', 'hours', { unique: false });
+ objectStore.createIndex('minutes', 'minutes', { unique: false });
+ objectStore.createIndex('day', 'day', { unique: false });
+ objectStore.createIndex('month', 'month', { unique: false });
+ objectStore.createIndex('year', 'year', { unique: false });
+
+ objectStore.createIndex('notified', 'notified', { unique: false });
+
+ note.appendChild(createListItem('Object store created.'));
+ };
+
+ function displayData() {
+ // First clear the content of the task list so that you don't get a huge long list of duplicate stuff each time
+ // the display is updated.
+ while (taskList.firstChild) {
+ taskList.removeChild(taskList.lastChild);
+ }
+
+ // Open our object store and then get a cursor list of all the different data items in the IDB to iterate through
+ const objectStore = db.transaction('toDoList').objectStore('toDoList');
+ objectStore.openCursor().onsuccess = (event) => {
+ const cursor = event.target.result;
+ // Check if there are no (more) cursor items to iterate through
+ if (!cursor) {
+ // No more items to iterate through, we quit.
+ note.appendChild(createListItem('Entries all displayed.'));
+ return;
+ }
+
+ // Check which suffix the deadline day of the month needs
+ const { hours, minutes, day, month, year, notified, taskTitle } = cursor.value;
+ const ordDay = ordinal(day);
+
+ // Build the to-do list entry and put it into the list item.
+ const toDoText = `${taskTitle} — ${hours}:${minutes}, ${month} ${ordDay} ${year}.`;
+ const listItem = createListItem(toDoText);
+
+ if (notified === 'yes') {
+ listItem.style.textDecoration = 'line-through';
+ listItem.style.color = 'rgba(255, 0, 0, 0.5)';
+ }
+
+ // Put the item item inside the task list
+ taskList.appendChild(listItem);
+
+ // Create a delete button inside each list item,
+ const deleteButton = document.createElement('button');
+ listItem.appendChild(deleteButton);
+ deleteButton.textContent = 'X';
+
+ // Set a data attribute on our delete button to associate the task it relates to.
+ deleteButton.setAttribute('data-task', taskTitle);
+
+ // Associate action (deletion) when clicked
+ deleteButton.onclick = (event) => {
+ deleteItem(event);
+ };
+
+ // continue on to the next item in the cursor
+ cursor.continue();
+ };
+ };
+
+ // Add listener for clicking the submit button
+ taskForm.addEventListener('submit', addData, false);
+
+ function addData(e) {
+ // Prevent default, as we don't want the form to submit in the conventional way
+ e.preventDefault();
+
+ // Stop the form submitting if any values are left empty.
+ // This should never happen as there is the required attribute
+ if (title.value === '' || hours.value === null || minutes.value === null || day.value === '' || month.value === '' || year.value === null) {
+ note.appendChild(createListItem('Data not submitted — form incomplete.'));
+ return;
+ }
+
+ // Grab the values entered into the form fields and store them in an object ready for being inserted into the IndexedDB
+ const newItem = [
+ { taskTitle: title.value, hours: hours.value, minutes: minutes.value, day: day.value, month: month.value, year: year.value, notified: 'no' },
+ ];
+
+ // Open a read/write DB transaction, ready for adding the data
+ const transaction = db.transaction(['toDoList'], 'readwrite');
+
+ // Report on the success of the transaction completing, when everything is done
+ transaction.oncomplete = () => {
+ note.appendChild(createListItem('Transaction completed: database modification finished.'));
+
+ // Update the display of data to show the newly added item, by running displayData() again.
+ displayData();
+ };
+
+ // Handler for any unexpected error
+ transaction.onerror = () => {
+ note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
+ };
+
+ // Call an object store that's already been added to the database
+ const objectStore = transaction.objectStore('toDoList');
+ console.log(objectStore.indexNames);
+ console.log(objectStore.keyPath);
+ console.log(objectStore.name);
+ console.log(objectStore.transaction);
+ console.log(objectStore.autoIncrement);
+
+ // Make a request to add our newItem object to the object store
+ const objectStoreRequest = objectStore.add(newItem[0]);
+ objectStoreRequest.onsuccess = (event) => {
+
+ // Report the success of our request
+ // (to detect whether it has been succesfully
+ // added to the database, you'd look at transaction.oncomplete)
+ note.appendChild(createListItem('Request successful.'));
+
+ // Clear the form, ready for adding the next entry
+ title.value = '';
+ hours.value = null;
+ minutes.value = null;
+ day.value = 01;
+ month.value = 'January';
+ year.value = 2020;
+ };
+ };
+
+ function deleteItem(event) {
+ // Retrieve the name of the task we want to delete
+ const dataTask = event.target.getAttribute('data-task');
+
+ // Open a database transaction and delete the task, finding it by the name we retrieved above
+ const transaction = db.transaction(['toDoList'], 'readwrite');
+ transaction.objectStore('toDoList').delete(dataTask);
+
+ // Report that the data item has been deleted
+ transaction.oncomplete = () => {
+ // Delete the parent of the button, which is the list item, so it is no longer displayed
+ event.target.parentNode.parentNode.removeChild(event.target.parentNode);
+ note.appendChild(createListItem(`Task "${dataTask}" deleted.`));
+ };
+ };
+
+ // Check whether the deadline for each task is up or not, and responds appropriately
+ function checkDeadlines() {
+ // First of all check whether notifications are enabled or denied
+ if (Notification.permission === 'denied' || Notification.permission === 'default') {
+ notificationBtn.style.display = 'block';
+ } else {
+ notificationBtn.style.display = 'none';
+ }
+
+ // Grab the current time and date
+ const now = new Date();
+
+ // From the now variable, store the current minutes, hours, day of the month, month, year and seconds
+ const minuteCheck = now.getMinutes();
+ const hourCheck = now.getHours();
+ const dayCheck = now.getDate(); // Do not use getDay() that returns the day of the week, 1 to 7
+ const monthCheck = now.getMonth();
+ const yearCheck = now.getFullYear(); // Do not use getYear() that is deprecated.
+
+ // Open a new transaction
+ const objectStore = db.transaction(['toDoList'], 'readwrite').objectStore('toDoList');
+
+ // Open a cursor to iterate through all the data items in the IndexedDB
+ objectStore.openCursor().onsuccess = (event) => {
+ const cursor = event.target.result;
+ if (!cursor) return;
+ const { hours, minutes, day, month, year, notified, taskTitle } = cursor.value;
+
+ // convert the month names we have installed in the IDB into a month number that JavaScript will understand.
+ // The JavaScript date object creates month values as a number between 0 and 11.
+ const monthNumber = MONTHS.indexOf(month);
+ if (monthNumber === -1) throw new Error('Incorrect month entered in database.');
+
+ // Check if the current hours, minutes, day, month and year values match the stored values for each task.
+ // The parseInt() function transforms the value from a string to a number for comparison
+ // (taking care of leading zeros, and removing spaces and underscores from the string).
+ let matched = parseInt(hours) === hourCheck;
+ matched &&= parseInt(minutes) === minuteCheck;
+ matched &&= parseInt(day) === dayCheck;
+ matched &&= parseInt(monthNumber) === monthCheck;
+ matched &&= parseInt(year) === yearCheck;
+ if (matched && notified === 'no') {
+ // If the numbers all do match, run the createNotification() function to create a system notification
+ // but only if the permission is set
+ if (Notification.permission === 'granted') {
+ createNotification(taskTitle);
+ }
+ }
+
+ // Move on to the next cursor item
+ cursor.continue();
+ };
+ };
+
+ // Ask for permission when the 'Enable notifications' button is clicked
+ function askNotificationPermission() {
+ // Function to actually ask the permissions
+ function handlePermission(permission) {
+ // Whatever the user answers, we make sure Chrome stores the information
+ if (!Reflect.has(Notification, 'permission')) {
+ Notification.permission = permission;
+ }
+
+ // Set the button to shown or hidden, depending on what the user answers
+ if (Notification.permission === 'denied' || Notification.permission === 'default') {
+ notificationBtn.style.display = 'block';
+ } else {
+ notificationBtn.style.display = 'none';
+ }
+ };
+
+ // Check if the browser supports notifications
+ if (!Reflect.has(window, 'Notification')) {
+ console.log('This browser does not support notifications.');
+ } else {
+ if (checkNotificationPromise()) {
+ Notification.requestPermission().then(handlePermission);
+ } else {
+ Notification.requestPermission(handlePermission);
+ }
+ }
+ };
+
+ // Check whether browser supports the promise version of requestPermission()
+ // Safari only supports the old callback-based version
+ function checkNotificationPromise() {
+ try {
+ Notification.requestPermission().then();
+ } catch(e) {
+ return false;
+ }
+
+ return true;
+ };
+
+ // Wire up notification permission functionality to 'Enable notifications' button
+ notificationBtn.addEventListener('click', askNotificationPermission);
+
+ function createListItem(contents) {
+ const listItem = document.createElement('li');
+ listItem.textContent = contents;
+ return listItem;
+ };
+
+ // Create a notification with the given title
+ function createNotification(title) {
+ // Create and show the notification
+ const img = '/to-do-notifications/img/icon-128.png';
+ const text = `HEY! Your task "${title}" is now overdue.`;
+ const notification = new Notification('To do list', { body: text, icon: img });
+
+ // We need to update the value of notified to 'yes' in this particular data object, so the
+ // notification won't be set off on it again
+
+ // First open up a transaction
+ const objectStore = db.transaction(['toDoList'], 'readwrite').objectStore('toDoList');
+
+ // Get the to-do list object that has this title as its title
+ const objectStoreTitleRequest = objectStore.get(title);
+
+ objectStoreTitleRequest.onsuccess = () => {
+ // Grab the data object returned as the result
+ const data = objectStoreTitleRequest.result;
+
+ // Update the notified value in the object to 'yes'
+ data.notified = 'yes';
+
+ // Create another request that inserts the item back into the database
+ const updateTitleRequest = objectStore.put(data);
+
+ // When this new request succeeds, run the displayData() function again to update the display
+ updateTitleRequest.onsuccess = () => {
+ displayData();
+ };
+ };
+ };
+
+ // Using a setInterval to run the checkDeadlines() function every second
+ setInterval(checkDeadlines, 1000);
+}
+
+// Helper function returning the day of the month followed by an ordinal (st, nd, or rd)
+function ordinal(day) {
+ const n = day.toString();
+ const last = n.slice(-1);
+ if (last === '1' && n !== '11') return `${n}st`;
+ if (last === '2' && n !== '12') return `${n}nd`;
+ if (last === '3' && n !== '13') return `${n}rd`;
+ return `${n}th`;
+};
\ No newline at end of file
diff --git a/tests/assets/to-do-notifications/style/style.css b/tests/assets/to-do-notifications/style/style.css
new file mode 100644
index 0000000000..c08ff299ac
--- /dev/null
+++ b/tests/assets/to-do-notifications/style/style.css
@@ -0,0 +1,248 @@
+/* Basic set up + sizing for containers */
+
+html,
+body {
+ margin: 0;
+}
+
+html {
+ width: 100%;
+ height: 100%;
+ font-size: 10px;
+ font-family: Georgia, "Times New Roman", Times, serif;
+ background: #111;
+}
+
+body {
+ width: 50rem;
+ position: relative;
+ background: #d88;
+ margin: 0 auto;
+ border-left: 2px solid #d33;
+ border-right: 2px solid #d33;
+}
+
+h1,
+h2 {
+ text-align: center;
+ background: #d88;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+ font-size: 6rem;
+ margin: 0;
+ background: #d66;
+}
+
+h2 {
+ font-size: 2.4rem;
+}
+
+/* Bottom toolbar styling */
+
+#toolbar {
+ position: relative;
+ height: 6rem;
+ width: 100%;
+ background: #d66;
+ border-top: 2px solid #d33;
+ border-bottom: 2px solid #d33;
+}
+
+#enable,
+input[type="submit"] {
+ line-height: 1.8;
+ font-size: 1.3rem;
+ border-radius: 5px;
+ border: 1px solid black;
+ color: black;
+ text-shadow: 1px 1px 1px black;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ box-shadow:
+ inset 0px 5px 3px rgba(255, 255, 255, 0.2),
+ inset 0px -5px 3px rgba(0, 0, 0, 0.2);
+}
+
+#enable {
+ position: absolute;
+ bottom: 0.3rem;
+ right: 0.3rem;
+}
+
+#notifications {
+ margin: 0;
+ position: relative;
+ padding: 0.3rem;
+ background: #ddd;
+ position: absolute;
+ top: 0rem;
+ left: 0rem;
+ height: 5.4rem;
+ width: 50%;
+ overflow: auto;
+ line-height: 1.2;
+}
+
+#notifications li {
+ margin-left: 1.5rem;
+}
+
+/* New item form styling */
+
+.form-box {
+ background: #d66;
+ width: 85%;
+ padding: 1rem;
+ margin: 2rem auto;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+}
+
+form div {
+ margin-bottom: 1rem;
+}
+
+form .full-width {
+ margin: 1rem auto 2rem;
+ width: 100%;
+}
+
+form .half-width {
+ width: 50%;
+ float: left;
+}
+
+form .third-width {
+ width: 33%;
+ float: left;
+}
+
+form div label {
+ width: 10rem;
+ float: left;
+ padding-right: 1rem;
+ font-size: 1.6rem;
+ line-height: 1.6;
+}
+
+form .full-width input {
+ width: 30rem;
+}
+
+form .half-width input {
+ width: 8.75rem;
+}
+
+form .third-width select {
+ width: 13.5rem;
+}
+
+form div input[type="submit"] {
+ clear: both;
+ width: 20rem;
+ display: block;
+ height: 3rem;
+ margin: 0 auto;
+ position: relative;
+ top: 0.5rem;
+}
+
+/* || tasks box */
+
+.task-box {
+ width: 85%;
+ padding: 1rem;
+ margin: 2rem auto;
+ font-size: 1.8rem;
+}
+
+.task-box ul {
+ margin: 0;
+ padding: 0;
+}
+
+.task-box li {
+ list-style-type: none;
+ padding: 1rem;
+ border-bottom: 2px solid #d33;
+}
+
+.task-box li:last-child {
+ border-bottom: none;
+}
+
+.task-box li:last-child {
+ margin-bottom: 0rem;
+}
+
+.task-box button {
+ margin-left: 2rem;
+ font-size: 1.6rem;
+ border: 1px solid #eee;
+ border-radius: 5px;
+ box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.5) 1px 1px 1px black;
+}
+
+/* setting cursor for interactive controls */
+
+button,
+input[type="submit"],
+select {
+ cursor: pointer;
+}
+
+/* media query for small screens */
+
+@media (max-width: 32rem) {
+ body {
+ width: 100%;
+ border-left: none;
+ border-right: none;
+ }
+
+ form div {
+ clear: both;
+ }
+
+ form .full-width {
+ margin: 1rem auto;
+ }
+
+ form .half-width {
+ width: 100%;
+ float: none;
+ }
+
+ form .third-width {
+ width: 100%;
+ float: none;
+ }
+
+ form div label {
+ width: 36%;
+ padding-left: 1rem;
+ }
+
+ form input,
+ form select,
+ form label {
+ line-height: 2.5rem;
+ font-size: 2rem;
+ }
+
+ form .full-width input {
+ width: 50%;
+ }
+
+ form .half-width input {
+ width: 50%;
+ }
+
+ form .third-width select {
+ width: 50%;
+ }
+
+ #enable {
+ right: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/tests/library/browsercontext-storage-state.spec.ts b/tests/library/browsercontext-storage-state.spec.ts
index 40a7dc0fb1..b74cfadf7a 100644
--- a/tests/library/browsercontext-storage-state.spec.ts
+++ b/tests/library/browsercontext-storage-state.spec.ts
@@ -317,8 +317,8 @@ it('should roundtrip local storage in third-party context', async ({ page, conte
await context2.close();
});
-it('should support IndexedDB', async ({ page, contextFactory }) => {
- await page.goto('https://mdn.github.io/dom-examples/to-do-notifications/');
+it('should support IndexedDB', async ({ page, server, contextFactory }) => {
+ await page.goto(server.PREFIX + '/to-do-notifications/index.html');
await page.getByLabel('Task title').fill('Pet the cat');
await page.getByLabel('Hours').fill('1');
await page.getByLabel('Mins').fill('1');
@@ -327,7 +327,7 @@ it('should support IndexedDB', async ({ page, contextFactory }) => {
const storageState = await page.context().storageState();
expect(storageState.origins).toEqual([
{
- origin: 'https://mdn.github.io',
+ origin: server.PREFIX,
localStorage: [],
indexedDB: [
{
@@ -403,64 +403,10 @@ it('should support IndexedDB', async ({ page, contextFactory }) => {
expect(await context.storageState()).toEqual(storageState);
const recreatedPage = await context.newPage();
- await recreatedPage.goto('https://mdn.github.io/dom-examples/to-do-notifications/');
+ await recreatedPage.goto(server.PREFIX + '/to-do-notifications/index.html');
await expect(recreatedPage.locator('#task-list')).toMatchAriaSnapshot(`
- list:
- listitem:
- text: /Pet the cat/
`);
});
-
-it('indexedDb firebase acceptance test', async ({ page, contextFactory }) => {
- await page.goto('https://fir-ui-demo-84a6c.firebaseapp.com/');
- await page.getByText('Continue as guest').click();
- await expect(page.getByRole('button', { name: 'Sign Out' })).toBeVisible();
- await page.close();
- const storageState = await page.context().storageState();
- expect(storageState).toEqual({
- cookies: [],
- origins: [
- {
- indexedDB: [
- {
- name: 'firebase-heartbeat-database',
- stores: [
- {
- autoIncrement: false,
- indexes: [],
- name: 'firebase-heartbeat-store',
- records: [],
- },
- ],
- version: 1,
- },
- {
- name: 'firebaseLocalStorageDb',
- stores: [
- {
- autoIncrement: false,
- indexes: [],
- keyPath: 'fbase_key',
- name: 'firebaseLocalStorage',
- records: [
- {
- value: expect.any(String),
- },
- ],
- },
- ],
- version: 1,
- },
- ],
- localStorage: [],
- origin: 'https://fir-ui-demo-84a6c.firebaseapp.com',
- },
- ],
- });
-
- const recreatedContext = await contextFactory({ storageState });
- const recreatedPage = await recreatedContext.newPage();
- await recreatedPage.goto('https://fir-ui-demo-84a6c.firebaseapp.com/');
- await expect(recreatedPage.getByRole('button', { name: 'Sign Out' })).toBeVisible();
- expect(await recreatedContext.storageState()).toEqual(storageState);
-});