Skip to content

feat: add auto pagination detection #904

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

Merged
merged 1 commit into from
Nov 30, 2025
Merged

feat: add auto pagination detection #904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
91 changes: 87 additions & 4 deletions src/components/browser/BrowserWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1242,6 +1242,29 @@ export const BrowserWindow = () => {
}
}, [browserSteps, getList, listSelector, initialAutoFieldIds, currentListActionId, manuallyAddedFieldIds]);

useEffect(() => {
if (currentListActionId && browserSteps.length > 0) {
const activeStep = browserSteps.find(
s => s.type === 'list' && s.actionId === currentListActionId
) as ListStep | undefined;

if (activeStep) {
if (currentListId !== activeStep.id) {
setCurrentListId(activeStep.id);
}
if (listSelector !== activeStep.listSelector) {
setListSelector(activeStep.listSelector);
}
if (JSON.stringify(fields) !== JSON.stringify(activeStep.fields)) {
setFields(activeStep.fields);
}
if (activeStep.pagination?.selector && paginationSelector !== activeStep.pagination.selector) {
setPaginationSelector(activeStep.pagination.selector);
}
}
}
}, [currentListActionId, browserSteps, currentListId, listSelector, fields, paginationSelector]);

useEffect(() => {
if (!isDOMMode) {
capturedElementHighlighter.clearHighlights();
Expand Down Expand Up @@ -1637,6 +1660,22 @@ export const BrowserWindow = () => {
paginationType !== "scrollUp" &&
paginationType !== "none"
) {
let targetListId = currentListId;
let targetFields = fields;

if ((!targetListId || targetListId === 0) && currentListActionId) {
const activeStep = browserSteps.find(
s => s.type === 'list' && s.actionId === currentListActionId
) as ListStep | undefined;

if (activeStep) {
targetListId = activeStep.id;
if (Object.keys(targetFields).length === 0 && Object.keys(activeStep.fields).length > 0) {
targetFields = activeStep.fields;
}
}
}

setPaginationSelector(highlighterData.selector);
notify(
`info`,
Expand All @@ -1646,8 +1685,8 @@ export const BrowserWindow = () => {
);
addListStep(
listSelector!,
fields,
currentListId || 0,
targetFields,
targetListId || 0,
currentListActionId || `list-${crypto.randomUUID()}`,
{
type: paginationType,
Expand Down Expand Up @@ -1812,6 +1851,8 @@ export const BrowserWindow = () => {
socket,
t,
paginationSelector,
highlighterData,
browserSteps
]
);

Expand Down Expand Up @@ -1864,6 +1905,22 @@ export const BrowserWindow = () => {
paginationType !== "scrollUp" &&
paginationType !== "none"
) {
let targetListId = currentListId;
let targetFields = fields;

if ((!targetListId || targetListId === 0) && currentListActionId) {
const activeStep = browserSteps.find(
s => s.type === 'list' && s.actionId === currentListActionId
) as ListStep | undefined;

if (activeStep) {
targetListId = activeStep.id;
if (Object.keys(targetFields).length === 0 && Object.keys(activeStep.fields).length > 0) {
targetFields = activeStep.fields;
}
}
}

setPaginationSelector(highlighterData.selector);
notify(
`info`,
Expand All @@ -1873,8 +1930,8 @@ export const BrowserWindow = () => {
);
addListStep(
listSelector!,
fields,
currentListId || 0,
targetFields,
targetListId || 0,
currentListActionId || `list-${crypto.randomUUID()}`,
{ type: paginationType, selector: highlighterData.selector, isShadow: highlighterData.isShadow },
undefined,
Expand Down Expand Up @@ -2046,6 +2103,31 @@ export const BrowserWindow = () => {
}
}, [paginationMode, resetPaginationSelector]);

useEffect(() => {
if (paginationMode && currentListActionId) {
const currentListStep = browserSteps.find(
step => step.type === 'list' && step.actionId === currentListActionId
) as (ListStep & { type: 'list' }) | undefined;

const currentSelector = currentListStep?.pagination?.selector;
const currentType = currentListStep?.pagination?.type;

if (['clickNext', 'clickLoadMore'].includes(paginationType)) {
if (!currentSelector || (currentType && currentType !== paginationType)) {
setPaginationSelector('');
}
}

const stepSelector = currentListStep?.pagination?.selector;

if (stepSelector && !paginationSelector) {
setPaginationSelector(stepSelector);
} else if (!stepSelector && paginationSelector) {
setPaginationSelector('');
}
}
}, [browserSteps, paginationMode, currentListActionId, paginationSelector]);

return (
<div
onClick={handleClick}
Expand Down Expand Up @@ -2310,6 +2392,7 @@ export const BrowserWindow = () => {
listSelector={listSelector}
cachedChildSelectors={cachedChildSelectors}
paginationMode={paginationMode}
paginationSelector={paginationSelector}
paginationType={paginationType}
limitMode={limitMode}
isCachingChildSelectors={isCachingChildSelectors}
Expand Down
9 changes: 9 additions & 0 deletions src/components/recorder/DOMBrowserRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ interface RRWebDOMBrowserRendererProps {
listSelector?: string | null;
cachedChildSelectors?: string[];
paginationMode?: boolean;
paginationSelector?: string;
paginationType?: string;
limitMode?: boolean;
Comment on lines +103 to 105
Copy link

@coderabbitai coderabbitai bot Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Include paginationSelector in handleDOMHighlighting dependencies

The new paginationSelector prop and the extra guard in the list highlighting logic look consistent with the browser window behaviour (suppress highlighting once a pagination element is chosen). However, handleDOMHighlighting now reads paginationSelector but the useCallback dependency array does not include it (Lines 334–343).

That means updates to paginationSelector won’t be reflected in the callback, and shouldHighlight may be computed using a stale selector value.

Consider updating the deps as follows:

-  }, [
-      getText,
-      getList,
-      listSelector,
-      paginationMode,
-      cachedChildSelectors,
-      paginationType,
-      limitMode,
-      onHighlight,
-    ]
+  }, [
+      getText,
+      getList,
+      listSelector,
+      paginationMode,
+      cachedChildSelectors,
+      paginationType,
+      paginationSelector,
+      limitMode,
+      onHighlight,
+    ]

Also applies to: 157-159, 262-269, 334-343

🤖 Prompt for AI Agents 
In src/components/recorder/DOMBrowserRenderer.tsx around lines 103 and
specifically at the useCallback definitions near lines 157-159, 262-269, and
334-343, the new paginationSelector prop is read inside handleDOMHighlighting
(and related callbacks) but not included in their dependency arrays; update each
callback's dependency array to include paginationSelector so the callbacks
capture the latest selector value and avoid stale shouldHighlight calculations,
and run tests / lint to ensure no other missing deps remain.

isCachingChildSelectors?: boolean;
Expand Down Expand Up @@ -153,6 +154,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
listSelector = null,
cachedChildSelectors = [],
paginationMode = false,
paginationSelector = "",
paginationType = "",
limitMode = false,
isCachingChildSelectors = false,
Expand Down Expand Up @@ -257,6 +259,13 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
else if (listSelector) {
if (limitMode) {
shouldHighlight = false;
} else if (
paginationMode &&
paginationSelector &&
paginationType !== "" &&
!["none", "scrollDown", "scrollUp"].includes(paginationType)
) {
shouldHighlight = false;
} else if (
paginationMode &&
paginationType !== "" &&
Expand Down
Loading