CODEWITHSUNDEEP
automationcss-selectorsselectore2e-testingtestcafe
ingo
ingo

Reputation: 856

Selector problems with dynamic content

I try to select a list item from a react generated list. TestCafe Studio will select:

.click(Selector('#cat_220518').find('.cl-folder-list-element-arrow'))

But this is a dynamic value and maybe changed with next run. So I tried to use to select text, but this fail. I use:

.click(Selector('span').withExactText('test1234').find('.cl-folder-list-element-arrow'))

The element is an arrow button that will open a list of subitems. But the click will never happen. Testcafe is waiting for the element cl-folder-list-element-arrow. From the documentation, I read that "withExactText will select the main node of the element. To find have to work in my eyes. What is wrong with my idea?

The element on the page is:

<div class="category-tree-node" id="cat_220518" style="padding-left: 2%; width: 98%;">
   <div class="category-tree-node-property" draggable="true">
      <div class="cl-drop-sensors top"></div>
          <div class="cl-folder-list-element-name">
              <div class="cl-folder-list-element-arrow"></div>
                 <span>test1234</span>
          </div>
              <div class="cl-drop-sensors bottom"></div>
   </div>
</div>

Upvotes: 2

Views: 751

Answers (1)

aleks-pro
aleks-pro

Reputation: 1669

The find method doesn't work because the Selector('span').withExactText('test1234') part of the selector returns precisely the span element. But if you replace 'span' with 'div', the selector should work correctly: Selector('div').withExactText('test123').find('.cl-folder-list-element-arrow')

You can also make the selector safer by using the category-tree-node class:

Selector('div.category-tree-node').withExactText('test1234').find('.cl-folder-list-element-arrow')

See also: Selector Object

Upvotes: 4

Related Questions