Skip to content

st_tag selector

Template operator st_tag creates a custom HTML attribute that enables you to quickly find an HTML tag with this attribute.

This is especially helpful for Behat testing, because st_tag provides consistent naming convention for page selectors.

Example

Twig template:

1
<p {{ st_tag('product', 'price', 'read') }}>1.865,00 €</p>

is rendered to HTML:

1
<p data-tag-product-price-read>1.865,00 €</p>

Enabling tagging

To enable tagging, define a dynamic SiteAccess-aware parameter siso_tools.default.tag-prefix:

1
siso_tools.default.tag-prefix: data-tag

If you set an empty value to this parameter, then all tags are hidden. It is important, for example, in prod environment to remove Behat tags.

Implementation

Tagging is implemented with a template operator st_tag.

The operator takes the following parameters:

Parameter Required Type Description Example
Module/Component required string Identifies module/component/page that you are working on. product, form
Element (target) required string Identifies specific field that you are searching for. price, field, text, label
Action required string Identifies desired action for the selector. read - reads to value of text node
fill/write - fills in form field
click/follow/submit - clicking on buttons, following links
ID optional number, string Identifies a unique element that occurs more than once on a page. Helpful when searching for specific element in collections, e.g. product list, multiple images, buttons, etc. 1200, button_action
Value optional mix If you don't want to take the value from the wrapper because it contains special characters or format, you can use this parameter to set a standard format. Can be helpful for example for getting prices. 1600.00 (instead of 1.600,00 €)

Caution

Don't use these attributes in CSS (for styling) or JavaScript (for selecting, hooks, etc.). These attributes have different and specific purpose. In addition, in production mode they can be disabled, which breaks the selectors.

Examples

Read price

1
<p {{ st_tag('product', 'price', 'read') }}>1.865,00 €</p>

Output:

1
<p data-tag-product-price-read>1.865,00 €</p>

Read price with custom value

1
<p {{ st_tag('product', 'price', 'read', '', '1865.00') }}>1.865,00 €</p>

Output:

1
<p data-tag-product-price-read="1865.00">1.865,00 €</p>
1
<a href="/link-to-product.html" {{ st_tag('product', 'anchor', 'follow', '1200', '') }}>Paprika3</p>

Output:

1
<a href="/link-to-product.html" data-tag-product-anchor-follow-1200>Paprika3</p>

Fill out form field

1
<input name="quantity" id="quantity" value="" {{ st_tag('form', 'input', 'write', 'quantity', '') }}>

Output:

1
<input name="quantity" id="quantity" value="" data-tag-form-input-write-quantity>

Check if there is a specific message on the page (e.g. after an Ajax response)

1
<div class="message notice" {{ st_tag('message', 'notice', 'read', '', '') }}>Message content

Output:

1
<div class="message notice" data-tag-message-notice-read>Message content

Caution

Always use the same naming for buttons which submit data. A Behat test or Google tag manager doesn't recognize whether it is a button, a link or an input field which sends the form.

1
<button name="add_to_basket" type="submit" value="Kaufen" class="button add_to_basket float_right"> {{ st_tag('product', 'order', 'submit', '', '') }} 

Output:

1
<input name="quantity" id="quantity" value="" data-tag-product-order-submit>