0

Below is my code. I am able to access and select the item from drop down from a browser console using

  '''document.querySelector('#__next > div > main > div.Home_toolbar__JY_RL > 
  div.Home_deviceControls__nQw4V > select:nth-child(2)').selectedIndex = 3'''

But from test in testcafe from below code -

''test('Select each available Audio input device', async (browser) => {
await browser.wait(6000);
let audioDevices = Selector('#__next > div > main > 
div.Home_toolbar__JY_RL > div.Home_deviceControls__nQw4V > 
select:nth-child(2)'
).selectedIndex = 3
await browser.expect(audioDevicescount.selectedIndex).eql(3);
});'''

Below is the error I get -

TypeError: Cannot set property selectedIndex of function __$$clientFunction$$() { const testRun = builder._getTestRun(); const callsite...... } which has only a getter

I tried using client function, but could not pass the selectedIndex value.

1 Answer 1

1

You cannot set the 'selectedIndex' property using the Selector, since the Selector is created for element querying. To modify the element state on the client side, use the ClientFunctions mechanism. I created a sample that demonstrates how to set selectedIndex using the ClientFunction. Please see the code below:

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
import { Selector, ClientFunction } from 'testcafe';

fixture `f`
    .page `index.html`;

const select = Selector('select');

const setSelectedIndex = ClientFunction(index => {
    select().selectedIndex = index;
}, { dependencies: { select } });

test(`t`, async t => {
    await setSelectedIndex(2);

    await t.expect(select.selectedIndex).eql(2);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.