Not able to select a value from drop down using Index in Testcafe-CodePudding

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.

CodePudding user response：

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);
});