Skip to content

Add end-to-end tests for vendor delivery time settings React #2770

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

Closed
Aunshon wants to merge 2 commits into from
Closed

Add end-to-end tests for vendor delivery time settings React #2770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
962532f
enhance: Add end-to-end tests for vendor delivery time settings React
Aunshon Jun 20, 2025
b410eae
Merge branch 'fix/playwright-now-run-e2e-default' into enhance/delive…
Aunshon Sep 8, 2025
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
96 changes: 96 additions & 0 deletions tests/pw/tests/e2e/deliverytime-react.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { test, Page, expect } from "@playwright/test";
import { data } from '@utils/testData';
import { VendorPage } from '@pages/vendorPage';

test.describe('Delivery time test', () => {
let vendor: VendorPage;
let aPage: Page;

test.beforeAll(async ({ browser }) => {
const vendorContext = await browser.newContext(data.auth.vendorAuth);

aPage = await vendorContext.newPage();
vendor = new VendorPage(aPage);
});

test.afterAll(async () => {
await aPage.close();
});

test('vendor can go to dashboard page and successfully found the heading', { tag: ['@pro', '@vendor'] }, async () => {
await vendor.goToVendorDashboard();
await aPage.getByRole('link', { name: ' Delivery Time' }).first().click();

// Wait for 5 seconds
await aPage.waitForTimeout( 3000 );
Comment on lines +24 to +25
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Replace hard-coded timeout with explicit wait.

Hard-coded timeouts make tests flaky and slower. Use explicit waits for better reliability.

-// Wait for 5 seconds
-await aPage.waitForTimeout( 3000 );
+// Wait for the delivery time page to load
+await aPage.waitForLoadState('networkidle');
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Wait for 5 seconds
await aPage.waitForTimeout( 3000 );
// Wait for the delivery time page to load
await aPage.waitForLoadState('networkidle');
🤖 Prompt for AI Agents 
In tests/pw/tests/e2e/deliverytime-react.spec.ts around lines 24 to 25, replace
the hard-coded waitForTimeout(3000) call with an explicit wait that targets a
specific element or condition relevant to the test. Identify a reliable selector
or state change to wait for using Playwright's waitForSelector or
waitForFunction methods to improve test stability and speed.


// Look for h3 inside dokan-header-title with text 'Delivery Time & Store Pickup'
const headerTitle = aPage.locator('.dokan-header-title h3:has-text("Delivery Time & Store Pickup")');
await expect(headerTitle).toBeVisible();

await aPage.locator('.css-1nxca15-UA').click();
await aPage.getByRole('option', { name: 'Delivery' }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
await aPage.locator('.css-1nxca15-UA').click();
await aPage.getByRole('option', { name: 'Store Pickup' }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
await aPage.locator('.css-1nxca15-UA').click();
await aPage.getByRole('option', { name: 'All Events' }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
Comment on lines +31 to +39
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Refactor repetitive dropdown interactions and avoid brittle CSS selectors.

The CSS class .css-1nxca15-UA appears to be auto-generated and could break easily. The repetitive dropdown interaction pattern should be extracted to a helper method.

-await aPage.locator('.css-1nxca15-UA').click();
-await aPage.getByRole('option', { name: 'Delivery' }).click();
-await aPage.getByRole('button', { name: 'Filter' }).click();
-await aPage.locator('.css-1nxca15-UA').click();
-await aPage.getByRole('option', { name: 'Store Pickup' }).click();
-await aPage.getByRole('button', { name: 'Filter' }).click();
-await aPage.locator('.css-1nxca15-UA').click();
-await aPage.getByRole('option', { name: 'All Events' }).click();
-await aPage.getByRole('button', { name: 'Filter' }).click();
+// Use a more stable selector and extract to helper method
+const selectDeliveryFilter = async (optionName: string) => {
+    await aPage.getByRole('combobox', { name: 'Event Type Filter' }).click();
+    await aPage.getByRole('option', { name: optionName }).click();
+    await aPage.getByRole('button', { name: 'Filter' }).click();
+};
+
+await selectDeliveryFilter('Delivery');
+await selectDeliveryFilter('Store Pickup');
+await selectDeliveryFilter('All Events');
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await aPage.locator('.css-1nxca15-UA').click();
await aPage.getByRole('option', { name: 'Delivery' }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
await aPage.locator('.css-1nxca15-UA').click();
await aPage.getByRole('option', { name: 'Store Pickup' }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
await aPage.locator('.css-1nxca15-UA').click();
await aPage.getByRole('option', { name: 'All Events' }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
// Use a more stable selector and extract to helper method
const selectDeliveryFilter = async (optionName: string) => {
await aPage.getByRole('combobox', { name: 'Event Type Filter' }).click();
await aPage.getByRole('option', { name: optionName }).click();
await aPage.getByRole('button', { name: 'Filter' }).click();
};
await selectDeliveryFilter('Delivery');
await selectDeliveryFilter('Store Pickup');
await selectDeliveryFilter('All Events');
🤖 Prompt for AI Agents 
In tests/pw/tests/e2e/deliverytime-react.spec.ts around lines 31 to 39, the code
repeatedly interacts with a dropdown using a brittle auto-generated CSS selector
'.css-1nxca15-UA'. Refactor by creating a helper function that accepts the
option name as a parameter, performs the dropdown click, selects the option by
role and name, and clicks the filter button. Replace the repetitive code with
calls to this helper, and avoid using the fragile CSS selector by finding a more
stable locator or passing it as part of the helper.

await aPage.getByRole('button', { name: 'week' }).click();
await aPage.getByRole('button', { name: 'day', exact: true }).click();
await aPage.getByRole('button', { name: 'list' }).click();
await aPage.getByRole('button', { name: 'month' }).click();
await aPage.getByRole('button', { name: 'Next month' }).click();
await aPage.getByRole('button', { name: 'Next month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'today' }).click();
Comment on lines +40 to +49
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add assertions for calendar view interactions.

The test interacts with multiple calendar controls but doesn't verify that the interactions actually work. Consider adding assertions to validate the UI state changes.

 await aPage.getByRole('button', { name: 'week' }).click();
+await expect(aPage.getByRole('button', { name: 'week' })).toHaveClass(/active|selected/);
+
 await aPage.getByRole('button', { name: 'day', exact: true }).click();
+await expect(aPage.getByRole('button', { name: 'day', exact: true })).toHaveClass(/active|selected/);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await aPage.getByRole('button', { name: 'week' }).click();
await aPage.getByRole('button', { name: 'day', exact: true }).click();
await aPage.getByRole('button', { name: 'list' }).click();
await aPage.getByRole('button', { name: 'month' }).click();
await aPage.getByRole('button', { name: 'Next month' }).click();
await aPage.getByRole('button', { name: 'Next month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'today' }).click();
await aPage.getByRole('button', { name: 'week' }).click();
await expect(aPage.getByRole('button', { name: 'week' })).toHaveClass(/active|selected/);
await aPage.getByRole('button', { name: 'day', exact: true }).click();
await expect(aPage.getByRole('button', { name: 'day', exact: true })).toHaveClass(/active|selected/);
await aPage.getByRole('button', { name: 'list' }).click();
await aPage.getByRole('button', { name: 'month' }).click();
await aPage.getByRole('button', { name: 'Next month' }).click();
await aPage.getByRole('button', { name: 'Next month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'Previous month' }).click();
await aPage.getByRole('button', { name: 'today' }).click();
🤖 Prompt for AI Agents 
In tests/pw/tests/e2e/deliverytime-react.spec.ts around lines 40 to 49, the test
clicks various calendar view buttons but lacks assertions to verify the UI state
changes. Add assertions after each interaction to confirm that the calendar view
updates as expected, such as checking for visible elements or active states
corresponding to the selected view or month.

});

test('vendor can go to delivery time settings and verify labels', { tag: ['@pro', '@vendor'] }, async () => {
await vendor.goIfNotThere(data.subUrls.frontend.vDashboard.settingsDeliveryTimeReact);

// Wait for the page to load
await aPage.waitForTimeout(3000);
Comment on lines +55 to +56
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Replace hard-coded timeout with explicit wait.

Another hard-coded timeout that should be replaced with proper wait conditions.

-// Wait for the page to load
-await aPage.waitForTimeout(3000);
+// Wait for the delivery time settings page to load
+await aPage.waitForSelector('.dokan-header-title h3');
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Wait for the page to load
await aPage.waitForTimeout(3000);
// Wait for the delivery time settings page to load
await aPage.waitForSelector('.dokan-header-title h3');
🤖 Prompt for AI Agents 
In tests/pw/tests/e2e/deliverytime-react.spec.ts around lines 55 to 56, replace
the hard-coded waitForTimeout(3000) with an explicit wait condition that waits
for a specific element or state indicating the page has loaded. Identify a
reliable selector or event that confirms the page readiness and use a
waitForSelector or similar Playwright method instead of a fixed timeout.


// Look for h3 inside dokan-header-title with text 'Delivery Time & Store Pickup'
const headerTitle = aPage.locator('.dokan-header-title h3:has-text("Delivery Time & Store Pickup")');
await expect(headerTitle).toBeVisible();

// Check for the presence of the specified labels
const deliverySupportLabel = aPage.locator('label:has-text("Delivery Support:")');
await expect(deliverySupportLabel).toBeVisible();

const deliveryBlockedBufferLabel = aPage.locator('label:has-text("Delivery blocked buffer :")');
await expect(deliveryBlockedBufferLabel).toBeVisible();

const timeSlotLabel = aPage.locator('label:has-text("Time slot :")');
await expect(timeSlotLabel).toBeVisible();

const orderPerSlotLabel = aPage.locator('label:has-text("Order per slot :")');
await expect(orderPerSlotLabel).toBeVisible();


await aPage.getByRole('checkbox', { name: 'Home Delivery' }).check();
await aPage.getByRole('checkbox', { name: 'Home Delivery' }).uncheck();
await aPage.getByRole('checkbox', { name: 'Store Pickup' }).check();
await aPage.getByRole('checkbox', { name: 'Store Pickup' }).uncheck();
await aPage.getByRole('spinbutton', { name: 'Delivery blocked buffer :' }).click();
await aPage.getByRole('spinbutton', { name: 'Delivery blocked buffer :' }).fill('10');
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).click();
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).press('ControlOrMeta+a');
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).fill('60');
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).click();
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).press('ControlOrMeta+a');
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).fill('1');
Comment on lines +76 to +87
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Improve form interaction reliability.

The form interactions could be more robust with proper waits and state verification.

 await aPage.getByRole('checkbox', { name: 'Home Delivery' }).check();
+await expect(aPage.getByRole('checkbox', { name: 'Home Delivery' })).toBeChecked();
+
 await aPage.getByRole('checkbox', { name: 'Home Delivery' }).uncheck();
+await expect(aPage.getByRole('checkbox', { name: 'Home Delivery' })).not.toBeChecked();
+
 await aPage.getByRole('checkbox', { name: 'Store Pickup' }).check();
+await expect(aPage.getByRole('checkbox', { name: 'Store Pickup' })).toBeChecked();
+
 await aPage.getByRole('checkbox', { name: 'Store Pickup' }).uncheck();
+await expect(aPage.getByRole('checkbox', { name: 'Store Pickup' })).not.toBeChecked();
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await aPage.getByRole('checkbox', { name: 'Home Delivery' }).check();
await aPage.getByRole('checkbox', { name: 'Home Delivery' }).uncheck();
await aPage.getByRole('checkbox', { name: 'Store Pickup' }).check();
await aPage.getByRole('checkbox', { name: 'Store Pickup' }).uncheck();
await aPage.getByRole('spinbutton', { name: 'Delivery blocked buffer :' }).click();
await aPage.getByRole('spinbutton', { name: 'Delivery blocked buffer :' }).fill('10');
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).click();
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).press('ControlOrMeta+a');
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).fill('60');
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).click();
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).press('ControlOrMeta+a');
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).fill('1');
await aPage.getByRole('checkbox', { name: 'Home Delivery' }).check();
await expect(aPage.getByRole('checkbox', { name: 'Home Delivery' })).toBeChecked();
await aPage.getByRole('checkbox', { name: 'Home Delivery' }).uncheck();
await expect(aPage.getByRole('checkbox', { name: 'Home Delivery' })).not.toBeChecked();
await aPage.getByRole('checkbox', { name: 'Store Pickup' }).check();
await expect(aPage.getByRole('checkbox', { name: 'Store Pickup' })).toBeChecked();
await aPage.getByRole('checkbox', { name: 'Store Pickup' }).uncheck();
await expect(aPage.getByRole('checkbox', { name: 'Store Pickup' })).not.toBeChecked();
await aPage.getByRole('spinbutton', { name: 'Delivery blocked buffer :' }).click();
await aPage.getByRole('spinbutton', { name: 'Delivery blocked buffer :' }).fill('10');
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).click();
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).press('ControlOrMeta+a');
await aPage.getByRole('spinbutton', { name: 'Time slot :' }).fill('60');
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).click();
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).press('ControlOrMeta+a');
await aPage.getByRole('spinbutton', { name: 'Order per slot :' }).fill('1');
🤖 Prompt for AI Agents 
In tests/pw/tests/e2e/deliverytime-react.spec.ts around lines 76 to 87, the form
interactions lack waits and state verification, which can cause flakiness. Add
explicit waits for elements to be visible and enabled before interacting, and
verify the state after each action (e.g., check that checkboxes are actually
checked or unchecked). Use appropriate Playwright waitFor methods to ensure
elements are ready for interaction to improve test reliability.


