Context canceled error when pressing Enter in headless mode

[jbaigaon]

K6 browser testing when headless = true the page.$('#react-select-partner-filter-id-input').press('Enter'); throws error
ERRO[0031] typing text "Dashboard QA Testing v2": context canceled

We have a simple web page with two React-Select dropdowns on it.
When we run the k6 Browser tests with headless: false option then our test script works perfectly fine. It opens a new browser, it focuses on the first dropdown and then inserts the value of the dropdown and then move on to the next dropdown and selects its value, all works fine; however, as soon as we change the settings to headless: true then we starts getting the above error.
ERRO[0031] typing text "Dashboard QA Testing v2": context canceled

NOTE: Please note its not a normal options values dropdown; its a react-select dropdown control on our page.
Our test script:

const browser = launcher.launch('chromium', { headless: true});
const context = browser.newContext();
const page = context.newPage();

page.goto(newMagicLinkUrl); // some URL
page.waitForLoadState('networkidle');
page.waitForSelector('div[class="col-3"]');

page.waitForSelector('#partner-filter-id');
 // First Dropdown
page.$('#react-select-partner-filter-id-input').focus(); 
page.$('#react-select-partner-filter-id-input').type('Dashboard QA Testing');
page.$('#react-select-partner-filter-id-input').press('Enter');

// Second DropDrown
page.waitForSelector('#client-filter-id'); 
page.waitForSelector('#react-select-client-filter-id-input'); 
page.$('#react-select-client-filter-id-input').focus();        
page.$('#react-select-client-filter-id-input').type('Dashboard QA Testing v2');
page.$('#react-select-client-filter-id-input').press('Enter'); 

At this line page.$('#react-select-partner-filter-id-input').press('Enter'); we have some kind of issue which we do not understand because we get the follow errors on that line.
Sometimes we get the a websocket closed messages. But the same tests script works perfectly fine with { headless: false} scenario.

RRO[0031] err:read tcp 127.0.0.1:62545->127.0.0.1:62544: wsarecv: An existing connection was forcibly closed by the remote host.  category="Connection:handleIOError" elapsed="0ms" goroutine=16
ERRO[0031] typing text "Dashboard QA Testing v2": context canceled

Please give your suggestions.
Its a simple scenario, we have two dropdowns on the page, we need to select the first dropdown value and then second. thats all we need and K6 Page.Press('Enter') command for pressing "Enter" is failing.

[ankur22]

Hi @jbaigaon,

I'm unable to recreate this issue unfortunately. Could you please send us the script that results in the same behaviour using a public website?

Cheers

[jbaigaon]

@ankur22 Hi , thank you so much for looking into this. really appreciate that. Ill try and find a public website which is using React-Select (dropdowns) and will try to send you that script. Basically the script is simple, we are trying to load the website which has few React-Select drop downs and then we are trying to press("Enter") on those dropdowns in a headleass mode. Ill try and find a public website and will add the new script here. Thanks again.