With TestCafe Selector, How to verify the text of the selected item in a <select>?

Question

I'm using TestCafe 1.8.1 and have a slightly different case than the documentation at https://devexpress.github.io/testcafe/documentation/recipes/test-select-elements.html - my problem is that the example assumes the value of an <option> and its text content will be the same, and in my case, the value is a very unpredictable value.

I can select an item in the dropdown without trouble, using .withText(value) to filter the options, and .click(item) to select it. However, my app then refreshes the page, and ought to re-select the relevant item as it loads up. This is not working and I want to test for it.

So I might have options in the select like:

<select id="foo">
  <option value="1234">100x100</option>
  <option value="5432">200x100</option>
  <option value="9999">100x200</option>
</select>

Obviously, if I test with .expect(citySelect.value).eql('London'); as in the docs it'll fail because the values are nothing like the text content e.g. having clicked '200x100' in the dropdown the value becomes "5432".

Do I need to use a ClientFunction to get the text of the selected item? I understand it's quite awkward passing data into a ClientFunction, would I need to pass the id of the select so the ClientFunction can getElementById to find the select and retrieve it's selected option's text content? It all sounds like the wrong way to be doing things.

score 3 · Accepted Answer · edited Mar 07 '21 at 02:31

3

Please check the following example that uses ClientFunction API to obtain an option value:

import { Selector, ClientFunction } from 'testcafe';

fixture `Fixture 1`
    .page `https://kys0l.csb.app/`;

test('Test 1', async t => {
    const selector = Selector('select');

    const getValue = ClientFunction((index) => {
            const select = selector();

            return select.options[index].value;
    }, { dependencies: { selector } });

    await t
        .expect(getValue(0)).eql('1234')
        .expect(getValue(1)).eql('5432')
        .expect(getValue(2)).eql('9999');
});

See also: Obtain Client-Side Info.

edited Mar 07 '21 at 02:31

Vladimir A.

2,202
2
10
28

answered Mar 16 '20 at 17:57

aleks-pro

1,659
4
12

Thank you @aleks-pro, this helped. My `ClientFunction` can take a Selector as its argument, so: `const getValue = ClientFunction((selector) => { const select = selector(); return select.options[select.selectedIndex].innerText; });` .. then in the test script, `const sel:Selector = Selector('select#theselect'); ... let value = await getValue(sel);` – Neek Apr 07 '20 at 04:16

score 1 · Answer 2 · answered Mar 12 '20 at 11:36

1

Try using

.expect(citySelect.innertext).eql('London');

answered Mar 12 '20 at 11:36

VysakhMohan

567
3
9

Thanks for the suggestion.. I find that in Chrome as normal, asking for `innerText` of a ` – Neek Mar 13 '20 at 02:41
Hmm, weird. In my experiment above on the simple test from the docs, I got empty string, and in my own test I also saw empty. Now I'm running the test suite against production, I'm seeing `innerText` giving the long list of all the ` – Neek Mar 13 '20 at 03:48

With TestCafe Selector, How to verify the text of the selected item in a <select>?

2 Answers2