How to concatenate URLs to avoid getting TypeError [ERR_INVALID_URL]: Invalid URL

[ChandanHackerrank]

What happened?

I am clicking on a link on page which is opening new tab. I want to navigate to the new tab.
Using below statements

const url = '/questions/datascience/'+questionID.toString()+'/edit'
await actor.attemptsTo(
      Wait.upTo(Duration.ofSeconds(60))
        .until(Page.whichUrl(endsWith(url)), isPresent())
        .pollingEvery(Duration.ofSeconds(1)),
      Switch.to(Page.whichUrl(endsWith(url)))
    );

But I am getting invalid url error even though it is correct one.

What did you expect to happen?

Want to switch context to new page and perform further operations

Node.js version

18.18.2

Execution environment

MAC OS, SERENITY JS and Playwright , chrome

How to reproduce the bug.

const url = '/questions/datascience/'+questionID.toString()+'/edit'
await actor.attemptsTo(
      Wait.upTo(Duration.ofSeconds(60))
        .until(Page.whichUrl(endsWith(url)), isPresent())
        .pollingEvery(Duration.ofSeconds(1)),
      Switch.to(Page.whichUrl(endsWith(url)))
    );

Serenity/JS version

"playwright": "^1.38.1",
"@playwright/test": "^1.39.0",
    "@serenity-js/assertions": "^3.11.1",
    "@serenity-js/console-reporter": "^3.11.1",
    "@serenity-js/core": "^3.11.1",
    "@serenity-js/cucumber": "^3.11.1",
    "@serenity-js/playwright": "^3.11.1",
    "@serenity-js/rest": "^3.11.1",
    "@serenity-js/serenity-bdd": "^3.11.1",
    "@serenity-js/web": "^3.11.1",

[jan-molak]

Hey @ChandanHackerrank

The root cause of the issue you're seeing is that the code sample concatenates the URL with the description of the questionID question, instead of the value of the question.

Since the url contains the description, it doesn't match any registered window URLs.

const url = '/questions/datascience/'+questionID.toString()+'/edit'
// produces: '/questions/datascience/description of questionID/edit'

Questions are asynchronous data structures, so to concatenate the value of a question with a static string or with the value of another question, you'll need to use the helper function called q.

In your case, this gives us:

const url = q`/questions/datascience/${ questionID }/edit`

await actor.attemptsTo(
      Wait.upTo(Duration.ofSeconds(60))
        .until(Page.whichUrl(endsWith(url)), isPresent())
        .pollingEvery(Duration.ofSeconds(1)),
      Switch.to(Page.whichUrl(endsWith(url)))
    );

Hope this helps!

[ChandanHackerrank]

Getting same error even if i give '/edit'

    const questionID = await notes().get(CONSTANTS.QUESTION_ID).answeredBy(actor);
    const editURL = q`/edit`;
    await actor.attemptsTo(
      Log.the(`${questionID}`),
      Log.the(`${editURL}`),
      Switch.to(Page.whichUrl(endsWith(editURL)))

and tried below code too

const url = q`/questions/datascience/${ questionID }/edit`

await actor.attemptsTo(
      Wait.upTo(Duration.ofSeconds(60))
        .until(Page.whichUrl(endsWith(url)), isPresent())
        .pollingEvery(Duration.ofSeconds(1)),
      Switch.to(Page.whichUrl(endsWith(url)))
    );

error is invalid url as q statement code is converting into
/questions/datascience/{ }/edit

[jan-molak]

You might be accidentally converting types more times than needed.

In the code sample you pasted, questionID evaluates to a static value, probably a string or a number:

  const questionID = await notes().get(CONSTANTS.QUESTION_ID).answeredBy(actor);  

Because of q, editURL becomes Question<string>:

  const editURL = q`/edit`;

However, questionID is then injected into a template literal. Now, since questionID is already resolved, the log most likely contains the expected value

  await actor.attemptsTo(
    Log.the(`${questionID}`),  

But here, injecting editURL (which is a Question<string>) into Log.the(${editURL}) is an equivalent of saying Log.the(questionID.toString()) and most likely not what you want:

    Log.the(`${editURL}`),
    Switch.to(Page.whichUrl(endsWith(editURL))
  )

I'd suggest doing the following:

• try to avoid mixing questions with template literals, unless you're using q
• try to avoid resolving the questions explicitly via answeredBy in your scenarios and instead create a helper function that produces the value you're after

To give you a practical example, consider replacing:

   const questionID = await notes().get(CONSTANTS.QUESTION_ID).answeredBy(actor);
   const editURL = q`/edit`;
   await actor.attemptsTo(
     Log.the(`${questionID}`),
     Log.the(`${editURL}`),
     Switch.to(Page.whichUrl(endsWith(editURL))
   )

with:

function editUrl() {
  return q`/questions/datascience/${ notes().get(CONSTANTS.QUESTION_ID) }/edit`
}

await actor.attemptsTo(
  Log.the(editUrl()),
  Wait.upTo(Duration.ofSeconds(60))
    .until(Page.whichUrl(endsWith(editUrl())), isPresent())
    .pollingEvery(Duration.ofSeconds(1)),
  Switch.to(Page.whichUrl(endsWith(editUrl()))
)