[e2e] Refactor and document our extension of existing Playwright API and RFE features (#5537)

e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js

@@ -0,0 +1,200 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
+*/
+
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+const { test, expect } = require('../../../../baseFixtures');
+
+test.describe('Notebook CRUD Operations', () => {
+    test.fixme('Can create a Notebook Object', async ({ page }) => {
+        //Create domain object
+        //Newly created notebook should have one Section and one page, 'Unnamed Section'/'Unnamed Page'
+    });
+    test.fixme('Can update a Notebook Object', async ({ page }) => {});
+    test.fixme('Can view a perviously created Notebook Object', async ({ page }) => {});
+    test.fixme('Can Delete a Notebook Object', async ({ page }) => {
+        // Other than non-persistible objects
+    });
+});
+
+test.describe('Default Notebook', () => {
+    // General Default Notebook statements
+    // ## Useful commands:
+    // 1.  - To check default notebook:
+    //     `JSON.parse(localStorage.getItem('notebook-storage'));`
+    // 1.  - Clear default notebook:
+    //     `localStorage.setItem('notebook-storage', null);`
+    test.fixme('A newly created Notebook is automatically set as the default notebook if no other notebooks exist', async ({ page }) => {
+        //Create new notebook
+        //Verify Default Notebook Characteristics
+    });
+    test.fixme('A newly created Notebook is automatically set as the default notebook if at least one other notebook exists', async ({ page }) => {
+        //Create new notebook A
+        //Create second notebook B
+        //Verify Non-Default Notebook A Characteristics
+        //Verify Default Notebook B Characteristics
+    });
+    test.fixme('If a default notebook is deleted, the second most recent notebook becomes the default', async ({ page }) => {
+        //Create new notebook A
+        //Create second notebook B
+        //Delete Notebook B
+        //Verify Default Notebook A Characteristics
+    });
+});
+
+test.describe('Notebook section tests', () => {
+    //The following test cases are associated with Notebook Sections
+    test.fixme('New sections are automatically named Unnamed Section with Unnamed Page', async ({ page }) => {
+        //Create new notebook A
+        //Add section
+        //Verify new section and new page details
+    });
+    test.fixme('Section selection operations and associated behavior', async ({ page }) => {
+        //Create new notebook A
+        //Add Sections until 6 total with no default section/page
+        //Select 3rd section
+        //Delete 4th section
+        //3rd section is still selected
+        //Delete 3rd section
+        //1st section is selected
+        //Set 3rd section as default
+        //Delete 2nd section
+        //3rd section is still default
+        //Delete 3rd section
+        //1st is selected and there is no default notebook
+    });
+});
+
+test.describe('Notebook page tests', () => {
+    //The following test cases are associated with Notebook Pages
+    test.fixme('Page selection operations and associated behavior', async ({ page }) => {
+        //Create new notebook A
+        //Delete existing Page
+        //New 'Unnamed Page' automatically created
+        //Create 6 total Pages without a default page
+        //Select 3rd
+        //Delete 3rd
+        //First is now selected
+        //Set 3rd as default
+        //Select 2nd page
+        //Delete 2nd page
+        //3rd (default) is now selected
+        //Set 3rd as default page
+        //Select 3rd (default) page
+        //Delete 3rd page
+        //First is now selected and there is no default notebook
+    });
+});
+
+test.describe('Notebook search tests', () => {
+    test.fixme('Can search for a single result', async ({ page }) => {});
+    test.fixme('Can search for many results', async ({ page }) => {});
+    test.fixme('Can search for new and recently modified entries', async ({ page }) => {});
+    test.fixme('Can search for section text', async ({ page }) => {});
+    test.fixme('Can search for page text', async ({ page }) => {});
+    test.fixme('Can search for entry text', async ({ page }) => {});
+});
+
+test.describe('Notebook entry tests', () => {
+    test.fixme('When a new entry is created, it should be focused', async ({ page }) => {});
+    test.fixme('When a telemetry object is dropped into a notebook, a new entry is created and it should be focused', async ({ page }) => {
+        // Drag and drop any telmetry object on 'drop object'
+        // new entry gets created with telemtry object
+    });
+    test.fixme('When a telemetry object is dropped into a notebooks existing entry, it should be focused', async ({ page }) => {
+        // Drag and drop any telemetry object onto existing entry
+        // Entry updated with object and snapshot
+    });
+    test.fixme('new entries persist through navigation events without save', async ({ page }) => {});
+    test.fixme('previous and new entries can be deleted', async ({ page }) => {});
+});
+
+test.describe('Snapshot Menu tests', () => {
+    test.fixme('When no default notebook is selected, Snapshot Menu dropdown should only have a single option', async ({ page }) => {
+        // There should be no default notebook
+        // Clear default notebook if exists using `localStorage.setItem('notebook-storage', null);`
+        // refresh page
+        // Click on 'Notebook Snaphot Menu'
+        // 'save to Notebook Snapshots' should be only option there
+    });
+    test.fixme('When default notebook is updated selected, Snapshot Menu dropdown should list it as the newest option', async ({ page }) => {
+        // Create 2a notebooks
+        // Set Notebook A as Default
+        // Open Snapshot Menu and note that Notebook A is listed
+        // Close Snapshot Menu
+        // Set Default Notebook to Notebook B
+        // Open Snapshot Notebook and note that Notebook B is listed
+        // Select Default Notebook Option and verify that Snapshot is added to Notebook B
+    });
+    test.fixme('Can add Snapshots via Snapshot Menu and details are correct', async ({ page }) => {
+        //Note this should be a visual test, too
+        // Create Telemetry object
+        // Create A notebook with many pages and sections.
+        // Set page and section defaults to be between first and last of many. i.e. 3 of 5
+        // Navigate to Telemetry object
+        // Select Default Notebook Option and verify that Snapshot is added to Notebook A
+        // Verify Snapshot Details appear correctly
+    });
+    test.fixme('Snapshots adjust time conductor', async ({ page }) => {
+        // Create Telemetry object
+        // Set Telemetry object's timeconductor to Fixed time with Start and Endtimes are recorded
+        // Embed Telemetry object into notebook
+        // Set Time Conductor to Local clock
+        // Click into embedded telemetry object and verify object appears with same fixed time from record
+    });
+});
+
+test.describe('Snapshot Container tests', () => {
+    test.fixme('5 Snapshots can be added to a container', async ({ page }) => {});
+    test.fixme('5 Snapshots can be added to a container and Deleted with Delete All action', async ({ page }) => {});
+    test.fixme('A snapshot can be Deleted from Container', async ({ page }) => {});
+    test.fixme('A snapshot can be Previewed from Container', async ({ page }) => {});
+    test.fixme('A snapshot Container can be open and closed', async ({ page }) => {});
+    test.fixme('Can add object to Snapshot container and pull into notebook and create a new entry', async ({ page }) => {
+        //Create Notebook
+        //Create Telemetry Object
+        //From Telemetry Object, use 'save to Notebook Snapshots'
+        //Snapshots indicator should blink, click on it to view snapshots
+        //Navigate to Notebook
+        //Drag and Drop onto droppable area for new entry
+        //New Entry created with given snapshot added
+        //Snapshot removed from container?
+    });
+    test.fixme('Can add object to Snapshot container and pull into notebook and existing entry', async ({ page }) => {
+        //Create Notebook
+        //Create Telemetry Object
+        //From Telemetry Object, use 'save to Notebook Snapshots'
+        //Snapshots indicator should blink, click on it to view snapshots
+        //Navigate to Notebook
+        //Drag and Drop into exiting entry
+        //Existing Entry updated with given snapshot
+        //Snapshot removed from container?
+    });
+    test.fixme('Verify Embedded options for PNG, JPG, and Annotate work correctly', async ({ page }) => {
+        //Add snapshot to container
+        //Verify PNG, JPG, and Annotate buttons work correctly
+    });
+});

e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js

@@ -0,0 +1,235 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const { test, expect } = require('../../../../pluginFixtures');
+const { openObjectTreeContextMenu } = require('../../../../appActions');
+const path = require('path');
+
+const TEST_TEXT = 'Testing text for entries.';
+const TEST_TEXT_NAME = 'Test Page';
+const CUSTOM_NAME = 'CUSTOM_NAME';
+const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
+
+test.describe('Restricted Notebook', () => {
+    test.beforeEach(async ({ page }) => {
+        await startAndAddRestrictedNotebookObject(page);
+    });
+
+    test('Can be renamed @addInit', async ({ page }) => {
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText(`Unnamed ${CUSTOM_NAME}`);
+    });
+
+    test('Can be deleted if there are no locked pages @addInit', async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        await openObjectTreeContextMenu(page, myItemsFolderName, `Unnamed ${CUSTOM_NAME}`);
+
+        const menuOptions = page.locator('.c-menu ul');
+        await expect.soft(menuOptions).toContainText('Remove');
+
+        const restrictedNotebookTreeObject = page.locator(`a:has-text("Unnamed ${CUSTOM_NAME}")`);
+
+        // notebook tree object exists
+        expect.soft(await restrictedNotebookTreeObject.count()).toEqual(1);
+
+        // Click Remove Text
+        await page.locator('text=Remove').click();
+
+        // Click 'OK' on confirmation window and wait for save banner to appear
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click(),
+            page.waitForSelector('.c-message-banner__message')
+        ]);
+
+        // has been deleted
+        expect(await restrictedNotebookTreeObject.count()).toEqual(0);
+    });
+
+    test('Can be locked if at least one page has one entry @addInit', async ({ page }) => {
+
+        await enterTextEntry(page);
+
+        const commitButton = page.locator('button:has-text("Commit Entries")');
+        expect(await commitButton.count()).toEqual(1);
+    });
+
+});
+
+test.describe('Restricted Notebook with at least one entry and with the page locked @addInit', () => {
+
+    test.beforeEach(async ({ page }) => {
+        await startAndAddRestrictedNotebookObject(page);
+        await enterTextEntry(page);
+        await lockPage(page);
+
+        // open sidebar
+        await page.locator('button.c-notebook__toggle-nav-button').click();
+    });
+
+    test('Locked page should now be in a locked state @addInit @unstable', async ({ page, openmctConfig }, testInfo) => {
+        test.fixme(testInfo.project === 'chrome-beta', "Test is unreliable on chrome-beta");
+        const { myItemsFolderName } = openmctConfig;
+        // main lock message on page
+        const lockMessage = page.locator('text=This page has been committed and cannot be modified or removed');
+        expect.soft(await lockMessage.count()).toEqual(1);
+
+        // lock icon on page in sidebar
+        const pageLockIcon = page.locator('ul.c-notebook__pages li div.icon-lock');
+        expect.soft(await pageLockIcon.count()).toEqual(1);
+
+        // no way to remove a restricted notebook with a locked page
+        await openObjectTreeContextMenu(page, myItemsFolderName, `Unnamed ${CUSTOM_NAME}`);
+        const menuOptions = page.locator('.c-menu ul');
+
+        await expect(menuOptions).not.toContainText('Remove');
+    });
+
+    test('Can still: add page, rename, add entry, delete unlocked pages @addInit', async ({ page }) => {
+        // Click text=Page Add >> button
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Page Add >> button').click()
+        ]);
+        // Click text=Unnamed Page >> nth=1
+        await page.locator('text=Unnamed Page').nth(1).click();
+        // Press a with modifiers
+        await page.locator('text=Unnamed Page').nth(1).fill(TEST_TEXT_NAME);
+
+        // expect to be able to rename unlocked pages
+        const newPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
+        const newPageCount = await newPageElement.count();
+        await newPageElement.press('Enter'); // exit contenteditable state
+        expect.soft(newPageCount).toEqual(1);
+
+        // enter test text
+        await enterTextEntry(page);
+
+        // expect new page to be lockable
+        const commitButton = page.locator('BUTTON:HAS-TEXT("COMMIT ENTRIES")');
+        expect.soft(await commitButton.count()).toEqual(1);
+
+        // Click text=Unnamed PageTest Page >> button
+        await page.locator('text=Unnamed PageTest Page >> button').click();
+        // Click text=Delete Page
+        await page.locator('text=Delete Page').click();
+        // Click text=Ok
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Ok').click()
+        ]);
+
+        // deleted page, should no longer exist
+        const deletedPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
+        expect(await deletedPageElement.count()).toEqual(0);
+    });
+});
+
+test.describe('Restricted Notebook with a page locked and with an embed @addInit', () => {
+
+    test.beforeEach(async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+        await startAndAddRestrictedNotebookObject(page);
+        await dragAndDropEmbed(page, myItemsFolderName);
+    });
+
+    test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => {
+        // Click .c-ne__embed__name .c-popup-menu-button
+        await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
+
+        const embedMenu = page.locator('body >> .c-menu');
+        await expect(embedMenu).toContainText('Remove This Embed');
+    });
+
+    test('Disallows embeds to be deleted if page locked @addInit', async ({ page }) => {
+        await lockPage(page);
+        // Click .c-ne__embed__name .c-popup-menu-button
+        await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
+
+        const embedMenu = page.locator('body >> .c-menu');
+        await expect(embedMenu).not.toContainText('Remove This Embed');
+    });
+
+});
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function startAndAddRestrictedNotebookObject(page) {
+    // eslint-disable-next-line no-undef
+    await page.addInitScript({ path: path.join(__dirname, '../../../../helper/', 'addInitRestrictedNotebook.js') });
+    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.click('button:has-text("Create")');
+    await page.click(`text=${CUSTOM_NAME}`); // secondarily tests renamability also
+    // Click text=OK
+    await Promise.all([
+        page.waitForNavigation({waitUntil: 'networkidle'}),
+        page.click('text=OK')
+    ]);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enterTextEntry(page) {
+    // Click .c-notebook__drag-area
+    await page.locator(NOTEBOOK_DROP_AREA).click();
+
+    // enter text
+    await page.locator('div.c-ne__text').click();
+    await page.locator('div.c-ne__text').fill(TEST_TEXT);
+    await page.locator('div.c-ne__text').press('Enter');
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function dragAndDropEmbed(page, myItemsFolderName) {
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    // Click li:has-text("Sine Wave Generator")
+    await page.locator('li:has-text("Sine Wave Generator")').click();
+    // Click form[name="mctForm"] >> text=My Items
+    await page.locator(`form[name="mctForm"] >> text=${myItemsFolderName}`).click();
+    // Click text=OK
+    await page.locator('text=OK').click();
+    // Click text=Open MCT My Items >> span >> nth=3
+    await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+    // Click text=Unnamed CUSTOM_NAME
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed CUSTOM_NAME').click()
+    ]);
+
+    await page.dragAndDrop('text=UNNAMED SINE WAVE GENERATOR', NOTEBOOK_DROP_AREA);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function lockPage(page) {
+    const commitButton = page.locator('button:has-text("Commit Entries")');
+    await commitButton.click();
+
+    //Wait until Lock Banner is visible
+    await page.locator('text=Lock Page').click();
+}

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -0,0 +1,214 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify form functionality.
+*/
+
+const { test, expect } = require('../../../../pluginFixtures');
+
+/**
+  * Creates a notebook object and adds an entry.
+  * @param {import('@playwright/test').Page} - page to load
+  * @param {number} [iterations = 1] - the number of entries to create
+  */
+async function createNotebookAndEntry(page, myItemsFolderName, iterations = 1) {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('[title="Create and save timestamped notes with embedded object snapshots."]').click();
+    // Click button:has-text("OK")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator(`[name="mctForm"] >> text=${myItemsFolderName}`).click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    for (let iteration = 0; iteration < iterations; iteration++) {
+        // Click text=To start a new entry, click here or drag and drop any object
+        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
+        const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = ${iteration}`;
+        await page.locator(entryLocator).click();
+        await page.locator(entryLocator).fill(`Entry ${iteration}`);
+    }
+
+}
+
+/**
+  * Creates a notebook object, adds an entry, and adds a tag.
+  * @param {import('@playwright/test').Page} page
+  * @param {number} [iterations = 1] - the number of entries (and tags) to create
+  */
+async function createNotebookEntryAndTags(page, myItemsFolderName, iterations = 1) {
+    await createNotebookAndEntry(page, myItemsFolderName, iterations);
+
+    for (let iteration = 0; iteration < iterations; iteration++) {
+        // Click text=To start a new entry, click here or drag and drop any object
+        await page.locator(`button:has-text("Add Tag") >> nth = ${iteration}`).click();
+
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+        // Click text=Driving
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
+
+        // Click button:has-text("Add Tag")
+        await page.locator(`button:has-text("Add Tag") >> nth = ${iteration}`).click();
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+        // Click text=Science
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
+    }
+}
+
+test.describe('Tagging in Notebooks', () => {
+    test('Can load tags', async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        await createNotebookAndEntry(page, myItemsFolderName);
+        // Click text=To start a new entry, click here or drag and drop any object
+        await page.locator('button:has-text("Add Tag")').click();
+
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Driving");
+    });
+    test('Can add tags', async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        await createNotebookEntryAndTags(page, myItemsFolderName);
+
+        await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText("Driving");
+
+        // Click button:has-text("Add Tag")
+        await page.locator('button:has-text("Add Tag")').click();
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Science");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Driving");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
+    });
+    test('Can search for tags', async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        await createNotebookEntryAndTags(page, myItemsFolderName);
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Driving");
+
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Sc');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Driving");
+
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+    });
+
+    test('Can delete tags', async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        await createNotebookEntryAndTags(page, myItemsFolderName);
+        await page.locator('[aria-label="Notebook Entries"]').click();
+        // Delete Driving
+        await page.locator('text=Science Driving Add Tag >> button').nth(1).click();
+
+        await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Notebook Entry"]')).not.toContainText("Driving");
+
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+        await expect(page.locator('[aria-label="Search Result"]')).not.toContainText("Driving");
+    });
+    test('Tags persist across reload', async ({ page, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        //Go to baseURL
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        // Create a clock object we can navigate to
+        await page.click('button:has-text("Create")');
+
+        // Click Clock
+        await page.click('text=Clock');
+        // Click button:has-text("OK")
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator(`[name="mctForm"] >> text=${myItemsFolderName}`).click(),
+            page.locator('button:has-text("OK")').click()
+        ]);
+
+        await page.click('.c-disclosure-triangle');
+
+        const ITERATIONS = 4;
+        await createNotebookEntryAndTags(page, myItemsFolderName, ITERATIONS);
+
+        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+            await expect(page.locator(entryLocator)).toContainText("Science");
+            await expect(page.locator(entryLocator)).toContainText("Driving");
+        }
+
+        // Click Unnamed Clock
+        await page.click('text="Unnamed Clock"');
+
+        // Click Unnamed Notebook
+        await page.click('text="Unnamed Notebook"');
+
+        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+            await expect(page.locator(entryLocator)).toContainText("Science");
+            await expect(page.locator(entryLocator)).toContainText("Driving");
+        }
+
+        //Reload Page
+        await Promise.all([
+            page.reload(),
+            page.waitForLoadState('networkidle')
+        ]);
+
+        // Click Unnamed Notebook
+        await page.click('text="Unnamed Notebook"');
+
+        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+            await expect(page.locator(entryLocator)).toContainText("Science");
+            await expect(page.locator(entryLocator)).toContainText("Driving");
+        }
+
+    });
+});