Frame handling in Webdriver IO

Question

I am testing a webpage that has multiple forms in it.

When I use

client.frame({id:client.element('#frameId')});

I don't get any error, but when I try to interact with an element within that frame I get a RuntimeError telling me the element could not be located.

I have been looking out for literature about how the frame() method works but I don't have any luck.

Answer 1

I was also using webdriver.io and it looks like documentation is a bit wrong.

You can access frames:

1) via it's number on the page. For example the first frame met in HTML DOM is client.frame(0), second client.frame(1) etc

2) via name attribute: <frame name="test"></frame> client.frame('test')

3) find the element with client.element('css_selector'), then in a callback pass the returned value to the .frame()

Answer 2

The way to go to a new frame is:

client.frame(<id of frame here>)

What you have should work too though. Try doing a client.waitForExist on an element that only exists on the frame, instead of just switching to frame and immediately trying to interact with element in that frame, as you may be firing your interaction event before selenium has had a chance to fully switch to the frame:

client.frame(<id of frame here>
client.waitForExist(<id of some css element that only exists in the frame>)

Answer 3

This works for me

const frameValue = browser.element('frame_selector').value;
browser.frame(frameValue);

Hopefully, it works for you.

Answer 4

client.frame(<name_of_frame>) worked.

I tried using a selector like #idOfSelector but it didn't seem to work.