Email Subscription Form

Saturday, February 29, 2020

More Fun With Cypress

Two weeks ago, I wrote about my first experiences using Cypress.io.  I was intrigued by the fact that it was possible to do http requests using Cypress commands, so this week I decided to see if I could combine API commands with UI commands in the same test.  To be honest, it wasn't as easy as I thought it would be, but I did manage to come up with a small proof-of-concept.


Part of the difficulty here may lie in the fact that there aren't many websites around on which to practice both UI and API automation.  For my experimentation, I decided to use the OWASP Juice Shop, which is a great site for practicing security testing.  I wanted to log into the site using an HTTP command, and then use the token I retrieved from my login to navigate to the site as an authenticated user.

Setting up the HTTP command was pretty easy.  Here's what it looks like:

var token;

describe('I can log in as a user', () => {
    it('Logs in', () => {
        cy.request({
  method: 'POST',
  url: 'https://juice-shop.herokuapp.com/rest/user/login',
  headers: {'content-type':'application/json'},
  body: {
    email: 'foo5@bar.com',
    password: '123456'
  }
})
  .then((resp) => {
    const result = JSON.parse(JSON.stringify(resp.body));
    token = result.authentication.token;
        expect(resp.status).to.eq(200);
    })
});
});

Let's take a look at what's happening here.  First I declare the token variable.  The 'I can log in as a user' and 'Logs in' parts are just the names of the test section and the test.  Then we have the cy.request section.  This is where the http request happens.  You can see the method, the url, the headers, and the body of the request.  Next, there's the then((resp), which shows what the test is doing with the response.  With const result = JSON.parse(JSON.stringify(resp.body)), I'm parsing the body of the response into JSON format and saving it to a result variable.  Then I'm setting the token variable to result.authentication.token.  Finally, with expect(resp.status).to.eq(200) I'm doing a quick assertion that the status code of the response is 200 just to alert me if something didn't come back correctly.

Next, I loaded the web page, and included the token in the browser's local storage so the web page would know I was authenticated:

describe('Is logged in', function() {
  it('Is logged in', function() {
    cy.visit('https://juice-shop.herokuapp.com/#/', {
    onBeforeLoad (win) {
      win.localStorage.setItem('token', token)
    },
  })
    cy.contains('Dismiss').click();
    cy.contains('Your Basket').should('be.visible');
  })
});

With this line: cy.visit('https://juice-shop.herokuapp.com/#/' I'm navigating to the web page.  With the next section:

    onBeforeLoad (win) {
      win.localStorage.setItem('token', token)
    },
  })

I'm telling the browser to put the token I saved into local storage.  There was a popup window with a "Dismiss" button that appeared in the browser, so I closed it with cy.contains('Dismiss').click(). And finally with cy.contains('Your Basket').should('be.visible') I asserted that the link called "Your Basket" was visible, because that link doesn't appear unless the user is authenticated.

My code definitely wasn't perfect, because I noticed that when I manually logged in, I saw my email address in the Account dropdown, but when I logged in through Cypress, the email address was blank.  I also tried doing some other UI tasks, like adding an item to my cart, but I had trouble simply because the application didn't have good element identifiers.  (I so appreciate developers who put identifying tags on their elements!  If your developers do this, please thank them often.)  And there may be irregularities with this application because it was specifically designed to have security holes.

It would be very interesting to see how easy it would be to set up API and UI testing in Cypress when testing an application with normal authentication processes and good element identifiers!  However, I think my experiment showed that it's fairly easy to integrate API and UI tests together in Cypress.

9 comments:

  1. Replies
    1. Great Article Cyber Security Projects projects for cse Networking Security Projects JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. Hello! Hope you are having a good day. Your site has really good posts. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. Thank you so much. Keep up the good work. We can also be helpful in developing your site, as our site provides the best web development tools. Here is the link jsononline


    ReplyDelete
  3. Great content material and great layout. Your website deserves all of the positive feedback it’s been getting تحويل word الى pdf

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hey Guys !

    USA Fresh & Verified SSN Leads with DL Number AVAILABLE with 99.9% connectivity
    All Leads have genuine & valid information

    **HEADERS IN LEADS**
    First Name | Last Name | SSN | Dob | DL Number | Address | City | State | Zip | Phone Number | Account Number | Bank Name | Employee Details | IP Address

    *Price for SSN lead $2
    *You can ask for sample before any deal
    *If anyone buy in bulk, we can negotiate
    *Sampling is just for serious buyers

    ==>ACTIVE, FRESH CC & CVV FULLZ AVAILABLE<==
    ->$5 PER EACH

    ->Hope for the long term deal
    ->Interested buyers will be welcome

    **Contact 24/7**
    Whatsapp > +923172721122
    Email > leads.sellers1212@gmail.com
    Telegram > @leadsupplier
    ICQ > 752822040

    ReplyDelete
  6. Are you interested in trading bitcoin binary and forex trade where you can earn 100% of your investment daily If you invest as low as $200 you will get a profit of $2,000 after 72 hours if you are intrested you can contact him via email: hackintechnology@gmail.com +12132951376(WHATSAPP)

    ReplyDelete
  7. TUTORIALS AVAILABLE FOR
    SPAMMING
    CARDING
    CASHOUTS
    MOBILE DEPOSITS

    -->SPAMMING price == 200$
    >What you need to start spam

    -->CARDING price == 300$ (Includes All Carding)

    How to use eBay Carding, Amazon Carding, Adidas Carding, BITCOIN CARDING, WALMART CARDING, WESTERN UNION CARDING
    WORLD REMIT CARDING METHOD

    >APPLE PAY & ANDROID TAP CASH

    >BANK TRANSFER

    -->DUMPS+PINS price == 85$
    (How to use & create dumps with pins track 1 & 2)
    >HOW TO CASHOUT DUMPS+PINS

    >MOBILE DEPOSIT
    >SAFE SOCKS5 (USA)

    -->SMTP Linux Root
    *--price ==150$--*

    Also SELLING

    >SERVER I.P's price == 200$ in bulk
    >USA EMAILS with Passwords price ==150$ in bulk
    >SSN Fullz with Driving license price == 2$ each

    **Contact 24/7**
    Email > leads.sellers1212@gmail.com
    Telegram > @leadsupplier
    ICQ > 752822040

    ReplyDelete
  8. BE SMART AND BECOME RICH IN LESS THAN 3DAYS....It all depends on how fast 
    you can be to get the new PROGRAMMED blank ATM card that is capable of
    hacking into any ATM machine,anywhere in the world. I got to know about 
    this BLANK ATM CARD when I was searching for job online about a month 
    ago..It has really changed my life for good and now I can say I'm rich and 
    I can never be poor again. The least money I get in a day with it is about 
    $50,000.(fifty thousand USD) Every now and then I keeping pumping money 
    into my account. Though is illegal,there is no risk of being caught 
    ,because it has been programmed in such a way that it is not traceable,it 
    also has a technique that makes it impossible for the CCTVs to detect 
    you..For details on how to get yours today, email the hackers on : (
    atmmachinehackers1@gmail.com ). Tell your 
    loved once too, and start to live large. That's the simple testimony of how 
    my life changed for good...Love you all ...the email address again is ;
    atmmachinehackers1@gmail.com

    ReplyDelete

New Blog Location!

I've moved!  I've really enjoyed using Blogger for my blog, but it didn't integrate with my website in the way I wanted.  So I&#...