@rickcedwhat/playwright-smart-table 2.0.1 → 2.0.2

package/README.md

@@ -11,7 +11,7 @@ npm install @rickcedwhat/playwright-smart-table
 
 Requires @playwright/test as a peer dependency.
 
-🚀 Quick Start
+⚡ Quick Start
 
 1. The Standard HTML Table
 
@@ -23,17 +23,17 @@ import { useTable } from '@rickcedwhat/playwright-smart-table';
 test('Verify User Email', async ({ page }) => {
   const table = useTable(page.locator('#users-table'));
   
-  // 🪄 Magic: Finds the row with Name="Alice", then gets the Email cell
+  // 🪄 Finds the row with Name="Alice", then gets the Email cell.
   // If Alice is on Page 2, it handles pagination automatically.
-  await expect(
-    await table.getByCell({ Name: 'Alice' }, 'Email')
-  ).toHaveText('alice@example.com');
+  const row = await table.getByRow({ Name: 'Alice' });
+  
+  await expect(row.getCell('Email')).toHaveText('alice@example.com');
 });
 
 
 2. Complex Grids (Material UI / AG-Grid / Divs)
 
-For modern React grids that use <div> structures, simply override the selectors.
+For modern React grids, simply override the selectors and define a pagination strategy.
 
 import { useTable, TableStrategies } from '@rickcedwhat/playwright-smart-table';
 
@@ -43,110 +43,139 @@ const table = useTable(page.locator('.MuiDataGrid-root'), {
   cellSelector: '.MuiDataGrid-cell',
   // Strategy: Tell it how to find the next page
   pagination: TableStrategies.clickNext(
-    (root) => root.getByRole('button', { name: 'Go to next page' })
+    // Use 'page' to find buttons outside the table container
+    (root) => root.page().getByRole('button', { name: 'Go to next page' })
   )
 });
 
 
-🧩 Pagination Strategies
+🧠 SmartRow Pattern
 
-This library uses the Strategy Pattern to handle navigation. This ensures future stability: we can add new ways to paginate without breaking existing tests.
+The core power of this library is the SmartRow.
 
-clickNext(selector)
+Unlike a standard Playwright Locator, a SmartRow is aware of its context within the table's schema. It extends the standard Locator API, so you can chain standard Playwright methods (.click(), .isVisible()) directly off it.
 
-Best for standard tables (Datatables, lists).
+getCell(columnName)
 
-Behavior: Clicks the button -> Waits for the first row of data to change.
+Instead of writing brittle nth-child selectors, ask for the column by name.
 
-Selector: Can be a CSS string OR a Playwright locator function.
+// ✅ Good: Resilient to column reordering
+await row.getCell('Email').click(); 
 
-// CSS String
-pagination: TableStrategies.clickNext('button.next-page')
+// ❌ Bad: Brittle
+await row.locator('td').nth(2).click(); 
 
-// Locator Function (More Robust)
-pagination: TableStrategies.clickNext((root) => root.getByRole('button', { name: 'Next' }))
 
+toJSON()
 
-infiniteScroll()
+Extracts the entire row's data into a clean key-value object.
 
-Best for Virtualized Grids (AG-Grid) or lazy-loading lists (HTMX).
+const data = await row.toJSON();
+console.log(data); 
+// { Name: "Alice", Role: "Admin", Status: "Active" }
 
-Behavior: Aggressively scrolls the container/window to the bottom -> Waits for row count to increase.
 
-pagination: TableStrategies.infiniteScroll()
+📖 API Reference
 
+getByRow(filters, options?)
 
-clickLoadMore(selector)
+Strict Retrieval. Finds a single specific row.
 
-Best for "Load More" buttons.
+Throws Error if >1 rows match (ambiguous query).
 
-Behavior: Clicks button -> Waits for row count to increase.
+Returns Sentinel if 0 rows match (allows not.toBeVisible() assertions).
 
-pagination: TableStrategies.clickLoadMore('button.load-more')
+Auto-Paginates if the row isn't found on the current page.
 
