Does anyone know if there's a way to use NodeJs to drive Browserstack and capture a screenshot of a specific element on the page?
Thanks!
You can do it using PhantomJS.
Screenshot the entire page:
Phantomjs - take screenshot of a web page
Screenshot cropped to the dimensions of a specific element:
Crop screenshot to element in PhantomJS
More PhantomJS examples: https://github.com/ariya/phantomjs/wiki/Examples
The below given links give a sample to capture screenshot of an element using php. You can use it as a reference to write code in Node. If you face any problem, please feel free to ask.
https://github.com/facebook/php-webdriver/wiki/Taking-Full-Screenshot-and-of-an-Element
Exactly what you are looking for:
https://github.com/firstandthird/stackshots
Related
Very basic question but I can't figure it out.
How do I test for the existence of a piece of text on a page?
e.g. does the word "mouse" exist on this page? I'm using playwright and node.js
Thanks!
You can do that via page.waitForSelector(). Example:
await page.waitForSelector('text=mouse')
See on playwright.dev for the full documentation and how you can use the text selectors in other scenarios.
I'm trying to get a HTML that is not the page_source, I need the one that is generated when you open the page.
I have seen and tried all the solutions I could find but nothing really works.
I do not need any code since I do not know how to do it. I have tried with page_source but I need the inspect element HTML.
Could someone explain a good example with this?
From Get current HTML of rendered page using Selenium I suggest you using
self.driver.find_element_by_xpath("//html").get_attribute('outerHTML')
I have been trying to automate my work and we use service-now for our requests. However, for the the life of me I can not get Selenium to run properly on the service-now website. It works on the login page before entering, but no matter what form of locater or x path I use it will not work. The website is dynamic so I am pretty sure xpath is needed.
I have tried directly from Google Chrome inspect as well as other xpath possibilities:
//*[#id="row_sc_request.sc_task.request_65091fb5db8163c4bc8f18df4b961921"]/td[3]/a
xpath=//a[starts-with(text(),'Open record: SCTA')]
xpath=//a[class="linked formlink" and starts-with(#aria-label='Open record: SCTA')]
This is the element copied from chrome
<a class="linked formlink" aria-label="Open record: SCTASK0067185" href="sc\\\_task.do?sys\\\_id=65091fb5db8163c4bc8f18df4b961921\\\&sysparm\\\_record\\\_target=sc\\\_task\\\&sysparm\\\_record\\\_row=1\\\&sysparm\\\_record\\\_rows=1\\\&sysparm\\\_record\\\_list=request%3D9509dbb5db8163c4bc8f18df4b96199f%5EORDERBYDESCnumber">SCTASK0067185</a>
Can someone please review my code? Any help would be appreciated!
I will suggest going with absolute XPath, I guess below note can help
Note:- if you copy XPath from Firefox it will mostly give you absolute XPath whereas chrome on another side will give relative
or the other way is to make an XPath using another stable element in the DOM tree
I hope this workout for yours. if you can share a link or inspect element snapshot showing Full DOM I can help you even better. Thanks :-)
There is a syntax error in the second xpath, this one - xpath=//a[class="linked formlink" and starts-with(aria-label='SCTA')].
In xpath the attributes must be prefixed with the "#" char; and starts-with() takes two arguments, not a boolean. So it must be:
xpath=//a[#class="linked formlink" and starts-with(#aria-label, "SCTA" )]
I don't know for sure will that make it match (it should, based on the sample), but will get you closer.
Thank you for all your answers. It turns out all I needed to do was switch the IFrame.
I am fairly new to this so I had no idea.
In my situatuion, I had to write:
"browser.switch_to.frame(browser.find_element_by_name('gsft_main'))"
where gsft_main is the name of the frame.
After doing this, then I was able to use:
browser.find_element_by_xpath("//a[#class='linked formlink' and starts-with(#aria-label, 'Open record: SCTA' )]")
and it worked out.
A solution might be to switch from an absolute xpath (the one that you find in the browser's developer tools: Copy->Copy XPath) to a relative one. For that you can install an extension like SelectorsHub and look for 'Rel XPath'
In one particular example I discovered that the absolute xpath simply did not work.
I have been working with Vaadin charts during this week and I found a problem that I cannot solve. I need to send several charts to a PDF generation (using iTextpdf) and I could do it using SVGGenerator. The main problem is I cannot use this solution because the final laptop doesn't allow any installation, and Phantomjs is required for SVG Generator (no add-on can be installed neither). I tried to find a different solution to convert the chart content into file or buffer that I can manage, but I think I have been reading so much posts and I am not able to distinguish the solution.
So, I will try to clarify basic questions first:
a) Is it possible to manage SVG Generator without any installation in the laptop?
b) If not, is there a different way to convert a chart into an object which class could be managed to insert it into a PDF?
I can assure you I tried to read all documentation in this forum and official Vaadin forum related to this topic but I couldn't find any solution. I don't want to seem lazy, I only want to avoid spending more time and clarify the maining pre-conditions to solve this issue.
thanks in advance for your time and help.
Kind regards,
David.
You can take a screenshot of your chart and append it to pdf:
Screenshot screenshot = new Screenshot();
screenshot.setTargetComponent(myTargetComponent);
myChartLayout.addComponent(screenshot);
//when complete
screenshot.addScreenshotListener(new ScreenshotListener() {
public void screenshotComplete(ScreenshotImage image) {
//do something
}
});
//take screenshot
screenshot.takeScreenshot();
You will not be able to render a Vaadin Chart without a web browser engine of some kind. That's what PhantomJS provides. If you have a full-blown web browser at your disposal, though, you can grab the SVG markup manually from there; it's just a bit more difficult to automate. This works in Chrome:
Open your Charts app in the browser
Open the JavaScript console (Ctrl/Cmd + Shift + J)
Type something like this: copy(document.getElementsByTagName('svg')[0].outerHTML)
Paste the contents of your clipboard to a new text file and save it as an SVG.
You don't need to install phantomjs, just bundle its binary along with your web application (Reference). I did the same thing with my Amazon AWS deployment and it works just fine.
Im trying to use this image with Raphael:
http://upload.wikimedia.org/wikipedia/commons/9/9f/Argentina_Buenos_Aires_City_location_map.svg
I convert it to js with: http://toki-woki.net/p/SVG2RaphaelJS/
And I get this:
Any Idea of what can I do to solve this? This is worst apparently when I add text in inkscape above each reagion to change later via javascript.
Im using SVGWEB now without problems buy Im trying another alternatives because I cannot make the addeventlistener work in IE7/8 like I said here:
can't add listener to a SVG in Internet Explorer using SVGweb
Any ideas?
Thanks!
Try mapSVG plugin instead.
Demo with your map: http://map.karaliki.ru/bu.html (zoom in-out with mouse wheel)
It works in IE7-8 as well.
Plugin's description: http://map.karaliki.ru