Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cy.route() doesn't recognize % sign #2372

Closed
RikBoeykens opened this issue Aug 20, 2018 · 8 comments

Comments

5 participants
@RikBoeykens
Copy link

commented Aug 20, 2018

Current behavior:

When an XHR request to a route with a param that contains a % sign is done, a route that's configured to look for this request doesn't see it. Note that when I try this in my environment I can actually see the XHR request going out, when I try to reproduce it based on the example I can't even see the XHR request.

Desired behavior:

Routes with a % sign in the param are recognized.

Steps to reproduce:

See branch https://github.com/RikBoeykens/cypress-test-tiny/tree/route-percentage-ssie

Versions

Cypress 3.1.0

@covertbert

This comment has been minimized.

Copy link

commented Aug 20, 2018

On a similar vein, if I try to target a data-attribute with cy.get() and the attribute contains a forward slash it returns the same error.

e.g. cy.get('[data-test-id=Form/input]') returns the following error: Error: Syntax error, unrecognized expression: [data-test-id=Form/input]

Edit: Just actually read @RikBoeykens post properly and realised he's talking about something different. Regardless, escaping my forward slash with a double backslash fixed my issue and I guess I may as well leave this here for anyone else.

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Jan 28, 2019

Hey @RikBoeykens, I was able to recreate this issue. The actual request does not go out from within the Cypress test runner on click of the button. Furthermore, the actual request does go out in a separate tab from within the Cypress browser.

I've also confirmed that removing the single % character from the AJAX request fixed the issue.

This is quite weird and is definitely a bug.

JS Code for issuing request

  $('.network-post').on('click', (e) => {
    e.preventDefault()
    postComment(e)
  })

  // begin: Handle our route logic -------------
  let root = 'https://jsonplaceholder.typicode.com'

  function postComment () {
    debugger
    $.ajax({
      url: `${root}/comments?param=foo%bar`,
      method: 'POST',
      data: {
        name: 'Using POST in cy.route()',
        email: 'hello@cypress.io',
        body: 'You can change the method used for cy.route() to be GET, POST, PUT, PATCH, or DELETE',
      },
    }).then(() => {
	  // this debugger is never hit within Cypress
	  // but always hit within separate Cypress tab or outside Cypress.
      debugger 
      $('.network-post-comment').text('POST successful!')
    })
  }

Failing test

cy.visit('http://localhost:8080/commands/network-requests')
cy.server()
cy.route('POST', '/comments').as('postComment')

cy.get('.network-post').click()
cy.wait('@postComment')
@flotwig

This comment has been minimized.

Copy link
Member

commented Mar 26, 2019

It looks like it's related to URL encoding. % is typically used to escape special characters in URLs, so using it in this fashion could be considered incorrect. In particular it seems like something is trying to URL-decode /comments?param=foo%bar, which means it's trying to convert %ba to a character, which will fail since it's not a valid character.

%25 is the URL encoding for the % character. If Jennifer's test case is run with /comments?param=foo%25bar instead, it works as expected and the .wait('@postComment') passes.

@divmgl

This comment has been minimized.

Copy link

commented Jun 22, 2019

This may not be related, but I ran into a URL encoding issue as well. Say I have a URL request that looks like this:

/surveys/customer?email=john%40doe.com

Stubbing it in Cypress by doing:

cy.route('GET', '/surveys/customer?email=john%40doe.com', 'fixture:example.json')

Does not work. Cypress actually looks for:

/surveys/customer?email=john@doe.com

So changing to the decoded string is necessary:

cy.route('GET', '/surveys/customer?email=john@doe.com', 'fixture:example.json')

Is this intended behavior? @jennifer-shehane

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Jun 24, 2019

@divmgl Yeah, this is intended, but should likely be better documented.

I created a new issue in our docs to document using decoded strings here: cypress-io/cypress-documentation#1806. Our documentation is open source and contributions are welcome. 😄

@flotwig

This comment has been minimized.

Copy link
Member

commented Jun 25, 2019

I haven't touched this issue in a few months since I was unsure of how to "fix" the problem.

Maybe we should just warn whenever we detect that a user has URL encoding in their url?

if (decodeURI(url) !== url)...

Warning: A URL with percent-encoded characters was passed to cy.route(), but cy.route() expects a decoded URL. Did you mean to pass "http://their-decoded-url"?

Thoughts?

@cypress-bot

This comment has been minimized.

Copy link

commented Jul 9, 2019

The code for this is done in cypress-io/cypress#4561, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot

This comment has been minimized.

Copy link

commented Jul 9, 2019

Released in 3.4.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.