setValue() / addValue() type into adress bar instead of selected element

Question

I'm using WebdriverIO + devtools:puppeteer + cucumber + Firefox Nightly.

When using setValue() / addValue() , the first letter of my input is typed into address bar, instead of selected element. The issue for same tests doesn't appear for mse or chrome browsers.

Issue:

browserscreenshot

After this, nothing happens until function timeouts

INFO devtools: COMMAND navigateTo("https://google.com/")
INFO devtools: RESULT null
INFO devtools: COMMAND findElement("css selector", "input[type=text]")
INFO devtools: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'ELEMENT-1' }
INFO devtools: COMMAND elementClear("ELEMENT-1")
INFO devtools: RESULT null
INFO devtools: COMMAND elementSendKeys("ELEMENT-1", "hello world")

Code examples: Test:

Scenario: Try google
        When I open "google.com"
        Then I type "hello world" into "input[type=text]"

Steps:

When('I open {string}', async function (URL) {
    await browser.url(`https://${URL}`);
});

Then('I type {string} into {string}', async function (input, selector) {
    await $(selector).setValue(input);
});

Although there is a walkaround for some URLS with clicking on the element before using setValue(), this doesn't work for some cases (eg when redirecting from pre-login page to login page with pretyped-in login, I could not click + setValue for password field).

Hope anyone knows how this could be solved or walked around for all cases. Thanks.

[UPD]

@AnthumChris

as I'm using built-in puppeteer, page is not defined by default Instead I tried:

const puppeteerBrowser = await browser.getPuppeteer()
const pages = await puppeteerBrowser.pages()
const page = await pages[0]
await (await page.waitForSelector('input[type=text]')).type('hello')

It worked for chrome and mse again, but failed for ffox nightly.

After opening in browser requested URL (google.com), I've received next error:

Error in "21: Then I type "hello world" into "input[type=text]""
TypeError [ERR_INVALID_URL]: Invalid URL: http://localhost:localhost:64619`

[UPD] I've changed browserURL: 'http://localhost:${rdPort}' to browserURL: 'http://${rdPort}' in a...\node_modules\webdriverio\build\commands\browser\getPuppeteer.js file so I at least could connect to puppeteer.pages object, but there's still a problem on await (await page.waitForSelector('input[type=text]')).type('hello') action:

ProtocolError: Protocol error (DOM.resolveNode): Node with given id does not belong to the document resolveNode@chrome://remote/content/cdp/domains/content/DOM.jsm:245:15
execute@chrome://remote/content/cdp/domains/DomainCache.jsm:101:25
receiveMessage@chrome://remote/content/cdp/sessions/ContentProcessSession.jsm:84:45

Answer 1

Try awaiting the <input> and typing directly into it:

await (await page.waitForSelector('input[type=text]')).type('hello')

Answer 2

@AnthumChris

as I'm using built-in puppeteer, page is not defined by default Instead I tried:

const puppeteerBrowser = await browser.getPuppeteer()
const pages = await puppeteerBrowser.pages()
const page = await pages[0]
await (await page.waitForSelector('input[type=text]')).type('hello')

It worked for chrome and mse again, but failed for ffox nightly.

After opening in browser requested URL (google.com), I've received next error:

Error in "21: Then I type "hello world" into "input[type=text]""
TypeError [ERR_INVALID_URL]: Invalid URL: http://localhost:localhost:64619`