Topic 2: Introduction to Cypress.io


Assignment: Creating Test Specs and Executing Basic Commands in Cypress.io 

Objective:

Apply the knowledge gained in the lesson on Cypress.io basics and element locating and command execution by creating test specs and executing basic commands on the Example Cypress website.

Your Role:

  1. Create a new test spec file:
    1.  Inside the “cypress/e2e” folder in your Playground project, create a new file named “lesson2_spec.cy.js” (or any suitable name).
  2. Write test cases:
    1. In the newly created spec file, write test cases to cover the following scenarios after navigating to the following web page https://example.cypress.io/ :
      1. Verify that the h1 header is visible on the page.
      2. Click the “Querying” link and use a location strategy to get a button on the page. Assert that it is visible and then click on it.
      3. Click on the “Actions” link and type an email into the email address input.
      4. Create your own test.
  3. Locate elements and execute commands:
    1. Utilize the element locating strategies discussed in the lesson (CSS selectors, XPath, etc.) to locate the necessary elements for each test case.
    2. Use the appropriate Cypress commands (e.g., `cy.get()`, `cy.click()`, `cy.type()`, etc.) to perform actions and make assertions within your test cases.
  4. Execute the test specs:
    1. Load the test file in Cypress and run it. 
  5. Observe the test execution:
    1. Watch as Cypress interacts with the Example Cypress website, executing the test cases you have written.
    2. Take note of any failures or errors encountered during the execution.
  6. Iterate and refine:
    1. Review the test results and modify your test cases as needed to address any issues encountered.
    2. Once all tests are passing, take a screenshot of your test spec.

Submission:

  1. In the space provided below, upload:
    1. A screenshot of your spec file code in the editor.
    2. The screenshot of your passing test run from Cypress.

Cypress.io:

VS Code:

Code Snippet:

describe('template spec', () => {

  it('passes', () => {

    cy.visit('https://example.cypress.io')

  })

})

References:

Skip to content