snap() not working? - captures whole page instead of web element [fixed]

[brandybaby]

Hi! I was hoping to use TagUI to automate generating of a .png image, as part of a small personal project. This is done through a website:

https://www.myfakeinfo.com/nationalidno/get-china-citizenidandphoto.

As I attempted to take a snapshot of the image generated, using t.snap('log1','front.png'), where 'log1' is the element id, ''front.png' is the intended saved image. However, this action takes a screenshot of the whole webpage, instead of just saving the image.

I was just wondering if this is your intended output, and could there be anyway I can use TagUI API to carry out saving image?

Thanks!

[kensoh]

Hi @brandybaby thanks for raising this!

The expected behaviour should be taking screenshot of the web element only and not the whole webpage. After checking, this looks like a bug in the upstream project TagUI. I'll raise an issue there and follow-up. It could be due to change in Chrome browser behaviour in newer versions or some other reasons. Which causes the screenshot to be entire webpage instead of only the element.

---

Minimum replication case - below works in TagUI normal mode but does not work in live mode.

https://google.com
snap //*[@name="q"] to q.png

[kensoh]

Fix implemented upstream, try doing t.setup() and see if it now works for you.

[kensoh]

Made a commit with below comments. pip install tagui --upgrade or new installations should now work. Commit will autosync delta files for new releases of TagUI for Python, even if there is an existing installation. Prior to this, users need to do t.setup() to force re-installation of TagUI.

#6 - on macOS with Python 3, there is no SSL certs support by default. adding an additional check to auto-install SSL certs. before this change, download() simply fails.

#7 - adding capability to autosync tagui delta files when new tagui for python releases are installed. this lets users immediately access current features when they do a pip install tagui --upgrade. before this change, t.setup() is needed for existing installations.

#7 - upstream fix implemented for snapshots of web elements on Chrome. fix improves performance and quality base on newer DevTools Protocol capabilities. the fix is accessible when users do a pip install tagui --upgrade. before this change, snap() captures screenshot of the whole webpage instead of only the element.

[kensoh]

Adding an observation that Chrome taking snapshots in this new way (capturing clipped region vs whole page and clip) momentarily show just the clipped area on the webpage, and showing blank on rest of page. After snapshot is done, it shows back the full webpage. This behaviour is a little unexpected.

Would think either not blanking rest of page, or blanking rest of page while retaining the clipped region, instead of bringing to top left of window. Looking forward to more data points from other users and perhaps other developers on this Chrome behaviour.

[brandybaby]

Thanks for your help Ken! Will be testing this out now and update if there are any further issues.

[brandybaby]

For my case, I found that the function snap() requires the full XPath. Tried the method of finding the exact location of my intended img src using XPath selector. The element_identifier I used is an XPath written in the form of id/name/class, and this worked for me!

[kensoh]

Thanks for updating back here that it works now!

Yes while the tool supports below as identifiers, XPath is my personal recommended method because it is very expressive (including using and / or) and can do what CSS selectors cannot.

For web automation, web element identifier can be XPath selector, CSS selector or the following attributes - id, name, class, title, aria-label, text(), href (in decreasing order of priority)

Usually I pick an explicit XPath so that my script can fail fast, rather than assuming that everything is fine and working, and caught by surprise later that something broken gone undetected.