Given the following html:
<a class="foo">
<a class="foo" href="somePonderousJSIDontWantToQuoteInMyTests">
One can select the later from the former using $("a.foo", href: ~/.*/).
Is there a more elegant way of selecting an element, based on whether or not it has a certain attribute?
Thanks!
I don't know if using a CSS3 attribute matcher is more elegant but it's definitelly quicker especialy if your selector would return many elements without the filter because the filtering happens in the browser and not in the jvm as in your approach:
$("a.foo[href]")
Related
I don't want to use xpath on the elements below.
element :img_login, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[1]/img'
element :msg_login_senha_invalidos, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[2]/div/p'
They are on the page as follows:
element img_login
<div class="sc-jRQAMF eRnhep">
<img src="https://quasar-flash-staging.herokuapp.com/assets/login/flashLogo-3a77796fc2a3316fe0945c6faf248b57a2545077fac44301de3ec3d8c30eba3f.png" alt="Quasar Flash">
</div>
element msg_login_senha_invalidos
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled">Login e/ou senha inválidos</p>
You have asked multiple questions about converting from using XPath to some other type of selector when using Site-Prism. StackOverflow is meant to be a place to come, learn, and improve your skills - not just to get someone else to do your work. It really seems you'd be better off reading up on CSS and how it can be used to select elements. Also note that there's nothing specifically wrong with using XPath, per se, it's just the way people new to testing and selecting elements on a page tend to use it (just copying a fully specified selector from their browser) that leads to having selectors that are way too specific and therefore brittle. A good site for you to learn about the different general CSS selector options available is https://flukeout.github.io/ - and you can look at the built-in selector types provided by Capybara at https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector.rb#L18
In your current case the below may work, but with the HTML you have provided all that's possible to say is that they will match the elements shown however they may also match other elements which will give you ambiguous element errors.
element :img_login, :css, 'img[alt="Quasar Flash"]' # CSS attribute selector
element :msg_login_senha_invalidos, :css, 'p.Mui-error', text: 'Login e/ou senha inválidos' # CSS class selector combined with Capybara text filter
I have below HTML sample code:
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
Here, i need to define CSS for the 1st href element and want to ignore 2nd element which has this class "reMode_selected". How to define css for the 1st element by ignoring 2nd element???
I don't want to use Xpath and I am looking for like this below CSS selector:
element :fld_link, "[title='Design'] [class !='reMode_selected']"
This format doesn't work in SitePrism Cucumber. Need Help on how to exclude a attribute name in CSS selector...
You can do this with cssSelector
driver.find_element(:css,".reMode_design:not(.reMode_selected)")
You can do with this css locator a[title='Design']:not([class*='reMode_selected'])
Have you tried using an xpath to locate the element? Perhaps something like: //a[contains(#title, 'Design') and not(contains(#class, 'reMode_selected'))]
References/Examples:
Using not in xpath
Using and in xpath
You can use the not: css prefix as others have mentioned or you could combine a capybara query to return the element based off it's text, or use a waiter.
SitePrism is quite advanced, so pretty much all options are open to you
I am trying to write an xpath expression that selects all div tags that have an attribute id that start with CompanyCalendar. Below is a snippet of the HTML that I am looking at:
<td class="some class" align="center" onclick="Calendar_DayClicked(this,'EventCont','Event');">
<span class="Text"></span>
<div id="CompanyCalendar02.21" class="Pop CalendarClick" style="right: 200px; top: 235px;"></div>
There are multiple divs that have an id like CompanyCalendar02.21 but for each new month in the calendar, they change the id. For example, the next month would be CompanyCalendar02.22. I would like to be able to select all of the divs that are equal to CompanyCalendar*
I am rather new at this so I was using some example off the net to try and get my xpath expression to work but to no avail. Any help would be greatly appreciated.
I am trying to write an xpath expression that selects all div tags that have an attribute id that start with CompanyCalendar.
The following expression is perhaps what you are looking for:
//div[starts-with(#id,'CompanyCalendar')]
What it does, in plain English, is
Return all div elements in the XML document that have an attribute id whose attribute value starts with "CompanyCalendar".
While checking in Browser console with the $x() call, it worked only after flipping the quotes - i.e. double quotes inside the Xpath starts-with() call.
$x('//div[starts-with(#id,"CompanyCalendar")]')
Folks,
I have an image with the following HTML code:
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: right;" id="ext-gen1453">
<img alt=""src="data:image/gif;base64,FRFRFR/GFFFFFFFFFF==" class="x-action-col-icon x-action-col-0 folder-action-add folder-action" data-qtip="Add New Music File" id="ext-gen1300">
When I click on the image it should open a pop up so that I can add new music file, I tried a few things but I am not able to click on that image. Any suggestions?
Thanks a lot
You can click on it by the class or a partial match of the class.
#browser.image(:class=>/folder-action-add folder-action/).click
Here is a list of the identifiers you can use for watir, I think it's mostly the same for watir-webdriver.
So far, you haven't got a consistent way of actually identifying the element. From what you've said in the comments, you've tried the 'text' attribute which doesn't exist, and the 'id' attribute which is auto generated and different every time.
You need to find a way of consistently identifying the element. It's usually preferable to use a semantic class on the element to make styling and testing easier and less brittle. You have a few classes declared, perhaps 'folder-action-add' expresses the intent of the button clearly? If not, you could add one such as 'add-music-file'.
Then you should be able to use watir to select an element by it's class, I'm not familiar with the syntax but at a guess, #browser.image(:class => 'add-music-file') might do the job.
Within my custom cell there are 2 span-elements.
<span class="FormElement">
<span class="customelement" id="code" name="code">BER01_CN_045_002</span>
</span>
Is there a way to avoid this?
See the demo, I am talking about cell "code".
I think, that you should don't spend your time in such kind of code optimization. Like I tried to explain in my previous answer the first <span> will be inserted by jqGrid for all form elements having the option edittype:'custom'. The second <span> you inserted yourself in the code of your custom formatter. It is permitted to have nested <span> elements like to have nested <div> elements. I recommend you better to follows the jqGrid standard code as trying to make any kind of optimization which nobody will see at the end except you.
Moreover if you look more in the HTML code of your page generated by jqGrid you will see that the form itself (the form with id="FrmGrid_grid" in your example) are placed inside of <span>. In the same way in the code of the column headers you will also find <span class="s-ico"> which has another two <span> elements as the children. Would you like to try to "optimize" also the code? So I repeat my advice just to hold jqGrid standards and not trying to optimize such small pieces of code like nested <span> elements.