# Cypress

## End to end testing

* E2E testing is a way to make sure that applications behave as expected and that the flow of data is maintained for all kinds of user tasks and processes. This type of testing approach starts from the end user’s perspective and simulates a real-world scenario.
* In Cypress framework, it can help to simulate the user behaviors , such as browsing website , clicking button, and capture the website content to see whether the requirement is meet or not

{% code title="spec.cy.js" %}

```javascript

describe('template spec', () => {
  it('passes', () => {
    // simulate user action
    // visit page
    cy.visit('https://example.cypress.io')
    // click button
    cy.contains('type').click()
    // assert the url 
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it
    cy.get('.action-email').type('fake@email.com')

    // Capture a part of dom element and assert it
    cy.get('.action-email').should('have.value', 'fake@email.com')
  })
})
```

{% endcode %}

## Component Testing

* For importing the component , it can be used to test the component behavior, ui , etc...

```javascript
import React from 'react'
import RainbowBorderBox from '../../src/RainbowBorderBox'
describe('<RainbowBorderBox/>', () => {
  it('mounts', () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(<RainbowBorderBox/>)
  })
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://petercheng7788.gitbook.io/developer-note/frontend/cypress.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.