Siesta selector by custom tags

Question

I want to ask if in siesta possible to write selector by custom tag:

for example I have component:

<a class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small" style="min-width: 75px; right: auto; left: 232px; top: 0px; margin: 0px;" hidefocus="on" unselectable="on" id="button-1017" data-id="loginBtn" tabindex="0" componentid="button-1017" target="_blank">

which from console I can select using css selector: document.querySelector('a[data-id="loginBtn"]')

but if I write in siesta test: t.chain({click: '>> a[data-id="loginBtn"]'}, no component is find.

How the selector should look like to find component?

Answer 1

The selector for your component should look like this:

t.chain(
    {click: 'a[data-id=loginBtn]'}
)

The click method is accepting ActionTarget , and you were using >> which is used for ExtJS component query. You can find more info how to specify target type on the docs page.

If you are testing ExtJS app, you should be able to also click directly the ExtJS button component. There are multiple ways how to target such button but if you would have set the config itemId which is unique id of the component, the query would look similar:

t.chain(
    {click: '>> button[itemId=loginBtn]'}
)