Generate TypeScript Type declarations

[ka3de]

This is a global task in order to track the generation of TS Type declarations for xk6-browser, the same way it's done for k6.

Type declarations should be generated for the following APIs:

Tasks

Beta Give feedback

1. Browser: Add browser and browserContext type definitions for k6/experimental/browser DefinitelyTyped/DefinitelyTyped#65902
2. BrowserContext Add browser and browserContext type definitions for k6/experimental/browser DefinitelyTyped/DefinitelyTyped#65902
3. ElementHandle [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
4. Frame [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
5. JSHandle [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
6. Keyboard [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
7. Locator [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
8. Mouse [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
9. Page: Generate TypeScript Type declarations for Page API #840
10. Request [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
11. Response [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481
12. Touchscreen [@types/k6] Add experimental browser module type annotations for v0.44.0 DefinitelyTyped/DefinitelyTyped#65481

[kangliep]

can't wait this 💯 !!

[swathi-harwalkar1]

We are waiting for this too!!

[ankur22]

@swathi-harwalkar1 and @kangliep take a look at the most recent type definitions in https://github.com/DefinitelyTyped/DefinitelyTyped/. Most of the objects are now defined. There are a couple missing (browser and browserContext), which will be updated in an upcoming release.

We will not be updating browserType since we're unexporting it the next release (more news to follow in the next release notes).

[jevgenim7]

would be nice!

[ArCiGo]

I'm curious: Could it be possible to use the browser member as the existing documentation suggests?

[ankur22]

I'm curious: Could it be possible to use the browser member as the existing documentation suggests?

Hi, I think you are referring to the fact that browser doesn't seem to be a named export, but Browser is. We made a mistake when creating the type definitions, but we're working on a fix for this (DefinitelyTyped/DefinitelyTyped#66347) and should be out sometime this week.

[ArCiGo]

I'm curious: Could it be possible to use the browser member as the existing documentation suggests?

Hi, I think you are referring to the fact that browser doesn't seem to be a named export, but Browser is. We made a mistake when creating the type definitions, but we're working on a fix for this (DefinitelyTyped/DefinitelyTyped#66347) and should be out sometime this week.

I'm a little bit confused. What's the difference between the browser and Browser members?

I noticed that types/k6 (https://www.npmjs.com/package/@types/k6?activeTab=code) has the browser member. Doesn't work?

The new fix, can be followed with the documentation I mentioned?

[ankur22]

@ArCiGo,

We've merged in the latest version of type definitions.

I'm a little bit confused. What's the difference between the browser and Browser members?

browser is the pre allocated browser instance that is the starting point for all tests when working with k6 browser. With this object you should be able to create a new context, or create a new page, and from there start interacting with the website under test.

Browser is the declared interface. browser is of type Browser.

I noticed that types/k6 (https://www.npmjs.com/package/@types/k6?activeTab=code) has the browser member. Doesn't work?

Can you elaborate on this please?

The new fix, can be followed with the documentation I mentioned?

Yes, the latest version of the type definitions should now reflect the browser docs correctly.

[ArCiGo]

@ankur22

I was trying the new version of types/k6 with my current solution of Playwright (using POM). I was able to use the browser, but now I got a new issue.

I passed the page object to my page classes, and this is the error.-

Argument of type 'import("/Users/my.username/Documents/Projects/my_tests/node_modules/@types/k6/experimental/browser").Page' is not assignable to parameter of type 'import("/Users/my.username/Documents/Projects/my_tests/node_modules/playwright-core/types/types").Page'.
  Type 'Page' is missing the following properties from type 'Page': addInitScript, $eval, $$eval, exposeBinding, and 36 more.ts(2345)

In fact, in my page classes, I'm passing a parameter to a constructor of type Page (of Playwright).

My code looks like this.-

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

import { SLLoginPage } from '../pages/SLLoginPage';
import { SLProductPage } from '../pages/SLProductsPage';

let slLoginPage: SLLoginPage;
let slProductPage: SLProductPage;

export const options = {
    scenarios: {
        login: {
            executor: 'constant-vus',
            exec: 'login',
            vus: 1
        }
    },
};

export async function login() {
    const context = browser.newContext();
    const page = context.newPage();

    try { 
        slLoginPage = new SLLoginPage(page);
        slProductPage = new SLProductPage(page);

        await slLoginPage.goTo();
        await slLoginPage.fillLoginForm(process.env.USERNAME as string, process.env.PASSWORD as string);
        await page.waitForURL('**/dashboard', { timeout: 3000 });
} finally {
    page.close();
}

On the other hand, waitForUrl() is not available on types/k6? If not, is there an equivalent?

Thanks in advance! :)

[ankur22]

Hi @ArCiGo,

Could you please open an issue in our community forum instead of answering in this issue 🙂 ?

I'd need to see the full test script, but in general the page in k6 isn't compatible with the page in Playwright. As you've spotted the page in k6 doesn't implement all of the APIs that the page in Playwright has implemented. Not only that, most of the k6 APIs are still synchronous, whereas most of the Playwright APIs are asynchronous. What is it that you are trying to do that requires both tools?

On the other hand, waitForUrl() is not available on types/k6? If not, is there an equivalent?

No plans yet to implement waitForUrl, and the current workaround would be to work with waitForNavigation instead. What's your use case for waitForUrl?

Cheers,
Ankur

[ArCiGo]

Hi, @ankur22 !

Thanks for your response.

What I want to do is load testing of my existing UI functional tests (I have different workflows that I would like to load with multiple users).

Maybe we can talk in-depth about my goal in another channel. What do you think? :)

Update.- I have a sample project to demo what I want.

[ankur22]

Hi @ArCiGo,

Yes please, can you open an issue in our community forum for now, and we can go from there 👍

[ArCiGo]

Done, @ankur22 ! :D

https://community.grafana.com/t/loading-testing-for-ui-using-playwright/104281