Lesson 15.1 - BDD with Cypress - Refactor
Building on the previous lesson we can add a solution to Challenge 3 - Bonus Payload in a new feature file dom_xss.feature:
Feature: Juice Shop is susceptible to XSS attacks
Scenario: Haxxor can inject a payload into the page
Given Haxxor goes to the Juice Shop
When she searches for "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" allow=\"autoplay\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/771984076&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true\"></iframe>"
Then she sees she has solved the "Bonus Payload" challenge
The steps in this scenario are all generic, so we can add the step definitions to common/steps.js:
import { Given } from "cypress-cucumber-preprocessor/steps";
import homePage from "../pages/HomePage.cy";
Given("Haxxor goes to the Juice Shop", () => {
homePage.navigate();
});
When("she searches for {string}", searchTerm => {
homePage.enterSearchTerm(searchTerm);
});
Then("she sees she has solved the {string} challenge", challengeName => {
cy.expectChallengeSolved({ challenge: challengeName});
});
✔️ Note that I am reusing the
cy.expectChallengeSolvedcommand already defined insupport/commands/tsrather than scraping the Score Board page.
We add enterSearchTerm() to HomePage.cy.js:
enterSearchTerm(searchTerm) {
cy.get("#searchQuery").click();
cy.get("app-mat-search-bar input")
.type(searchTerm)
.type("{enter}");
}
And we can see a successful run in CI:
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────
│ ✔ basic.feature 00:01 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────
│ ✔ dom_xss.feature 00:04 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────
│ ✔ score_board.feature 00:03 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────
✔ All specs passed! 00:10 3 3 - - -