HTML data-* Attributes

137 views
Skip to first unread message

Rich Crook

unread,
Jun 16, 2016, 1:02:28 AM6/16/16
to Geb User Mailing List
Hello,

Is it possible to directly use the data-* attributes only without using the element tag name?

Thanks!

Marcin Erdmann

unread,
Jun 16, 2016, 2:37:09 AM6/16/16
to geb-...@googlegroups.com
Rich, can you please explain what you mean by using data-* attributes directly? Are you asking how to access them? If that's the question then you can use something like $("element selector").attr("data-name").
--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.
To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/5bd0ee91-69d4-459f-b62d-1cf8ea8a17f6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Rich Crook

unread,
Jun 16, 2016, 11:58:44 AM6/16/16
to Geb User Mailing List
Hi Marcin,

Ok an example is better, given:

<form>
    <select data-qa="artist">
        <option value="1">Ima Robot</option>
        <option value="2">Edward Sharpe and the Magnetic Zeros</option>
        <option value="3">Alexander</option>
    </select>
</form>

We select options with...

$("form").attr('[data-qa="artist"]') = "1" 
$("form").attr('[data-qa="artist"]')  = 2 
$("form").attr('[data-qa="artist"]')  = "Alexander"

Right?

Thanks,
Rich

On Wednesday, June 15, 2016 at 11:37:09 PM UTC-7, Marcin Erdmann wrote:
Rich, can you please explain what you mean by using data-* attributes directly? Are you asking how to access them? If that's the question then you can use something like $("element selector").attr("data-name").

On Thursday, 16 June 2016, Rich Crook <homeb...@gmail.com> wrote:
Hello,

Is it possible to directly use the data-* attributes only without using the element tag name?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+unsubscribe@googlegroups.com.

Michael Kutz

unread,
Jun 16, 2016, 12:02:43 PM6/16/16
to Geb User Mailing List

You should not do this since all attribute based selectors are much slower than class or ID based ones.

We do something similar, but use "qa" prefixed classes instead.

Kind regards
Micha


To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.

To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/5bd0ee91-69d4-459f-b62d-1cf8ea8a17f6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.

To post to this group, send email to geb-...@googlegroups.com.

David Lumpkin

unread,
Jun 16, 2016, 6:37:31 PM6/16/16
to Geb User Mailing List
You can use a CSS2 attribute selector instead of a geb attribute selector and it will be just as fast class or ID selectors (because it is executed by the browser rather than returning all possibilities and filtering in Geb).

For your example you should be able to do this:

$("form [data-qa='artist']") = "1"
$("form [data-qa='artist']") = 2
$("form [data-qa='artist']") = "Alexander"
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+unsubscribe@googlegroups.com.

To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/5bd0ee91-69d4-459f-b62d-1cf8ea8a17f6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Marcin Erdmann

unread,
Jun 17, 2016, 3:50:42 AM6/17/16
to geb-...@googlegroups.com
Yes, that's true, CSS2 attribute selectors are as fast as class or ID based ones, so there is no performance penalty to using them.

As a side note, since 0.13.0 Geb rewrites map based selectors into attribute based selectors giving you the ability to use a friendlier syntax without having to pay with performance for it. Therefore you can use the following syntax:

$("form", "data-qa": "artist").value("1")

Also, note that I used the value() method to change value of a select element and not an assignment as you all did in your examples. We are dealing with a navigator here and we can't use the shorthand syntaxt as if we were using a name to locate that element instead of an attribute.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.
To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/5bd0ee91-69d4-459f-b62d-1cf8ea8a17f6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.
To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/7c5f3c36-54c6-4562-b50e-a0dbb8edc992%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.
To post to this group, send email to geb-...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages