cy.wrap().its()... doesn't work when the value in .its() contains a period

Question

I am looking to extract a URL parameter from the current URL I'm testing with Cypress. I was able to basically get the answer from this SO post, however, my extracted values are not available to me when I use Cypress's .its() command. The parameters in the url all have periods in them, and I believe this is the cause for my error. Here is my custom Cypress Command I'm building:

Cypress.Commands.add('getParmsCommand', function(value) {
cy.url().as('url')

cy.then( () => {
  cy.log(this.url)
  const kvPairArray = this.url.toString().split('?')[1].toString().split('&')
  const paramObj = {}
  kvPairArray.forEach(param => {
    cy.log(param)
    //default 'value' to 0 if it doesn't exist
    const [ key, value="0" ] = param.split('=')
    paramObj[key] = value
  })
  //forcefully adding a debug element to the key value store for testing
  paramObj['beverage'] = 'soda'

cy.wrap(paramObj)
  .its('timeline.ws')                                   //doesn't work
  // .its(`${Cypress.$.escapeSelector('timeline.ws')}`) doesn't work
  // .its('timeline\.ws')                               doesn't work
  // .its('"timeline.ws"')                              doesn't work
  // .its('beverage')                                   this DOES work!
  .then(parmVal => {
    cy.log(parmVal)
})

Here is the relevant part of the URL that I'm trying to extract from:

timeline.ws=3600000&timeline.to&timeline.fm&timeline.ar=false

You can see from the error that Cypress is only looking for the id timeline, NOT timeline.ws; it completely ignores everything after the period, and thus, never finds my parameter.

I saw there was a similar error with Cypress's .get() function back in 2018.

I am new to both javascript and Cypress, so I hope it's just a weird easy thing I'm overlooking. Any advice or educated guesses are greatly welcome at this point!

Thank you.

Have you console.log your `paramObj` to check it is working correctly? — jjhelguero, Nov 22 '22 at 18:57
Is there a need to use the object in that way? Could you not just wrap `paramObj['timeline.ws']`? — agoff, Nov 22 '22 at 19:19
BTW take a look at [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) as an alternative `paramObj` constructor. — TesterDick, Nov 22 '22 at 19:28

TesterDick · Accepted Answer · 2022-11-22T20:10:52.897

2

.its() is just a shorthand for property extraction. Since it fails with the period, you could instead use bracket notation in a .then().

cy.wrap(paramObj)
  .then(paramObj => paramObj['timeline.ws'])

or just

cy.wrap(paramObj['timeline.ws'])

Playing around with the URL constructor

const urlString = 'http://example.com?timeline.ws=3600000&timeline.to&timeline.fm&timeline.ar=false'
const url = new URL(urlString)

cy.wrap(url.searchParams.get('timeline.ws'))
  .should('eq', '3600000')

cy.wrap(url.searchParams.get('timeline.to'))
  .should('be.empty')

cy.wrap(url.searchParams.get('timeline.ar'))
  .should('eq', 'false')

edited Nov 22 '22 at 20:10

answered Nov 22 '22 at 19:20

TesterDick

3,830
5
18

Yes! Thank you @TesterDick for the in depth answer. Referencing the paramObj['timeline.ws'] is the route I'm going. Works exactly as I need it to. – CatsAndCode Nov 22 '22 at 20:44

cy.wrap().its()... doesn't work when the value in .its() contains a period

1 Answers1