Skip to content

Latest commit

 

History

History
84 lines (54 loc) · 3.53 KB

0.md

File metadata and controls

84 lines (54 loc) · 3.53 KB

Pre-requirements

Before we start, make sure the following systems are installed on your computer.

  • git (I'm using version 2.26.2 while writing this lesson)
  • Node.js (I'm using version v14.15.4 while writing this lesson)
  • NPM (I'm using version 6.14.11 while writing this lesson)

Note: I recommend that you use the same or greater versions of the above-mentioned systems.

Note 2: When installing Node.js, NPM is automatically installed, so you don't need to do it yourself.

Note 3: To check which versions of git, Node.js, and NPM you're using, run git --version && node --version && npm --version on your terminal.

Note 4: On the above-list, I left links to downloads all of the requirements.

Cloning the project 🐑

Open the browser, access the following URL https://github.com/wlsf82/cypress-advanced-course, click on the Code button, choose a clone option (HTTPS or SSH), copy the clone link, and on your command line terminal (inside of a directory where you store your software projects), run git clone [paste-the-copied-link-here].

After cloning the project, access it (e.g., cd cypress-advanced-course).

Inside the cypress-advanced-course/ directory, you will have the following sub-directories .git/ (hidden directory), cypress/ and lessons/, and the following files .gitignore (hidden file), cypress.json, LICENSE, packag-lock.json, package.json, and README.md.

Installing the dev dependencies

With the project cloned from GitHub, it's time to install its dev dependencies.

Since such dependencies are already listed in the package.json file, the only thing you need to do is run npm install (or npm i - short version) in the project's root directory.

🧙 This command will download cypress, cypress-localstorage-commands, faker, and standardjs since they're listed as devDependencies.

Run npm test (or npm t - short version) to ensure that everything is working as expected. If everything goes well, you should get a result like this.

> cypress run


...

  Running:  hackerStories.spec.js                                                           (1 of 1)


  Hacker Stories
    ✓ shows the footer (1776ms)
    List of stories
      - shows the right data for all rendered stories
      ✓ shows the next twenty stories after clicking "More" (1215ms)
      ✓ shows 20 stories, I dismiss one, then it shows one less (658ms)
      Order by
        - orders by title
        - orders by author
        - orders by comments
        - orders by points
      Errors
        - shows "Something went wrong ..." in case of a server error
        - shows "Something went wrong ..." in case of a network error
    Search
      ✓ types and hits ENTER (1388ms)
      ✓ types and clicks the submit button (1125ms)
      Last searches
        ✓ searches via the last searched term (1807ms)
        ✓ shows a max of 5 buttons for the last searched terms (2246ms)


  7 passing (10s)
  7 pending


  ...

Additional information

  • cypress is the test automation framework that I'll teach you some advanced functionalities
  • We will use cypress-localstorage-commands to access the browser's localStorage during some of the tests
  • We will use faker to generate random data for one of the tests
  • And standardjs will be used as our linter

Cool, we're done with the pre-requirements. ☑️

Go to lesson 1 to get to know the application under test and the challenges waiting for you.