Skip to content

Added support for responsive snapshot capture #127

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

Merged
merged 11 commits into from
Sep 30, 2024

Conversation

chinmay-browserstack
Copy link
Contributor

@chinmay-browserstack chinmay-browserstack commented Sep 22, 2024

  • Added option for responsiveSnapshotCapture. when this option is passed as true, we will capture dom in all widths returned by CLI.
  • resize browser window using set_window_size for selenium 3 or non chrome browsers else using cdp to resize window. reason: in chrome we can only resize window upto 500px so to bypass this we are using cdp but running cdp command in selenium 3 is not supported.
  • collect cookies using selenium driver.
  • Send logs to cli via /percy/log endpoint

try:
# Inject the DOM serialization script
driver.execute_script(fetch_percy_dom())
cookies = driver.get_cookies()
user_agent = driver.execute_script("return navigator.userAgent;")
Copy link
Contributor

Choose a reason for hiding this comment

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

better to make this change as part of dom package so that we dont have to do it in all sdks + wont need another selenium call

Copy link
Contributor

Choose a reason for hiding this comment

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

Update CLI.

@@ -18,6 +19,14 @@

# for logging
LABEL = '[\u001b[35m' + ('percy:python' if PERCY_DEBUG else 'percy') + '\u001b[39m]'
CDP_SUPPORT_SELENIUM = (str(SELENIUM_VERSION)[0].isdigit() and int(
str(SELENIUM_VERSION)[0]) >= 4) if SELENIUM_VERSION else False
fetched_widths = {}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
fetched_widths = {}
eligible_widths = {}

Comment on lines 87 to 92
widths = kwargs.get('widths') or []
if 'width' in kwargs:
widths = [kwargs.get('width')]

# cache doesn't work when parameter is a list so passing tuple
widths = get_widths_for_multi_dom(tuple(widths))
Copy link
Contributor

Choose a reason for hiding this comment

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

refactor this handle widths completely. Idea is to have all the variables declared in single line at the start of functions.


for width in widths:
change_window_dimension(driver, width, current_height)
sleep(1)
Copy link
Contributor

Choose a reason for hiding this comment

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

eh doesn't it mean we are slowing it by 1 sec. Use wait of selenium to ensure that command is over. Also command is sync in nature by default.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

page is already loaded so can't rely on page load / element visible event. i am adding wait so any change in DOM due to JS with take place. are you talking about selenium implicit wait?


# Post the DOM to the snapshot endpoint with snapshot options and other info
response = requests.post(f'{PERCY_CLI_API}/percy/snapshot', json={**kwargs, **{
'client_info': CLIENT_INFO,
'environment_info': ENV_INFO,
'environment_info': ENV_INFO + [user_agent],
Copy link
Contributor

Choose a reason for hiding this comment

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

This will change FE info as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

removed and added log line in cli instead

Copy link
Contributor

Choose a reason for hiding this comment

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

We dont need this for log line - we need to add implicit requestHeader using this in long term

Copy link
Contributor Author

Choose a reason for hiding this comment

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

so should we send this as separate field in API? this will need api change as well.

try:
# Inject the DOM serialization script
driver.execute_script(fetch_percy_dom())
cookies = driver.get_cookies()
Copy link
Contributor

@Amit3200 Amit3200 Sep 23, 2024

Choose a reason for hiding this comment

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

This will be a list of dictionaries and browser expects it in different format we need to add them in proper format. We would need to handle it in CLI otherwise.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is also correct format here it return { 'name': '', 'value': ''} in this format and our cli works well with it.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thats not the current format of the cookies in CLI though. once that are coming from document.cookies

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Since this check will not become true so cookies are in correct format only as we need to pass in cdp

@chinmay-browserstack chinmay-browserstack merged commit 42e056f into master Sep 30, 2024
7 checks passed
@chinmay-browserstack chinmay-browserstack deleted the responsive_snapshot_capture_support branch September 30, 2024 14:17
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