In most cases, it is simply a matter of personal preference. There is
usually no technical difference between between using CSS/XPath vs
attributes. To me, the most important thing is to be consistent as an
organization so that code is consistent, which makes the code easier to
read/maintain. I would push using attributes as easier to read and less
error prone. However, I have worked with people coming from Capybara that
feel that CSS expressions are easier to read/use.
That said, there is one place where using CSS/XPath is the better solution
- creating a collection of nested elements without the same ancestors.
For example, let's say you have the following HTML:
<body>
<div class="price-and-quick-add-button-wrapper">
<a class="name-link">link A</a>
</div>
<div class="price-and-quick-add-button-wrapper">
<a class="name-link">link B</a>
</div>
</body>
Your current accessor, will match *2* links:
links(:product_names, :css => ".price-and-quick-add-button-wrapper
a.name-link")
Unlike the CSS-locator, nesting Watir's element calls only looks in the
first matching element. Therefore, you would only get *1* match if you
tried:
links(:product_names) { div(class: "price-and-quick-add-button-wrapper").
links(class: "name-link") }
To get the *2* links without CSS/XPath you would need to make some ugly
iteration of elements, which is harder to read/write and worse with more
levels of nesting:
links(:product_names) { divs(class: "price-and-quick-add-button-wrapper").map
{ |div| div.links(class: "name-link") }.flatten }
Of course, this assumes you're stuck with the HTML you have. The better
answer would be to add more attributes so that you can locate the links
directly (ie not deal with nesting).
- Justin
On Tuesday, March 26, 2019 at 5:19:06 AM UTC-4, NaviHan wrote:
>
> Hi Titus
>
> Today I saw a team member defining elements like this
>
> + a(:start_shopping_link, :css => "a.start-shopping")
>
>
> <https://bitbucket.org/CottonOnGroupEComm/cog-ui-auto/pull-requests/228/co-3896-automation-wishlist/diff#add-comment>
>
> <https://bitbucket.org/CottonOnGroupEComm/cog-ui-auto/pull-requests/228/co-3896-automation-wishlist/diff#Lcuke-tests/features/support/pages/Frontend/Cotton_On/Wishlist_Page.rbT12>
>
> + links(:product_names, :css => ".price-and-quick-add-button-wrapper
> a.name-link")
>
>
> <https://bitbucket.org/CottonOnGroupEComm/cog-ui-auto/pull-requests/228/co-3896-automation-wishlist/diff#add-comment>
>
> <https://bitbucket.org/CottonOnGroupEComm/cog-ui-auto/pull-requests/228/co-3896-automation-wishlist/diff#Lcuke-tests/features/support/pages/Frontend/Cotton_On/Wishlist_Page.rbT13>
>
> + links(:product_thumbnails, :css => "a.thumb-link")
>
>
> <https://bitbucket.org/CottonOnGroupEComm/cog-ui-auto/pull-requests/228/co-3896-automation-wishlist/diff#add-comment>
>
> <https://bitbucket.org/CottonOnGroupEComm/cog-ui-auto/pull-requests/228/co-3896-automation-wishlist/diff#Lcuke-tests/features/support/pages/Frontend/Cotton_On/Wishlist_Page.rbT14>
>
> + span(:remove_all_link, :css=> ".wishlist-remove-all span")
>
>
> Heavy use of css.
> I cant tell them why they should use css :-)
>
> Could you please let me know the disadvantage here?
>
> On Sunday, 24 March 2019 17:15:53 UTC+11, NaviHan wrote:
>>
>> I have seen in my project using css to identify elements using PageObject.
>> I always use attributes like id, class and name to identify elements.
>>
>> Which is the better way and why?
>>
>
--
--
Before posting, please read
https://github.com/watir/watir_meta/wiki/Guidelines-for-Posting-to-Watir-General-Google-Group.
In short: search before you ask, be nice.
watir-general@googlegroups.com
http://groups.google.com/group/watir-general
watir-general+unsubscr...@googlegroups.com
---
You received this message because you are subscribed to the Google Groups
"Watir General" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to watir-general+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
