import { test } from "@playwright/test"; import { DashboardPage } from "../pages/Dashboard"; import setup from "../setup"; test.describe("Shared view", () => { let dashboard: DashboardPage; let context: any; let mainPageLink: string; let sharedLink: string; test.beforeEach(async ({ page }) => { context = await setup({ page }); dashboard = new DashboardPage(page, context.project); }); test("Grid share ", async ({ page }) => { /** * 1. Create Shared view * - hide column * - add sort * - add filter * - enable download * - disable password * - generate shared view link * - copy link **/ // close 'Team & Auth' tab await dashboard.closeTab({ title: "Team & Auth" }); await dashboard.treeView.openTable({ title: "Address" }); // hide column await dashboard.grid.toolbar.fields.toggle({ title: "Address2" }); // sort await dashboard.grid.toolbar.sort.addSort({ columnTitle: "District", isAscending: false, isLocallySaved: false }); // filter await dashboard.grid.toolbar.filter.addNew({ columnTitle: "Address", value: "Ab", opType: "is like", isLocallySaved: false }); mainPageLink = page.url(); // share with password disabled, download enabled await dashboard.grid.toolbar.clickShareView(); sharedLink = await dashboard.grid.toolbar.shareView.getShareLink(); /** * 2. Access shared view: verify * - access without password * - column order * - data order (sort & filter) * - virtual columns (hm, bt) **/ await page.goto(sharedLink); const sharedPage = new DashboardPage(page, context.project); let expectedColumns = [ { title: "Address", isVisible: true }, { title: "Address2", isVisible: false }, { title: "District", isVisible: true }, { title: "City", isVisible: true }, { title: "PostalCode", isVisible: true }, { title: "Phone", isVisible: true }, { title: "LastUpdate", isVisible: true }, { title: "Customer List", isVisible: true }, { title: "Staff List", isVisible: true }, { title: "City", isVisible: true }, ]; for (const column of expectedColumns) { await sharedPage.grid.column.verify(column); } const expectedRecords = [ { index: 0, columnHeader: "Address", value: "1013 Tabuk Boulevard" }, { index: 1, columnHeader: "Address", value: "1892 Nabereznyje Telny Lane", }, { index: 2, columnHeader: "Address", value: "1993 Tabuk Lane" }, { index: 0, columnHeader: "District", value: "West Bengali" }, { index: 1, columnHeader: "District", value: "Tutuila" }, { index: 2, columnHeader: "District", value: "Tamil Nadu" }, { index: 0, columnHeader: "PostalCode", value: "96203" }, { index: 1, columnHeader: "PostalCode", value: "28396" }, { index: 2, columnHeader: "PostalCode", value: "64221" }, { index: 0, columnHeader: "Phone", value: "158399646978" }, { index: 1, columnHeader: "Phone", value: "478229987054" }, { index: 2, columnHeader: "Phone", value: "648482415405" }, ]; // verify order of records (original sort & filter) for (const record of expectedRecords) { await sharedPage.grid.cell.verify(record); } const expectedVirtualRecords = [ { index: 0, columnHeader: "Customer List", count: 1, value: ["2"] }, { index: 1, columnHeader: "Customer List", count: 1, value: ["2"] }, { index: 0, columnHeader: "City", count: 1, value: ["Kanchrapara"] }, { index: 1, columnHeader: "City", count: 1, value: ["Tafuna"] }, ]; // verify virtual records for (const record of expectedVirtualRecords) { await sharedPage.grid.cell.verifyVirtualCell(record); } /** * 3. Shared view: verify * - new sort * - new filter * - new column hidden **/ // create new sort & filter criteria in shared view await sharedPage.grid.toolbar.sort.addSort({ columnTitle: "Address", isAscending: true, isLocallySaved: true, }); await sharedPage.grid.toolbar.filter.addNew({ columnTitle: "District", value: "Ta", opType: "is like", isLocallySaved: true, }); await sharedPage.grid.toolbar.fields.toggle({ title: "LastUpdate" }); expectedColumns[6].isVisible = false; // verify new sort & filter criteria for (const column of expectedColumns) { await sharedPage.grid.column.verify(column); } const expectedRecords2 = [ { index: 0, columnHeader: "Address", value: "1661 Abha Drive" }, { index: 1, columnHeader: "Address", value: "1993 Tabuk Lane" }, { index: 2, columnHeader: "Address", value: "381 Kabul Way" }, { index: 0, columnHeader: "District", value: "Tamil Nadu" }, { index: 1, columnHeader: "District", value: "Tamil Nadu" }, { index: 2, columnHeader: "District", value: "Taipei" }, { index: 0, columnHeader: "PostalCode", value: "14400" }, { index: 1, columnHeader: "PostalCode", value: "64221" }, { index: 2, columnHeader: "PostalCode", value: "87272" }, { index: 0, columnHeader: "Phone", value: "270456873752" }, { index: 1, columnHeader: "Phone", value: "648482415405" }, { index: 2, columnHeader: "Phone", value: "55477302294" }, ]; // verify order of records (original sort & filter) for (const record of expectedRecords2) { await sharedPage.grid.cell.verify(record); } /** * 4. Download * - Verify download data (order, filter, sort) **/ // verify download await sharedPage.grid.toolbar.clickDownload( "Download as CSV", "./expectedData.txt" ); }); test("Shared view: password", async ({ page }) => { /** * 5. Enable shared view password, disable download: verify * - Incorrect password * - Correct password * - Download disabled * - Add new record & column after shared view creation; verify **/ await dashboard.closeTab({ title: "Team & Auth" }); await dashboard.treeView.openTable({ title: "Country" }); // enable password & verify share link await dashboard.grid.toolbar.clickShareView(); await dashboard.grid.toolbar.shareView.enablePassword("p@ssword"); // disable download await dashboard.grid.toolbar.shareView.toggleDownload(); sharedLink = await dashboard.grid.toolbar.shareView.getShareLink(); await dashboard.grid.toolbar.shareView.close(); // add new column, record after share view creation await dashboard.grid.column.create({ title: "New Column", }); await dashboard.grid.addNewRow({ index: 25, columnHeader: "Country", value: "New Country", }); await page.goto(sharedLink); // verify if password request modal exists const sharedPage2 = new DashboardPage(page, context.project); await sharedPage2.rootPage .locator('input[placeholder="Enter password"]') .fill("incorrect p@ssword"); await sharedPage2.rootPage.click('button:has-text("Unlock")'); await sharedPage2.toastWait({ message: "INVALID_SHARED_VIEW_PASSWORD" }); // correct password await sharedPage2.rootPage .locator('input[placeholder="Enter password"]') .fill("p@ssword"); await sharedPage2.rootPage.click('button:has-text("Unlock")'); // verify if download button is disabled await sharedPage2.grid.toolbar.verifyDownloadDisabled(); // verify new column & record await sharedPage2.grid.column.verify({ title: "New Column", isVisible: true, }); await sharedPage2.grid.toolbar.filter.addNew({ columnTitle: "Country", value: "New Country", opType: "is like", isLocallySaved: true, }); await sharedPage2.grid.cell.verify({ index: 0, columnHeader: "Country", value: "New Country", }); }); });