How to Fill a textarea with text and Send the Message?

Grafana k6
1

Hi,
I’m trying to go to a URL, fill a textarea input with some text, and click on a button which should send the message (Q&A Chat system).
NOTES:

  1. I’m testing using the Grafana Cloud Script Editor.
  2. In the code, I want to keep the VU’s on the page for the duration of the test.
  3. I can see in the Grafana Cloud logs after running the script, and on our end, that they are connected to the websockets channel as soon as they Join the page, so no issues there (I believe).
  4. We use a third party Chat API which of course uses websockets.

Grafana Log Errors:
Custom Error: filling “#send-chat-input” with “hello world!”: getting new document handle: getting document element handle: context canceled
Unexpected DevTools server error: context canceled category=ExecutionContext:eval elapsed=0 ms iteration_id=40ee656e39318294

script.js:

import { browser } from 'k6/browser';
import { sleep } from 'k6';

export const options = {
  scenarios: {
    ui: {
      executor: 'ramping-vus',  // This executor will allow ramping up VUs over time
      startVUs: 1,              // Start with 0 VUs
      stages: [
        { duration: '1s', target: 10 },  // Ramp up to 10 VUs in 10 seconds
        { duration: '119s', target: 10 },  // Hold at 10 VUs for 4:50 seconds
      ],
      options: {
        browser: {
          type: 'chromium',  // Use Chromium browser
        },
      },
    },
  },
  thresholds: {
    checks: ['rate==1.0'],  // Ensure all checks pass with a 100% rate
  },
  cloud: {
    distribution: {
      'amazon:ca:montreal': { loadZone: 'amazon:ca:montreal', percent: 100 },
    },
  },
};

// Separate arrays for URLs and messages
const urls = [
  'uniquetokenurl1',
  'uniquetokenurl2'
  'uniquetokenurl3'
  'uniquetokenurl4'
  'uniquetokenurl5',
  'uniquetokenurl6',
  'uniquetokenurl7'
  'uniquetokenurl8'
  'uniquetokenurl9'
  'uniquetokenurl10'
];

export default async function () {
  const vuIndex = __VU - 1; // __VU is the current virtual user's number (1-based), so subtract 1 to get 0-based index
  const url = urls[vuIndex % urls.length];
  const page = await browser.newPage();

  // 1. Capture console log messages from the page
  page.on('console', (msg) => {
    console.log(`Page console log: ${msg.text()}`);
  });

  // **Navigation** - Ensure that the virtual user doesn't keep rejoining the page if the navigation fails
  try {
    const response = await page.goto(url, { timeout: 10000 });
    console.log(`Response status: ${response.status()}`);  // Log the HTTP status code
    console.log(`Successfully navigated to ${url}`);
    // **Sleep for the full test duration** - Keep the VU on the page for the full duration (5 minutes)
    sleep(120);  // Sleep for 5 minutes (300 seconds)
  } catch (error) {
    console.log(`Failed to navigate to ${url}: ${error}`);
  } finally {
    if (page) {
      console.log(`Closing page for URL: ${url}`);
      await page.close();  // Close the page if it was opened
    } else {
      console.log('Page was not opened, skipping close.');
    }
  }

  sleep(5);

  try {
    const textarea = page.locator('#chat-textarea');
    const sendChatBtn = page.locator('#send-chat-btn');
    await Promise.all([
        page.waitForNavigation(),
        textarea.fill('hello world!'),
        sleep(5),
        sendChatBtn.waitFor({ state: 'visible', timeout: 5000 }),
        page.waitForTimeout(500),
        sendChatBtn.click({ delay: 50, force: true })
    ]);
  } catch(error) {
    console.log(`Custom Error: ${error}`)
  }

  sleep(5);
}

I’m unable to fill the textarea and click on the button. How can I do this?

2

I don’t think you can in cloud as html sanitizer is turned off?

3

@yosiasz
I just changed: textarea.fill('hello world!') to textarea.type('hello world!')
And I still get the same errors:

Custom Error: typing “hello world!” in “#send-chat-input”: getting new document handle: getting document element handle: context canceled
Unexpected DevTools server error: context canceled category=ExecutionContext:eval elapsed=0 ms iteration_id=97c1ac542a10b7d5

What am I doing wrong? Does my application need to be an API?

4

See my previous response and research that

6

Is there a way to turn it on, via the .js script?

7

I don’t think so it is a config setting