+// Find a row where Name is "Alice" AND Role is "Admin"
+const row = await table.getByRow({ Name: "Alice", Role: "Admin" });
+await expect(row).toBeVisible();
 
-📖 API Reference
+// Assert it does NOT exist
+await expect(await table.getByRow({ Name: "Ghost" })).not.toBeVisible();
 
-getByRow(filters, options?)
 
-Returns the Locator for a specific row.
+getAllRows(options?)
 
-Strict Mode: Throws an error if filters match more than 1 row.
+Inclusive Retrieval. Gets a collection of rows.
 
-Auto-Pagination: Will search up to maxPages to find the row.
+Returns: Array of SmartRow objects.
 
-// Find a row where Name is "Alice" AND Role is "Admin"
-const row = await table.getByRow({ Name: "Alice", Role: "Admin" });
-await expect(row).toBeVisible();
+Best for: Checking existence ("at least one") or validating sort order.
+
+// 1. Get ALL rows on the current page
+const allRows = await table.getAllRows();
+
+// 2. Get subset of rows (Filtering)
+const activeUsers = await table.getAllRows({ 
+  filter: { Status: 'Active' } 
+});
+expect(activeUsers.length).toBeGreaterThan(0); // "At least one active user"
 
+// 3. Dump data to JSON
+const data = await table.getAllRows({ asJSON: true });
+console.log(data); // [{ Name: "Alice", Status: "Active" }, ...]
 
-getByCell(filters, targetColumn)
 
-Returns the Locator for a specific cell inside a matched row.
+🧩 Pagination Strategies
 
-Use this for interactions (clicking edit buttons, checking checkboxes).
+This library uses the Strategy Pattern to handle navigation. You can use the built-in strategies or write your own.
 
-// Find Alice's row, then find the "Actions" column, then click the button inside it
-await table.getByCell({ Name: "Alice" }, "Actions").getByRole('button').click();
+Built-in Strategies
 
+clickNext(selector)
+Best for standard tables (Datatables, lists). Clicks a button and waits for data to change.
 
-getRowAsJSON(filters)
+pagination: TableStrategies.clickNext((root) => 
+  root.page().getByRole('button', { name: 'Next' })
+)
 
-Returns a POJO (Plain Old JavaScript Object) of the row data. Useful for debugging or strict data assertions.
 
-const data = await table.getRowAsJSON({ ID: "101" });
-console.log(data); 
-// Output: { ID: "101", Name: "Alice", Status: "Active" }
+infiniteScroll()
+Best for Virtualized Grids (AG-Grid, HTMX). Aggressively scrolls to trigger data loading.
+
+pagination: TableStrategies.infiniteScroll()
 
 
-getRows()
+clickLoadMore(selector)
+Best for "Load More" buttons. Clicks and waits for row count to increase.
 
-Returns an array of all rows on the current page.
+Writing Custom Strategies
 
-const allRows = await table.getRows();
-expect(allRows[0].Name).toBe("Alice"); // Verify sort order
+A Strategy is just a function that receives the table context and returns a Promise<boolean> (true if navigation happened, false if we reached the end).
 
+import { PaginationStrategy } from '@rickcedwhat/playwright-smart-table';
 
-🛠️ Developer Tools
+const myCustomStrategy: PaginationStrategy = async ({ root, page, config }) => {
+  // 1. Check if we can navigate
+  const nextBtn = page.getByTestId('custom-next-arrow');
+  if (!await nextBtn.isVisible()) return false;
 
-The library includes helper tools to generate configurations for you.
+  // 2. Perform Navigation
+  await nextBtn.click();
 
-// Print the HTML structure prompt to console
-// Copy-paste the output into ChatGPT/Gemini to get your config object
-await table.generateConfigPrompt();
+  // 3. Smart Wait (Crucial!)
+  // Wait for a loading spinner to disappear, or data to change
+  await expect(page.locator('.spinner')).not.toBeVisible();
+  
+  return true; // We successfully moved to the next page
+};
+
+
+🛠️ Developer Tools
 
