Can't type in headless mode

Grafana k6 k6-browser
1

Hello everyone, I am writing a script for testing the page. An error appears when using the type method in headless mode to enter data in input.

ERRO[0034] Uncaught (in promise) GoError: typing "0100AM" in "input[name=\"start-time\"]": pressing key: dispatching key event up: read tcp 127.0.0.1:55163->127.0.0.1:55162: wsarecv: An existing connection was forcibly closed by the remote host.

An interesting fact is that when logging into the account, I use the same method, but the error does not appear. Tell me what I’m doing wrong or what the error is.
I also noticed that a similar error occurs when using methods that perform actions on the keyboard.
Thanks in advance for any help.

My script:

import { check, group } from 'k6';
import { chromium } from 'k6/x/browser';

export function CreateNotification() {
    const url = 'url';

    const email = 'email';
    const password = 'password';

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

    const startTime = "0100AM";
    const endTime = "1200PM";

    page.goto(url, { waitUntil: 'networkidle' })
        .then(() => {
            group('Description', function () {
                page.waitForSelector('input[name="email"]');

                page.locator('input[name="email"]').type(email); //normal typing
                page.locator('input[name="password"]').type(password); //normal typing

                return Promise.all([
                    page.waitForNavigation(),
                    page.locator('button[type="submit"]').click(),
                ]);
            });
        })
        .then(() => {
            group('Description', function () {
                page.waitForSelector('div[aria-label="selector"]');

                return Promise.all([
                    page.waitForNavigation(),
                    page.locator('a[href="selector"]').click(),
                ]);
            });
        })
        .then(() => {
            group('Description', function () {
                page.waitForSelector('div[class="selector"]');

                page.locator('div[aria-hidden="selector"]').click();
                page.waitForSelector('div[id="selector"]');
                page.locator('div[id="selector"] >> nth=0').click();
                page.waitForTimeout(1000);
                page.locator('div[aria-hidden="selector"] >> nth=-1').click();
                page.waitForTimeout(1000);
            });

            group('Description', function () {
                page.locator('button[name="selector"]').click();
                page.waitForSelector('div[class="selector"]');

                page.locator('button.rdrDayStartOfMonth').click();
                page.waitForTimeout(500);
                page.locator('button.rdrDayEndOfMonth').click();
                page.waitForTimeout(500);

                page.locator('input[name="start-time"]').type(startTime); //typing error
                page.waitForTimeout(250);
                page.locator('input[name="end-time"]').type(endTime); //typing error
                page.waitForTimeout(250);
                page.locator('button[name="selector"]').click();
            });
        })
        .finally(() => {
            page.close();
            browser.close();
        });
}
4

Hi @CRYPE,

Welcome to the forum!

I’ve tried to replicate the issue, but i’m not able to. Could you send us:

  1. The OS and version where the test script is running on.
  2. What version of xk6-browser you are working with.
  3. A simplified script which exhibits the same issue, that is pointing to a publicly accessible website.

I tried the following:

import { chromium } from 'k6/x/browser';

export default function () {
  const browser = chromium.launch({headless: true});
  const context = browser.newContext();
  const page = context.newPage();

  const startTime = "0100AM";
  
  page.goto('https://test.k6.io/browser.php')
  .then(() => {
    page.locator('#text1').type(startTime);
  })
  .finally(() => {
    page.close();
    browser.close();
  });
}

Cheers,
Ankur

5

HI @ankur

  1. Edition Windows 11 Pro
    Version 22H2
    OS build 22621.900
    Experience Windows Feature Experience Pack 1000.22638.1000.0
  2. 0.7.0 (same problem in version 0.6.0)
  3. I have my own test project (written on React), it has the same error. You can use the login data from the test.

Error:

ERRO[0030] Uncaught (in promise) GoError: typing "Title" in "input[placeholder=\"Enter Title\"]": pressing key: dispatching key event up: read tcp 127.0.0.1:59140->127.0.0.1:59139: wsarecv: An existing connection was forcibly closed by the remote host.                                                                              
TypeTestat reflect.methodValueCall (native)

Scenario:

import { chromium } from 'k6/x/browser';

export const options = {
    scenarios: {
        TypeTest: {
            exec: 'TypeTest',
            executor: 'shared-iterations',
            startTime: '0s',
            maxDuration: '1m',
            vus: 1,
        },
    },
};

export function TypeTest() {
    const url = 'https://calendar-project-949da1.netlify.app/';

    const browser = chromium.launch({
        headless: true,
    });

    const context = browser.newContext({
        ignoreHTTPSErrors: true,
        screen: {width: 1280, height: 720},
        viewport: { width: 1280, height: 720}
    });

    const page = context.newPage();

    page.goto(url, { waitUntil: 'networkidle' })
        .then(() => {
            page.waitForSelector('input[name="email"]');

            page.locator('input[name="email"]').type('any@email.com');
            page.waitForTimeout(500);
            page.locator('input[name="password"]').type('test123');

            return Promise.all([
                page.waitForNavigation(),
                page.locator('button.button >> nth=0').click(),
            ]);
        })
        .then(() => {
            page.waitForSelector('div.create-event-button');

            return Promise.all([
                page.locator('div.create-event-button >> nth=0').click(),
            ]);
        })
        .then(() => {
            page.waitForSelector('div.modal-content');

            page.locator('input[placeholder="Enter Title"]').type('Title');
            page.waitForTimeout(500);
            page.locator('input[placeholder="Enter description"]').type('Description');
            page.waitForTimeout(500);
            page.locator('input[placeholder="Paste link"]').type('Link');
            page.waitForTimeout(500);
        })
        .finally(() => {
            page.close();
            browser.close();
        });
}

I also discovered an interesting fact: if you use the type method once per script in the right place, then everything works fine (for example, when logging in, use fill and when filling in the data of a modal window, use the type method)

6

Hi @CRYPE

I was able to run your exact script with xk6-browser v0.7.0 version, both in “headfull” and headless modes. I’m running this in Ubuntu 20 thought, as I don’t have a Windows O.S. available.

Are you still experiencing this issue? In case that you are. Is the error consistent and always the same as shown in your message (uncaught promise when typing “title”)?

Thank you.

7

Hi @Daniel.J
Yes, I have this error always in the same place. As I said before, if I only use the type method in 1 place of the test, everything works fine…
I would like to try this test on another device, but I do not have the opportunity to do so yet. When I check it, I will add a message with the result to this discussion.
Also this time I decided to make a short video with this problem. Link: [typeTest.mp4 - Google Drive]