From 77c875b3e0cd756c362c1aa865d4dd7efed3e6e5 Mon Sep 17 00:00:00 2001 From: Rob Levin Date: Sat, 1 Jun 2019 09:16:39 -0700 Subject: [PATCH] [HTML] Provides a valid case for using data attributes - testing (#190) * Provides a valid case for using data attributes for such teseting frameworks as Selenium without messing up the semantics of the overall html markup. * bad grammar fix --- questions/html-questions.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/questions/html-questions.md b/questions/html-questions.md index e45468589..f95fbc21e 100644 --- a/questions/html-questions.md +++ b/questions/html-questions.md @@ -70,7 +70,9 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo Before JavaScript frameworks became popular, front end developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. -These days, using `data-` attributes is not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework. +These days, using `data-` attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework. + +However, one perfectly valid use of data attributes, is to add a hook for _end to end_ testing frameworks such as Selenium and Capybara without having to create a meaningless classes or ID attributes. The element needs a way to be found by a particular Selenium spec and something like `data-selector='the-thing'` is a valid way to do so without convoluting the semantic markup otherwise. ###### References