Getting document: getting new document handle: getting document element handle: websocket: close 1006 (abnormal closure)

Grafana k6 k6-browser
1

After sign-in, I am clicking on the link which navigate it to other page. I am getting below error. Can you please help me (or) any work arounds (or) code changes. thanks in advance

image
image1327Ă—64 18.7 KB

link text:

<a href="/todo" class="asset-import__info__content__buttons__cancel sprk-c-Button sprk-c-Button--full@s sprk-c-Button--secondary" data-id="asset-import__info__cancel" data-analytics-click="Origination:Asset Import Splash Page: Cancel" data-rmqa="asset-import__info__content__button__cancel" data-link="true">
                        I'll Do This Later
                    </a>

Here is my code:

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

export default async function () {
  const browser = chromium.launch({
    headless: false,
    slowMo: '500ms' // slow down by 500ms
  });
  const context = browser.newContext();
  const page = context.newPage();

  try {
    await page.goto('https://myappurl.com', { waitUntil: 'networkidle' });

    page.waitForLoadState('networkidle');
    //sleep(10);
    

    page.locator('input[name="email"]').type('XXXXXXXX');
    page.locator('input[id="password--input"]').type('XXXXXXXX');
    await page.locator('button[id="sign-on"]').click();

    
    sleep(30);
   
    page.waitForNavigation(); //this wait works here 


    const elem = page.$('a[href="/todo"]'); 
    await elem.click(); // I AM GETTING ERROR HERE

    
  
  } finally {
    page.close();
    browser.close();
  }
}
5

Hi @ppyneni !

So, the sleep should not be necessary, instead, because the locator().click produces a page navigation it would be better to perform that action and wait for that navigation inside a Promise.all.

I have used a k6 test site to create a test that reproduces the functionality that you are trying to implement with your site:

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

export default async function () {
  const browser = chromium.launch({
    headless: false,
    slowMo: '500ms' // slow down by 500ms
  });
  const context = browser.newContext();
  const page = context.newPage();

  try {
    await page.goto('https://test.k6.io/my_messages.php', { waitUntil: 'networkidle' });
    page.locator('input[name="login"]').type('admin');
    page.locator('input[name="password"]').type('123');

    await Promise.all([
        page.waitForNavigation(),
        page.locator('input[type="submit"]').click(),
    ]);

    const elem = page.$('a[href="/"]'); 
    await elem.click(); // Go back
  
  } finally {
    page.close();
    browser.close();
  }
}

Let me know if that helps with your test.

1 Like
6

I am getting same error.

ERRO[0030] communicating with browser: websocket: close 1006 (abnormal closure): unexpected EOF  category=cdp elapsed="0 ms" goroutine=46
ERRO[0030] process with PID 26571 unexpectedly ended: signal: killed  category=browser elapsed="2 ms" goroutine=88
ERRO[0048] Uncaught (in promise) GoError: getting document: getting new document handle: getting document element handle: websocket: close 1006 (abnormal closure): unexpected EOF
running at github.com/grafana/xk6-browser/browser.mapPage.func10 (native)

Same is the case with signout button

ERRO[0030] communicating with browser: websocket: close 1006 (abnormal closure): unexpected EOF  category=cdp elapsed="0 ms" goroutine=91
ERRO[0030] process with PID 27028 unexpectedly ended: signal: killed  category=browser elapsed="1 ms" goroutine=88
ERRO[0047] Uncaught (in promise) GoError: clicking on "a[href=\"/signout\"]": getting new document handle: getting document element handle: sending a message to browser: websocket: close 1006 (abnormal closure): unexpected EOF
7

What changes did you apply to the initial code?

Could you provide a code example that reproduces the problem and that we can test from our side? Otherwise it’s difficult to know what is the exact problem and how to fix it.

8

It is an internal site and not exposed to public.

Here are my steps:

  1. Open the URL
  2. Enter UserName
  3. Enter Password
  4. Click submit button
  5. It will take around 30 seconds to load (Due to multiple redirections it is an expected time) (URL is like .com/asset-import-info/general)
    NOTE: I don’t have any issues up to step 5. Login was successful and able to see the next page, and link I was supposed to click.
  6. I need to click on a button
    I’ll Do This Later

    Step 6 is giving an error as below. Expected URL is like .com/todo
Uncaught (in promise) GoError: clicking on "a[href=\"/todo\"]": getting new document handle: getting document element handle: sending a message to browser: websocket: close 1006 (abnormal closure): unexpected EOF
default at reflect.methodValueCall (native)
        at file:///Users/PPyneni/Desktop/Git/xk6example/test.js:51:10(99)  executor=per-vu-iterations scenario=default

I tried multiple ways to click

await Promise.all([
        page.waitForNavigation(),
        console.log("I am here"),
        page.locator('a[href="/todo"]').click(),
    ]);

const elem = page.$('a[href="/todo"]'); 
    await elem.click(); 

Promise.all([
        page.locator('a[href="/todo"]').click(),
        page.waitForNavigation({timeout: 5000}),
      ]).then(() => { 
        console.log("ok");
      }).catch(e => {
        console.log("err: "+ e);
      }).finally(() => {
        page.close();
        browser.close();
      })

We are doing POC in my organization. Any help would be appreciated

9

After login URL is like .com/asset-import-info/general
If I click “I’ll Do This Later” button URL is like .com/todo

10

Thank you for your quick reply @Daniel.J . You can use below script to replicate… my script moreover same after login.

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

export default async function () {
  const browser = chromium.launch({
    headless: false,
    slowMo: '500ms' // slow down by 500ms
  });
    const context = browser.newContext();
    const page = context.newPage();

  try {
    await page.goto('https://community.k6.io/latest', { waitUntil: 'networkidle' });

    await Promise.all([
        page.waitForNavigation(),
        page.locator('a[href="/top"]').click(),
    ]);


  } finally {
    page.close();
    browser.close();
  }
}
11

@Daniel.J I have worked with Dev team and Architect and as per them each link is duplicate. It returns multiple items. Do you have any example how I can I click on the first occurrence of the link

12

You can use CSS and XPath selectors, so you can use :nth-child(number) for example to select the 1st, 2nd… elements that match the selector. But it’s recommended to avoid doing this and instead defining a more robust selector if possible. See this guide on using selectors.