await aPage.getByRole('button', { name: 'Save Changes' }).click();

await aPage.waitForTimeout(100);
const successMessage = aPage.locator('p:has-text("Delivery settings has been saved successfully!")');
await expect(successMessage).toBeVisible();
Comment on lines +91 to +93
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

Replace minimal timeout with proper wait condition.

The 100ms timeout before checking the success message is too short and unreliable.

-await aPage.waitForTimeout(100);
-const successMessage = aPage.locator('p:has-text("Delivery settings has been saved successfully!")');
-await expect(successMessage).toBeVisible();
+// Wait for the success message to appear after save
+const successMessage = aPage.locator('p:has-text("Delivery settings has been saved successfully!")');
+await expect(successMessage).toBeVisible({ timeout: 10000 });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await aPage.waitForTimeout(100);
const successMessage = aPage.locator('p:has-text("Delivery settings has been saved successfully!")');
await expect(successMessage).toBeVisible();
// Wait for the success message to appear after save
const successMessage = aPage.locator('p:has-text("Delivery settings has been saved successfully!")');
await expect(successMessage).toBeVisible({ timeout: 10000 });
🤖 Prompt for AI Agents 
In tests/pw/tests/e2e/deliverytime-react.spec.ts around lines 91 to 93, replace
the fixed 100ms waitForTimeout with a proper wait condition that waits for the
success message locator to be visible or attached. Remove the arbitrary timeout
and instead use Playwright's built-in waiting mechanisms like waitFor or expect
with toBeVisible to ensure the success message is reliably detected before
proceeding.

});

});
1 change: 1 addition & 0 deletions tests/pw/utils/testData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1229,6 +1229,7 @@ export const data = {

settingsVerification: 'dashboard/settings/verification',
settingsDeliveryTime: 'dashboard/settings/delivery-time',
settingsDeliveryTimeReact: 'dashboard/new/#settings/delivery-time',
settingsShipping: 'dashboard/settings/shipping',
settingsShipStation: 'dashboard/settings/shipstation',
settingsSocialProfile: 'dashboard/settings/social',
Expand Down
Loading