-// Print a prompt to help write a custom Pagination Strategy
-await table.generateStrategyPrompt();
+Don't waste time writing selectors manually. Use the generator tools to create your config.
 
+generateConfigPrompt(options?)
 
-🛡️ Stability & Versioning
+Prints a prompt you can paste into ChatGPT/Gemini to generate the TableConfig for your specific HTML.
 
-This package follows Semantic Versioning.
+// Options: 'console' (default), 'report' (Playwright HTML Report), 'file'
+await table.generateConfigPrompt({ output: 'report' });
 
-1.x.x: No breaking changes to the useTable signature.
 
-New strategies may be added, but existing ones will remain stable.
+generateStrategyPrompt(options?)
 
-To ensure stability in your projects, install with:
+Prints a prompt to help you write a custom Pagination Strategy.
 
-"@rickcedwhat/playwright-smart-table": "^1.0.0"
+await table.generateStrategyPrompt({ output: 'console' });

package/dist/useTable.js

@@ -25,7 +25,6 @@ const useTable = (rootLocator, configOptions = {}) => {
     const _getMap = () => __awaiter(void 0, void 0, void 0, function* () {
         if (_headerMap)
             return _headerMap;
-        // ✅ New Feature: Auto-Scroll on first interaction
         if (config.autoScroll) {
             yield rootLocator.scrollIntoViewIfNeeded();
         }
@@ -69,7 +68,6 @@ const useTable = (rootLocator, configOptions = {}) => {
         });
         return smart;
     };
-    // ♻️ HELPER: Centralized logic to filter a row locator
     const _applyFilters = (baseRows, filters, map, exact) => {
         let filtered = baseRows;
         const page = rootLocator.page();
@@ -79,59 +77,34 @@ const useTable = (rootLocator, configOptions = {}) => {
                 throw new Error(`Column '${colName}' not found.`);
             const filterVal = typeof value === 'number' ? String(value) : value;
             const cellTemplate = resolve(config.cellSelector, page);
-            // Filter the TRs that contain the matching cell at the specific index
             filtered = filtered.filter({
                 has: cellTemplate.nth(colIndex).getByText(filterVal, { exact }),
             });
         }
         return filtered;
     };
-    const _handlePrompt = (promptName_1, content_1, ...args_1) => __awaiter(void 0, [promptName_1, content_1, ...args_1], void 0, function* (promptName, content, options = {}) {
-        const { output = 'console', includeTypes = true } = options; // Default includeTypes to true
-        let finalPrompt = content;
-        if (includeTypes) {
-            // ✅ Inject the dynamic TYPE_CONTEXT
-            finalPrompt += `\n\n👇 Useful TypeScript Definitions 👇\n\`\`\`typescript\n${typeContext_1.TYPE_CONTEXT}\n\`\`\`\n`;
-        }
-        if (output === 'console') {
-            console.log(finalPrompt);
-        }
-        else if (output === 'report') {
-            if (test_1.test.info()) {
-                yield test_1.test.info().attach(promptName, {
-                    body: finalPrompt,
-                    contentType: 'text/markdown'
-                });
-                console.log(`✅ Attached '${promptName}' to Playwright Report.`);
-            }
-            else {
-                console.warn('⚠️ Cannot attach to report: No active test info found.');
-                console.log(finalPrompt);
-            }
-        }
-        // ... (file output logic) ...
-    });
     const _findRowLocator = (filters_1, ...args_1) => __awaiter(void 0, [filters_1, ...args_1], void 0, function* (filters, options = {}) {
         var _a;
         const map = yield _getMap();
         const effectiveMaxPages = (_a = options.maxPages) !== null && _a !== void 0 ? _a : config.maxPages;
         let currentPage = 1;
         while (true) {
-            // 1. Get all rows
             const allRows = resolve(config.rowSelector, rootLocator);
-            // 2. Apply filters using helper
             const matchedRows = _applyFilters(allRows, filters, map, options.exact || false);
-            // 3. Check Count
             const count = yield matchedRows.count();
             if (count > 1)
                 throw new Error(`Strict Mode Violation: Found ${count} rows matching ${JSON.stringify(filters)}.`);
             if (count === 1)
                 return matchedRows.first();
-            // 4. Pagination Logic (unchanged)
             if (config.pagination && currentPage < effectiveMaxPages) {
-                // ... (pagination code same as before)
-                const context = { root: rootLocator, config, page: rootLocator.page(), resolve };
-                if (yield config.pagination(context)) {
+                const context = {
+                    root: rootLocator,
+                    config: config,
+                    page: rootLocator.page(),
+                    resolve: resolve
+                };
+                const didLoadMore = yield config.pagination(context);
+                if (didLoadMore) {
                     currentPage++;
                     continue;
                 }
@@ -139,6 +112,29 @@ const useTable = (rootLocator, configOptions = {}) => {
             return null;
         }
     });
+    const _handlePrompt = (promptName_1, content_1, ...args_1) => __awaiter(void 0, [promptName_1, content_1, ...args_1], void 0, function* (promptName, content, options = {}) {
+        const { output = 'console', includeTypes = true } = options;
+        let finalPrompt = content;
+        if (includeTypes) {
+            finalPrompt += `\n\n👇 Useful TypeScript Definitions 👇\n\`\`\`typescript\n${typeContext_1.TYPE_CONTEXT}\n\`\`\`\n`;
+        }
+        if (output === 'console') {
+            console.log(finalPrompt);
+        }
+        else if (output === 'report') {
+            if (test_1.test.info()) {
+                yield test_1.test.info().attach(promptName, {
+                    body: finalPrompt,
+                    contentType: 'text/markdown'
+                });
+                console.log(`✅ Attached '${promptName}' to Playwright Report.`);
+            }
+            else {
+                console.warn('⚠️ Cannot attach to report: No active test info found. Logging to console instead.');
+                console.log(finalPrompt);
+            }
+        }
+    });
     return {
         getHeaders: () => __awaiter(void 0, void 0, void 0, function* () { return Array.from((yield _getMap()).keys()); }),
         getHeaderCell: (columnName) => __awaiter(void 0, void 0, void 0, function* () {
@@ -150,14 +146,11 @@ const useTable = (rootLocator, configOptions = {}) => {
         }),
         getByRow: (filters, options) => __awaiter(void 0, void 0, void 0, function* () {
             let row = yield _findRowLocator(filters, options);
-            // ✅ FIX: Sentinel Logic for negative assertions (expect(row).not.toBeVisible())
             if (!row) {
                 row = resolve(config.rowSelector, rootLocator).filter({ hasText: "___SENTINEL_ROW_NOT_FOUND___" + Date.now() });
             }
             const smartRow = _makeSmart(row, yield _getMap());
             if (options === null || options === void 0 ? void 0 : options.asJSON) {
-                // If row doesn't exist, toJSON() returns empty object or throws? 
-                // For safety, let's let it run naturally (it will likely return empty strings)
                 return smartRow.toJSON();
             }
             return smartRow;
@@ -165,11 +158,9 @@ const useTable = (rootLocator, configOptions = {}) => {
         getAllRows: (options) => __awaiter(void 0, void 0, void 0, function* () {
             const map = yield _getMap();
             let rowLocators = resolve(config.rowSelector, rootLocator);
-            // ✅ NEW: Apply filters if they exist
             if (options === null || options === void 0 ? void 0 : options.filter) {
                 rowLocators = _applyFilters(rowLocators, options.filter, map, options.exact || false);
             }
-            // Convert Locator to array of Locators
             const rows = yield rowLocators.all();
             const smartRows = rows.map(loc => _makeSmart(loc, map));
             if (options === null || options === void 0 ? void 0 : options.asJSON) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rickcedwhat/playwright-smart-table",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A smart table utility for Playwright with built-in pagination strategies that are fully extensible.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",