Skip to content
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.

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

Adding waitForTimeout/waitForSelector for assets discovery browser when JS is enabled #1715

Merged
merged 1 commit into from
Sep 16, 2024

Conversation

amandeepsingh333
Copy link
Contributor

@amandeepsingh333 amandeepsingh333 commented Sep 10, 2024

  • added waitForTimeout and waitForSelector at the time of discovery when JS is enabled

so now waitForTimeout and waitForSelector are at 2 places:

  • snapshot level (snapshot.waitForTimeout)
  • discovery level (snapshot.discovery.waitForTimeout)

usage of both:

when it is passed at snapshot level =>
these options are used before a DOM snapshot is taken. The primary goal is to ensure that the page has fully loaded and any necessary DOM elements are present before capturing the state of the page. This mode is currently only supported when used with percy snapshot cli command.

when it is passed at discovery level and JS is enabled => in this phase, these options are used to wait for specific assets or network requests to be discovered and captured. The asset-discovery process often occurs during or after initial page load, and some resources may not be immediately available.

how client should use:

snapshot level => You should use these options at the snapshot level when you want to ensure the readiness of a page before it is captured. This ensures that no partial or incomplete content is included in the snapshot.

discovery level => You should use these options in the discovery level when you are facing issues with missing assets or incomplete network requests. By waiting for the selector or a set timeout, you give enough time for assets to load

  • used both at the time of discovery
  • added test cases for the same

@this-is-shivamsingh
Copy link
Contributor

  1. Please Update the PR description and PR title as well

@amandeepsingh333 amandeepsingh333 changed the title added config for waitForTimeout and waitForSelector Adding waitForTimeout/waitForSelector for assets discovery browser for JS enabled Snapshots Sep 11, 2024
@amandeepsingh333 amandeepsingh333 changed the title Adding waitForTimeout/waitForSelector for assets discovery browser for JS enabled Snapshots Adding waitForTimeout/waitForSelector for assets discovery browser when JS is enabled Sep 11, 2024
packages/core/src/discovery.js Outdated Show resolved Hide resolved
packages/core/src/discovery.js Outdated Show resolved Hide resolved
packages/core/test/discovery.test.js Outdated Show resolved Hide resolved
@amandeepsingh333 amandeepsingh333 force-pushed the PPLT_3191_config_changes branch 2 times, most recently from d21f946 to 7c530ec Compare September 12, 2024 09:00
@amandeepsingh333 amandeepsingh333 changed the title Adding waitForTimeout/waitForSelector for assets discovery browser when JS is enabled using waitForTimeout/waitForSelector for assets discovery browser when JS is enabled Sep 12, 2024
@this-is-shivamsingh
Copy link
Contributor

this-is-shivamsingh commented Sep 12, 2024

  • Test with any sdk, if it working [ means if you are getting the value passed from the sdk -> CLI ]
  • Add 1 more test where we also send domSnapshot with percy.snapshot because this cover the SDK flow as well, as in sdk flow we send domSnapshot

@amandeepsingh333 amandeepsingh333 changed the title using waitForTimeout/waitForSelector for assets discovery browser when JS is enabled Adding waitForTimeout/waitForSelector for assets discovery browser when JS is enabled Sep 12, 2024
@amandeepsingh333 amandeepsingh333 force-pushed the PPLT_3191_config_changes branch 3 times, most recently from aca9bea to a2c68fc Compare September 13, 2024 06:52
Comment on lines 2498 to 2506
it('waitForSelectorInsideBrowser should work', async () => {
const page = await percy.browser.page();
spyOn(page, 'eval').and.callThrough();
waitForSelectorInsideBrowser(page, 'body', 30000);

await percy.idle();

expect(page.eval).toHaveBeenCalledWith('await waitForSelector("body", 30000)');
});
Copy link
Contributor

Choose a reason for hiding this comment

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

Move this test inside utils.test.js, as you are directly testing a function of utils.js

'[percy:core:discovery] Wait for 100ms timeout'
]));
});
it('waitForTimeout and waitForSelector are not called Js is disabled and domSnapshot is not present', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

describe('when JS is enabled')
it('calls page.eval when selector is given')

  • Check if page.eval is called for selector

describe('when JS is disabled')
it('not calls page.eval')

Copy link
Contributor

Choose a reason for hiding this comment

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

Rest everything looks fine to me

Copy link
Contributor

@this-is-shivamsingh this-is-shivamsingh left a comment

Choose a reason for hiding this comment

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

Lgtm 🌮 , Just update the tests please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants