Im trying to interact with a js rendered page. Essentially this is a free widget from tradingview; however, the color of the lines is not something I can change. (yes there is an override, however, it only affects 1 line) I need to be able to change 2 lines.
Trading View Advanced Chart Widget Constructor
Can anyone tell me if this is possible with a puppeteer? How can I get XPath for an element which is generated by JS? View source and developer tools do not provide any xpaths to the elements.
Related
This question already has an answer here:
Karate UI button click support
(1 answer)
Closed 2 years ago.
I am quite new to Karate UI automation and I have a front end UI that has a SVG element which when clicked brings a drop down.
When I am writing the UI test for it, I get javascript evaluation error and hence seek some advice/help.
Here are the screenshots of the UI element and its CSS locator clearly seen on the screen
This is how the CSS locator shows up for the SVG element
This uniquely identifies the SVG element(the plus button)
svg[class='svg-inline--fa fa-plus-square fa-w-14 ']
This is the part of code that I have written to click it
And click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']")
And here is the error I get:
javascript evaluation failed: click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']"), js eval failed twice:document.querySelector("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']").click(), error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'click' of null\n at <anonymous>:1:78","objectId":"{\"injectedScriptId\":2,\"id\":3}"}
I tried various things that can uniquely identify the SVG element like using the compelete Xpath and also using the parent class name(though it was already unique with just the class name) but it still did not work. I tried wildcard locators as well but since there is no text/name of the element, it did not work. When the tags are say input or button etc the same way of css locator works but SVG ones did not for me.
tagname[unique_id of the element like key=value pair]
I am wondering if we need to use a different way to identify SVG elements using Karate UI? The same path when used in Selenium worked.
Since this is a UI that requires VPN connection and secure acccess, it may not be possible to provide a minimum code to try and replicate it. But am happy to provide more details if needed.
I have many such SVG elements on my UI and any help in this would be greatly appreciated.
Use selector hub as an extension to chrome, firefox, edge and opera. Ive only used with chrome and it worked fine and allowed me to quickly and easily find svg relative / absolute xpath. This worked no problems in a find and click capacity on numerous svg elements (via karate script)
2 suggestions.
Try to get some nearby element and work backwards: https://stackoverflow.com/a/63988977/143475
Figure out the location of the SVG and fire a mouse-click: https://stackoverflow.com/a/63828083/143475
Unable to give you specifics without a way to replicate, but - it should be possible to find a "pattern" so you can write a custom function as described in the docs. So that can be your goal, something like this:
* svgClick('svg-inline--fa')
I'm trying to create a CSS documentation library in Orchard. I want to save a description, CSS snippet and HTML snippet against each content type. The first view would show the description and CSS and HTML code written out. The second view would show a preview of what the CSS and HTML look like rendered.
cssdocumentation.com/content/item1
cssdocumentation.com/content/item1/live-preview
I've created the content type and the first view. But I'm not sure how to create the second view. I can see if I can create the alternative URL I can use the Url Alternates module to create an overriding .cshtml
To create an alternative URL I've looked at the autoroute module but this only allows you to adapt a single URL (unless I'm missing something?) and I've looked at Alias UI but this forces me to manually create an alternative URL everytime I create a content item.
Is this possible in Orchard without writting too much C#? (I'm a frontend developer so I only dabble in the behind the scenes stuff)
Thanks for any help
Best solution is to do this within your own module. But as a secondary option instead of having a second page, combine this content with your first page and hide it with CSS. When the user clicks a button to navigate to the next step render the CSS/HTML result on the same page. You can do this in many ways, here are a few ideas:
Render the CSS/HTML result out straight away on the same page but hide it. Show it when the user clicks a button
using jQuery to render the result on the client side. More dynamic if you allow editing of the HTML and CSS.
Redirecting the user to the same page with specific url parameters which you can pick up in your alternate to modify the output.
Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...
From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").
The default pagination in drupal is great, but the text links are used
<<first <previous 6 7 next> last>>
But I need to use forward and backward image buttons instead of text links. Can anyone point me in the right direction?
Depending on what portions of the pager you're interested in replacing with images, you may be able to use CSS background images, without having to override the theme function. However, in the default pager output, not all the links may have unique classes.
That said, if you're using Drupal's default pager, you can override the theme_pager function to add your image links.
If you're using the Views module, you may be using a different theming function. When in doubt, you should be able to use the Theme Developer module to find which function or template file is outputting the part of the page you're interested in theming. Theme Developer will also tell you what suggestions you can use to override the output.
I would like to dump all css key/value pairs for an html tag.
In particular, I would like to learn the css properties for <audio> tag, so I can try to customize the look.
document.getElementById('myaudio').style returns a CSSStyleDeclaration object but length returns 0 and I cannot figure out to iterate over the key/value pairs.
Thank you
Try Firebug for firefox. It allows you to view the CSS and properties of any element on a webpage and allows in-page editing so you can customise it on the fly until you are happy without having to create hard and fast changes
You can't iterate over the keys in the style object. It's simply impossible.
The best answer is what Chris said. Use Firebug in Firefox, or similar tools in the other browsers, which can do the work for you and tell you exactly what CSS properties apply to the element.
(Make sure that you tell the tool to show you "user agent styles", not just styles you've added, so you can see what styles the browser applies automatically.)