Code Monkey home page Code Monkey logo

Comments (16)

dgozman avatar dgozman commented on July 18, 2024

I suggest to drop ChromiumSession from v1 altogether.

from playwright.

mxschmitt avatar mxschmitt commented on July 18, 2024

Is it also possible, that a single file will be created which contains all the typings in the end? Like Electron does. Or is this already included / done in your task list / PR?

cc @JoelEinbinder

Thanks!

from playwright.

JoelEinbinder avatar JoelEinbinder commented on July 18, 2024

Is it also possible, that a single file will be created which contains all the typings in the end? Like Electron does. Or is this already included / done in your task list / PR?

cc @JoelEinbinder

Thanks!

I didn’t have that as an explicit goal, but it will likely end up with one file for the core types, and one file per package like playwright, playwright-chromium, that reexports some of those types. Is there some reason that having a single file with all of the types is preferable?

from playwright.

mxschmitt avatar mxschmitt commented on July 18, 2024

Is it also possible, that a single file will be created which contains all the typings in the end? Like Electron does. Or is this already included / done in your task list / PR?
cc @JoelEinbinder
Thanks!

I didn’t have that as an explicit goal, but it will likely end up with one file for the core types, and one file per package like playwright, playwright-chromium, that reexports some of those types. Is there some reason that having a single file with all of the types is preferable?

I try to embed the typings into the Monaco editor to use them there and for that I need to load them "somehow" into the frontend. For Electron (just a random example) it works by simply using the single file, thats why I thought this is common.

from playwright.

thernstig avatar thernstig commented on July 18, 2024

This snippet does not give proper types for el:

    await page.$eval('input[type=text]', el => {
      // @ts-ignore
      el.value = '';
    });

I'm using VS Code. Removing // @ts-ignore will give an error saying Property 'value' does not exist on type 'Element'.ts(2339). Is this part of this issue?

from playwright.

JoelEinbinder avatar JoelEinbinder commented on July 18, 2024

This snippet does not give proper types for el:

    await page.$eval('input[type=text]', el => {
      // @ts-ignore
      el.value = '';
    });

I'm using VS Code. Removing // @ts-ignore will give an error saying Property 'value' does not exist on type 'Element'.ts(2339). Is this part of this issue?

No this is standard behavior with typescript. Replace $eval with document.querySelector and the same thing will happen.

from playwright.

thernstig avatar thernstig commented on July 18, 2024

@JoelEinbinder or @aslushnikov Any recommended way to work around that, i.e. to achieve the same thing but with autocompletion for el? Basicallly what I want to do is reset an input field at the start of each test I run. Is the the only workaround to get auto-completion to do like below? Below el does give auto-completion, hence why I thought page.$eval would also give it after finding the element.

const foo= await page.waitForSelector('text="Something"');
expect(await foo.evaluate(el => el.innerText)).toBe('Something');

from playwright.

JoelEinbinder avatar JoelEinbinder commented on July 18, 2024

@JoelEinbinder or @aslushnikov Any recommended way to work around that, i.e. to achieve the same thing but with autocompletion for el? Basicallly what I want to do is reset an input field at the start of each test I run. Is the the only workaround to get auto-completion to do like below? Below el does give auto-completion, hence why I thought page.$eval would also give it after finding the element.

const foo= await page.waitForSelector('text="Something"');
expect(await foo.evaluate(el => el.innerText)).toBe('Something');

I believe waitForSelector had the wrong types. They should both behave the same after my pr lands.

from playwright.

thernstig avatar thernstig commented on July 18, 2024

@JoelEinbinder I will follow this up once your PR lands and report any existing issues I have, so we can sort it out what's incorrect and not. I find it so weird that this (see image) gives autocompletion for everything but .value.

autocompletion_value

from playwright.

thernstig avatar thernstig commented on July 18, 2024

@JoelEinbinder Did you see my above image? There you can see that el.nodeValue gives auto-completion, but not el.value. Do you mean that el.value will never give auto-completion then? If so, how do I work around this in e.g. VS Code?

    await page.$eval('input[type=text]', el => {
      // @ts-ignore
      el.value = '';
    });

from playwright.

dgozman avatar dgozman commented on July 18, 2024

If I am not mistaken, manual typing should work in this case:

await page.$eval('input[type=text]', (el: HTMLInputElement) => {
  el.value = '';
});

from playwright.

mxschmitt avatar mxschmitt commented on July 18, 2024
HTMLInputElement

then something like that comes up, I also faced into this issue:

No overload matches this call.
  Overload 1 of 4, '(selector: string, pageFunction: PageFunctionOn<HTMLElement | HTMLInputElement | HTMLObjectElement | HTMLAnchorElement | HTMLAppletElement | ... 66 more ... | HTMLVideoElement, void, string>, arg?: any): Promise<...>', gave the following error.
    Argument of type '(el: HTMLInputElement) => string' is not assignable to parameter of type 'PageFunctionOn<HTMLElement | HTMLInputElement | HTMLObjectElement | HTMLAnchorElement | HTMLAppletElement | ... 66 more ... | HTMLVideoElement, void, string>'.
      Type '(el: HTMLInputElement) => string' is not assignable to type '(on: HTMLElement | HTMLInputElement | HTMLObjectElement | HTMLAnchorElement | HTMLAppletElement | ... 66 more ... | HTMLVideoElement, arg2: void) => string | Promise<...>'.
        Types of parameters 'el' and 'on' are incompatible.
          Type 'HTMLElement | HTMLInputElement | HTMLObjectElement | HTMLAnchorElement | HTMLAppletElement | ... 66 more ... | HTMLVideoElement' is not assignable to type 'HTMLInputElement'.
            Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 49 more.
  Overload 2 of 4, '(selector: string, pageFunction: PageFunctionOn<HTMLOrSVGElement, void, string>, arg?: any): Promise<string>', gave the following error.
    Argument of type '(el: HTMLInputElement) => string' is not assignable to parameter of type 'PageFunctionOn<HTMLOrSVGElement, void, string>'.
      Type '(el: HTMLInputElement) => string' is not assignable to type '(on: HTMLOrSVGElement, arg2: void) => string | Promise<string>'.
        Types of parameters 'el' and 'on' are incompatible.
          Type 'HTMLOrSVGElement' is not assignable to type 'HTMLInputElement'.
            Type 'SVGElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 69 more.

Something like that works:

page.$eval(selector, (el) => (el as HTMLInputElement).value)

from playwright.

thernstig avatar thernstig commented on July 18, 2024

If I am not mistaken, manual typing should work in this case:

await page.$eval('input[type=text]', (el: HTMLInputElement) => {
  el.value = '';
});

We are not using TypeScript. The reason we see the failures is because VS Code has type inference via their language service, so the above approach will not work for us.

from playwright.

dgozman avatar dgozman commented on July 18, 2024

@mxschmitt After #1747 (should be available in the upcoming playwright@next release), explicit (el: HTMLInputElement) => el.value should work.

@thernstig I am not sure what to do about VSCode being smart with javascript, but not allowing type annotations. Perhaps, JSDoc-style comments could help? Any ideas are welcome!

from playwright.

thernstig avatar thernstig commented on July 18, 2024

Yes maybe there is just so much VS Code can infer. We have a large code base and I haven't seen this problem with other code, but unfortunately I have got little knowledge of TypeScript so I also cannot be of much help as to why/how to solve this best. I hope to invest time in TypeScript soon enough to be able to be of better help with feedback such as this.

from playwright.

pavelfeldman avatar pavelfeldman commented on July 18, 2024

This bug is now too big to track, let's close it as fixed and open new fine-grained bugs for the missing features!

from playwright.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.