Using .url() on page object results in "expression is not callable, Type 'String' has no call signatures." typescript error

[reallymello]

Description of the bug/issue

When I use myPageObject.url() I expect the string generated/returned by the url function in my page object to be returned, but instead I receive a TypeScript error "expression is not callable, Type 'String' has no call signatures." though it does return the string.

I think the types need to be updated to reflect that .url can be a string or a function type. I think calling .url should work for when the url property in the page object is a string and .url() should return the result of the url parameter when it is defined as a function.

Steps to reproduce

const myPageObject: PageObjectModel = {
  url: function(this: myPageObject) {
    return `https://${baseUrl}/index.aspx`;
  }
}

Sample test

const myPageObject = browser.page.myPageObject();
console.log(myPageObject.url());

Command to run

npx nightwatch

Verbose Output

n/a TypeScript error in IDE only

Nightwatch Configuration

n/a TypeScript error in IDE only

Nightwatch.js Version

3.1.3

Node Version

18.5

Browser

Chrome 115

Operating System

Windows 11

Additional Information

No response

[NithinSravan]

Hi @AutomatedTester ! I would love to take up this task. Can you please assign it to me? I would love to start my opensource journey here.

[gravityvi]

@NithinSravan Sure go ahead.

[AutomatedTester]

Hey, will assign once we have a PR up for this. That way we prevent issues being blocked

…

On 11 Oct 2023 at 09:15 +0100, Ravi Sawlani ***@***.***>, wrote: @NithinSravan Sure go ahead. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[garg3133]

To reproduce this issue, clone https://github.com/garg3133/nightwatch-typescript-boilerplate repository (nightwatch-v3 branch) and then inside test/dropdown.ts, add console.log(dropDownPage.url()) anywhere inside the it block.

[piyushmishra1416]

Hello @garg3133, I have been working on this issue since yesterday, I tried to reproduce the issue as you mentioned above
comment. I cloned the repo and initially while running the test using npm run test, I faced a Chromedriver version mismatch error.

error: 'session not created',
message: 'session not created: This version of ChromeDriver only supports Chrome version 103\n'

I fixed the issue by upgrading the Chromedriver to the latest version using npm install chromedriver@latest --save-dev. This resolved the error and allowed me to run the tests successfully.

Following your instructions, I added console.log(dropDownPage.url()) to src/dropdown.ts. However, I encountered a name mismatch error, which I resolved by changing the name to console.log(dropdown.url());. Despite this, I did not encounter any TypeScript errors.
Also, I am seeing a difference, the owner of the issue is using myPageObject type, and https://github.com/garg3133/nightwatch-typescript-boilerplate this repo is using EnhancedPageObject type. I also tried to import the myPageObject from the nightwatch in the same repo but it says module not found.
Is there any step that I have missed while reproducing the issue?

[Gmin2]

clone the nightwatch-v3 branch

[Gmin2]

Hey @garg3133

export type EnhancedPageObject<
  Commands = {},
  Elements = {},
  Sections extends Record<string, PageObjectSection> = {},
  Props = {},
  URL = string
>

changing the type of URL in in page-object.d.ts will solve this problem

export type EnhancedPageObject<
  Commands = {},
  Elements = {},
  Sections extends Record<string, PageObjectSection> = {},
  Props = {},
  URL = string | (() => string)
>

should i proceed with making a pr for this

[piyushmishra1416]

I am now able to reproduce the issue. Thanks @Min2who for providing the fix.
I think the actual type for the URL will be URL = string | ((...args: any) => string) but not sure. Can you please confirm on this @garg3133 ?

[Sushant0124]

I have start resolving this issue

[garg3133]

There is no issue with the type of the url property here, this is instead more of a documentation issue.

By default, the url property is set to a string type here. To set it to a function type instead, the fifth type parameter of the EnhancedPageObject interface can be used:

export interface MyPage extends
  EnhancedPageObject<{}, typeof elements, {}, {}, () => string> {}

See the usage of the EnhancedPageObject interface here for reference.