### Project Structure for Reusable Setup

Source: https://docs.cypress.io/llm/json/full/app/component-testing/styling-components.json

This example illustrates a recommended project structure that allows for a shared setup file between your application's entry point and Cypress tests.

```bash
> /cypress>   /support>    /component.js> /src>  /main.js>  /main.css>  /setup.js
```

--------------------------------

### Example Project Structure for Styles

Source: https://docs.cypress.io/llm/json/chunked/app/component-testing/styling-components.json

Illustrates a recommended project structure for managing styles and setup files, which can be reused in both your application's main entry point and Cypress test setup.

```bash
> /cypress>
>   /support>
>    /component.js>
> /src>
>  /main.js>
>  /main.css>
>  /setup.js
```

--------------------------------

### Cypress Configuration with baseUrl

Source: https://docs.cypress.io/llm/json/chunked/api/commands/visit.json

Example Cypress configuration files demonstrating the setup of `baseUrl`.

```javascript
const { defineConfig } = require('cypress')
module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.cypress.io',
  },
})

```

```typescript
import { defineConfig } from 'cypress'
export default defineConfig({
  e2e: {
    baseUrl: 'https://example.cypress.io',
  },
})

```

--------------------------------

### Basic CircleCI Setup with Cypress Orb

Source: https://docs.cypress.io/app/continuous-integration/circleci

This configuration installs and caches dependencies, then runs Cypress tests using the Cypress Orb. It's a starting point for integrating Cypress into your CI pipeline.

```yaml
version: 2.1
orbs:
  cypress: cypress-io/cypress@6
workflows:
  build:
    jobs:
      - cypress/run:
          start-command: 'npm run start'
```

--------------------------------

### Basic Session Setup and Usage

Source: https://docs.cypress.io/llm/json/chunked/api/commands/session.json

This example demonstrates how to set up a session for a user and then use it in a test to perform actions like visiting a page and checking account balance.

```javascript
const login = (name) => {
  cy.session(name, () => {
    cy.request({
      method: 'POST',
      url: '/login',
      body: { name, password: 's3cr3t' },
    }).then(({ body }) => {
      window.localStorage.setItem('authToken', body.token)
    })
  })
}
it('should transfer money between users', () => {
  login('user')
  cy.visit('/transfer')
  cy.get('#amount').type('100.00')
  cy.get('#send-money').click()
  login('other-user')
  cy.visit('/account_balance')
  cy.get('#balance').should('eq', '100.00')
})
```

--------------------------------

### Getting the last matched request with cy.get()

Source: https://docs.cypress.io/llm/markdown/app/references/changelog.md

When `cy.get()` is used with a routing alias, it yields the last matched request by default. Special alias properties can be used to return different requests or arrays of requests.

```javascript
cy.get('@users');
```

--------------------------------

### Using `setup.js` in `main.js`

Source: https://docs.cypress.io/app/component-testing/styling-components

Shows how to import and use the `createApp` function from `setup.js` in the application's main entry point (`main.js`).

```javascript
import { createApp } from './setup.js'

ReactDOM.render(createApp())

```

--------------------------------

### Basic GitLab CI Configuration for Cypress

Source: https://docs.cypress.io/app/continuous-integration/gitlab-ci

This basic CI setup uses GitLab CI/CD to run Cypress tests in the Electron browser. It installs dependencies, starts the server, and executes end-to-end tests.

```yaml
stages:
  - test

test:
  image: node:latest
  stage: test
  script:
    # install dependencies
    - npm ci
    # start the server in the background
    - npm start &
    # run Cypress tests
    - npm run e2e

```

--------------------------------

### Install start-server-and-test with bun

Source: https://docs.cypress.io/app/continuous-integration/overview

Install the start-server-and-test module as a development dependency using bun.

```bash
bun add --dev start-server-and-test
```

--------------------------------

### Get Cookies After Logging In - Cypress Example

Source: https://docs.cypress.io/llm/json/chunked/api/commands/getallcookies.json

This example demonstrates how to get all cookies after a user logs in. It assumes prior steps have set up the login process.

```javascript
cy.getCookies().then((cookies) => {
  // do something with the cookies
  cy.log(cookies)
})
```

--------------------------------

### Get siblings of each li

Source: https://docs.cypress.io/llm/json/chunked/api/commands/siblings.json

This example demonstrates how to get all sibling elements of each 'li' element.

```javascript
cy.get('li').siblings()
```

--------------------------------

### Get Document and Perform Actions

Source: https://docs.cypress.io/llm/json/full/api/commands/document.json

Example of retrieving the document object and performing actions on it, such as getting the title.

```javascript
cy.document().then((doc) => {
  // do something with doc
  expect(doc.title).to.equal('Cypress.io:  Kitchen Sink')
})
```

--------------------------------

### Get siblings of element with class active

Source: https://docs.cypress.io/llm/json/chunked/api/commands/siblings.json

This example shows how to get only the sibling elements that have the class 'active'.

```javascript
cy.get('li').siblings('.active')
```

--------------------------------

### Install start-server-and-test with npm

Source: https://docs.cypress.io/app/continuous-integration/overview

Install the start-server-and-test module as a development dependency using npm.

```bash
npm install start-server-and-test --save-dev
```

--------------------------------

### Get function as property

Source: https://docs.cypress.io/llm/json/chunked/api/commands/its.json

This example demonstrates how to get a function as a property using .its() and then assert its type.

```APIDOC
## Get function as property

```javascript
const fn = () => {  return 42}
cy.wrap({ getNum: fn }).its('getNum').should('be.a', 'function')
```
```

--------------------------------

### Example package.json

Source: https://docs.cypress.io/llm/json/full/api/node-events/overview.json

This is an example of a package.json file that includes dependencies which can be required within the `setupNodeEvents` function.

```json
{  "name": "My Project",  "dependencies": {    "debug": "x.x.x"  },  "devDependencies": {    "lodash": "x.x.x"  }}
```

--------------------------------

### Install start-server-and-test with yarn

Source: https://docs.cypress.io/app/continuous-integration/overview

Install the start-server-and-test module as a development dependency using yarn.

```bash
yarn add start-server-and-test --dev
```

--------------------------------

### Get a specific location property

Source: https://docs.cypress.io/api/commands/location

This example demonstrates how to get a specific property of the location object, such as the `pathname`.

```APIDOC
## Get a specific location property
### Description
Get a specific property of the location object by passing its key as an argument.
### Method
`cy.location(key)
### Endpoint
`cy.location(key)`
### Parameters
#### Path Parameters
- **key** (String) - Required - A key on the location object. Returns this value instead of the full location object.
### Yields
`cy.location(key)` yields the value of the location property as a string.
### Request Example
```javascript
cy.visit('http://localhost:3000/admin')
cy.location('pathname').should('eq', '/login')
```
```

--------------------------------

### Install start-server-and-test Module

Source: https://docs.cypress.io/llm/json/chunked/app/continuous-integration/overview.json

Install the `start-server-and-test` module as a development dependency for npm, yarn, pnpm, or bun.

```bash
npm install start-server-and-test --save-dev
```

```bash
yarn add start-server-and-test --dev
```

```bash
pnpm add --save-dev start-server-and-test
```

```bash
bun add --dev start-server-and-test
```

--------------------------------

### Get the location object

Source: https://docs.cypress.io/api/commands/location

This example demonstrates how to get the entire location object and make assertions about its properties.

```APIDOC
## Get the location object
### Description
Get the global `window.location` object of the page that is currently active.
### Method
`cy.location()
### Endpoint
`cy.location()`
### Yields
`cy.location()` yields the location object with the following properties: `hash`, `host`, `hostname`, `href`, `origin`, `pathname`, `port`, `protocol`, `search`, `toString`
### Request Example
```javascript
cy.visit('http://localhost:8000/app/index.html?q=dan#/users/123/edit')
cy.location().should((loc) => {
  expect(loc.hash).to.eq('#/users/123/edit')
  expect(loc.host).to.eq('localhost:8000')
  expect(loc.hostname).to.eq('localhost')
  expect(loc.href).to.eq('http://localhost:8000/app/index.html?q=dan#/users/123/edit')
  expect(loc.origin).to.eq('http://localhost:8000')
  expect(loc.pathname).to.eq('/app/index.html')
  expect(loc.port).to.eq('8000')
  expect(loc.protocol).to.eq('http:')
  expect(loc.search).to.eq('?q=dan')
  expect(loc.toString()).to.eq('http://localhost:8000/app/index.html?q=brian#/users/123/edit')
})
```
```

--------------------------------

### Basic Bitbucket Pipelines Setup with Cypress Docker Image

Source: https://docs.cypress.io/app/continuous-integration/bitbucket-pipelines

This configuration sets up Bitbucket Pipelines to run Cypress tests using a pre-built Cypress Docker image. It installs dependencies, starts the application server in the background, waits for the server to be ready, and then executes Cypress tests in Firefox.

```yaml
image: cypress/browsers:22.15.0

pipelines:
  default:
    - step:
        script:
          # install dependencies
          - npm ci
          # start the server in the background
          - npm run start &
          # wait for the server to respond (replace with your server's URL)
          - npx wait-on http://localhost:3000
          # run Cypress tests in Firefox
          - npx cypress run --browser firefox

```

--------------------------------

### get Command

Source: https://docs.cypress.io/llm/json/chunked/index.json

The `get` command is used to select DOM elements. It includes syntax, arguments, yields, and examples.

```APIDOC
## get Command

### Description

This command is used to select DOM elements. It covers syntax, arguments, yields, and provides examples.

### Method

Not specified (likely a programmatic call within a testing framework)

### Endpoint

Not applicable (this appears to be an SDK/library command, not an HTTP endpoint)

### Parameters

#### Arguments

Details on arguments are provided, but specific arguments are not listed in the source text.

### Request Example

Not applicable

### Response

Not specified
```

--------------------------------

### Install start-server-and-test with pnpm

Source: https://docs.cypress.io/app/continuous-integration/overview

Install the start-server-and-test module as a development dependency using pnpm.

```bash
pnpm add --save-dev start-server-and-test
```

--------------------------------

### Basic Session Setup with Visit

Source: https://docs.cypress.io/llm/markdown/api/commands/session.md

Demonstrates a basic `cy.session()` setup where `cy.visit()` is called immediately after the session is established. This approach is suitable when the subsequent test directly follows the login process on the same page.

```javascript
const login = (name) => {
  cy.session(name, () => {
    cy.visit('/login')
    cy.get('[data-test=name]').type(name)
    cy.get('[data-test=password]').type('s3cr3t')
    cy.get('#submit').click()
    cy.url().should('contain', '/home')
  })
  cy.visit('/home')
}
beforeEach(() => {
  login('user')
})
it('should test something on the /home page', () => {
  // assertions
})
it('should test something else on the /home page', () => {
  // assertions
})
```

--------------------------------

### cy.location(key)

Source: https://docs.cypress.io/llm/json/chunked/api/commands/location.json

Gets a specific property (key) from the location object of the window. For example, you can get the 'host' or 'port'.

```APIDOC
## cy.location(key)

### Description
Gets a specific property (key) from the location object of the window. For example, you can get the 'host' or 'port'.

### Arguments
* **key _(String)_**: A key on the location object. Returns this value instead of the full location object.

### Usage
```javascript
cy.location('host')
cy.location('port')
```

### Yields
`cy.location()` yields the value of the specified location property as a string.
```

--------------------------------

### Get the element that is focused

Source: https://docs.cypress.io/llm/json/chunked/api/commands/focused.json

This example shows how to get the currently focused element and then use `.then()` to perform an action with it.

```APIDOC
## cy.focused()

### Description

Get the element that is currently focused.

### Usage

```
cy.focused()
```

### Examples

#### Get the element that is focused

```javascript
cy.focused().then(($el) => {
  // do something with $el
})
```

#### Blur the element with focus

```javascript
cy.focused().blur()
```

#### Make an assertion on the focused element

```javascript
cy.focused().should('have.attr', 'name', 'username')
```

### Rules

*   `cy.focused()` requires being chained off a command that yields DOM element(s).

### Assertions

*   `cy.focused()` will automatically retry until the element(s) exist in the DOM.
*   `cy.focused()` will automatically retry until all chained assertions have passed.

### Timeouts

*   `cy.focused()` can time out waiting for the element(s) to exist in the DOM.
*   `cy.focused()` can time out waiting for assertions you've added to pass.

```

--------------------------------

### Start server and wait for it to be ready

Source: https://docs.cypress.io/llm/json/chunked/app/continuous-integration/overview.json

Start your server in the background and use wait-on to pause execution until the specified URL is available.

```bash
npm start & wait-on http://localhost:8080
```

--------------------------------

### Get the root DOM element

Source: https://docs.cypress.io/api/commands/root

This example demonstrates how to get the root DOM element, which is typically the <html> element.

```javascript
cy.root() // Yield root element <html>
```

--------------------------------

### Staging Configuration Example

Source: https://docs.cypress.io/api/node-events/configuration-api

Example of a `staging.json` configuration file, setting the `baseUrl` and an environment-specific variable.

```json
// cypress/config/staging.json  
  
{
  "baseUrl": "https://staging.acme.com",
  "env": {
    "something": "staging"
  }
}

```

--------------------------------

### Install extract-cloud-results Module

Source: https://docs.cypress.io/accessibility/guides/results-api

Install the module in your CI environment's install step. Use `--force` to ensure you get the latest version. Do not check this module in as a dependency.

```bash
npm install --force https://cdn.cypress.io/extract-cloud-results/v1/extract-cloud-results.tgz  

```

--------------------------------

### Centralized Setup File for Styles and App Creation

Source: https://docs.cypress.io/llm/json/chunked/app/component-testing/styling-components.json

Demonstrates a `setup.js` file that centralizes imports for CSS, fonts, and application setup logic, making it reusable for both the main application and Cypress tests.

```javascript
import '~normalize/normalize.css'
import 'font-awesome'
import './main.css'

export const createStore = () => {
  return /* store */
}

export const createRouter = () => {
  return /* router */
}

export const createApp = () => {
  return <App router={createRouter()} store={createStore()}></App>
}
```

--------------------------------

### Development Configuration Example

Source: https://docs.cypress.io/api/node-events/configuration-api

Example of a `development.json` configuration file, setting the `baseUrl` and an environment-specific variable.

```json
// cypress/config/development.json  
  
{
  "baseUrl": "http://localhost:1234",
  "env": {
    "something": "development"
  }
}

```

--------------------------------

### Get the element that is focused

Source: https://docs.cypress.io/llm/json/chunked/api/commands/focused.json

This example demonstrates how to get the currently focused element. It's useful for verifying focus states in your application.

```javascript
cy.focused()
  .should('have.id', 'my-input')

```

--------------------------------

### Get a function as a property

Source: https://docs.cypress.io/api/commands/its

Retrieve a function assigned as a property to a yielded object. This example shows how to get a function and assert its type.

```javascript
const fn = () => {
  return 42
}

cy.wrap({ getNum: fn }).its('getNum').should('be.a', 'function')
```

--------------------------------

### Reusing Setup Logic in `setup.js`

Source: https://docs.cypress.io/app/component-testing/styling-components

Demonstrates how to centralize style and application setup logic in a `setup.js` file for reuse in both the application and Cypress component tests.

```javascript
import '~normalize/normalize.css'
import 'font-awesome'
import './main.css'

export const createStore = () => {
  return /* store */
}

export const createRouter = () => {
  return /* router */
}

export const createApp = () => {
  return <App router={createRouter()} store={createStore()}></App>
}

```

--------------------------------

### Get vs Find

Source: https://docs.cypress.io/llm/json/chunked/api/commands/get.json

Explains the difference between cy.get() and .find(), highlighting that cy.get() starts from cy.root() while .find() starts from the current subject.

```APIDOC
### Get vs Find

The `cy.get` command always starts its search from the [cy.root](/llm/markdown/api/commands/root.md) element. In most cases, it is the `document` element, unless used inside the [.within()](/llm/markdown/api/commands/within.md) command. The [.find](/llm/markdown/api/commands/find.md) command starts its search from the current subject.

```
<div class="test-title">cy.get vs .find</div><section id="comparison">  <div class="feature">Both are querying commands</div></section>
```

```
cy.get('#comparison')  .get('div')  // finds the div.test-title outside the #comparison  // and the div.feature inside  .should('have.class', 'test-title')  .and('have.class', 'feature')cy.get('#comparison')  .find('div')  // the search is limited to the tree at #comparison element  // so it finds div.feature only  .should('have.length', 1)  .and('have.class', 'feature')
```
```

--------------------------------

### QA Configuration Example

Source: https://docs.cypress.io/api/node-events/configuration-api

Example of a `qa.json` configuration file, setting the `baseUrl` and an environment-specific variable.

```json
// cypress/config/qa.json  
  
{
  "baseUrl": "https://qa.acme.com",
  "env": {
    "something": "qa"
  }
}

```

--------------------------------

### CircleCI Configuration for Cypress Browser Installation

Source: https://docs.cypress.io/app/guides/migration/playwright-to-cypress

Configure your CircleCI workflow to automatically install browser binaries for Cypress tests. This example shows how to enable browser installation and specify the Cypress command.

```yaml
version: 2.1  
orbs:  
  cypress: cypress-io/cypress@6  
workflows:  
  build:  
    jobs:  
      - cypress/run:  
          install-browsers: true  
          start-command: 'npm start'  
          cypress-command: 'npx cypress run --browser chrome'  

```

--------------------------------

### After: Integrated Setup in cypress.config.js

Source: https://docs.cypress.io/llm/json/chunked/app/references/migration-guide.json

Shows how to integrate `setupNodeEvents` and `devServer` directly within `cypress.config.js` for component and e2e testing.

```javascript
const { defineConfig } = require('cypress')
module.exports = defineConfig({
  component: {
    devServer(cypressConfig) {
      // component testing dev server setup code
    },
    setupNodeEvents(on, config) {
      // component testing node events setup code
    },
  },
  e2e: {
    setupNodeEvents(on, config) {
      // e2e testing node events setup code
    },
  },
})
```

--------------------------------

### Install Cypress Extract Cloud Results

Source: https://docs.cypress.io/llm/json/chunked/accessibility/guides/results-api.json

Install the `@cypress/extract-cloud-results` module in your CI install step. Use `--force` to ensure you get the latest version. Do not check this module into your project dependencies.

```bash
npm install --force https://cdn.cypress.io/extract-cloud-results/v1/extract-cloud-results.tgz
```

--------------------------------

### Configure start-server-and-test for GET requests

Source: https://docs.cypress.io/app/continuous-integration/overview

Use start-server-and-test with an explicit GET method for servers that do not respond to HEAD requests.

```json
{
  "scripts": {
    "test": "start-server-and-test start http-get://localhost:3030 cy:run"
  }
}
```

--------------------------------

### Cypress: Get Single DOM Elements

Source: https://docs.cypress.io/llm/json/chunked/app/guides/migration/protractor-to-cypress.json

Examples of how to get single DOM elements using Cypress commands like `cy.get` and `cy.contains`.

```javascript
// Get an element
cy.get('h1')
// Get an element using a CSS selector.
cy.get('.my-class')
// Get an element with the given id.
cy.get('#my-id')
// Get an element using an input name selector.
cy.get('input[name="field-name"]')
//Get an element by the text it contains within a certain CSS selector
cy.get('.my-class').contains('text')
//Get the first element containing a specific text (available for any element)
cy.contains('text')
```

--------------------------------

### Production Configuration Example

Source: https://docs.cypress.io/api/node-events/configuration-api

Example of a `production.json` configuration file, setting the `baseUrl` and an environment-specific variable.

```json
// cypress/config/production.json  
  
{
  "baseUrl": "https://production.acme.com",
  "env": {
    "something": "production"
  }
}

```

--------------------------------

### Get property from an object

Source: https://docs.cypress.io/api/commands/its

Chain .its() off a yielded object to retrieve the value of a specific property. This example demonstrates getting the 'age' property.

```javascript
cy.wrap({ age: 52 }).its('age').should('eq', 52)
```

--------------------------------

### Open Cypress with Empty Configuration

Source: https://docs.cypress.io/app/references/module-api

A minimal example of opening Cypress using `cypress.open({})`. This will launch Cypress with default configurations.

```javascript
// e2e-open-tests.js
const cypress = require('cypress')

cypress.open({})
```

--------------------------------

### Solid.js Mount Adapter Example

Source: https://docs.cypress.io/llm/json/chunked/app/component-testing/custom-frameworks.json

This Solid.js mount adapter demonstrates how to render a component using `cy.mount()`. It includes setup for rendering and cleanup between tests.

```javascript
import { getContainerEl, setupHooks } from '@cypress/mount-utils'
import { render } from 'solid-js/web'

let dispose

function cleanup() {
  dispose?.()
}

/**
 * @param {() => JSX.Element} - component to render
 */
export function mount(component, options = {}) {
  // Retrieve root DOM element that Cypress has prepared for this test
  const root = getContainerEl()
  dispose = render(() => component, root)

  // Wait until next microtick to ensure any async render logic has executed
  return cy.wait(0, { log: false }).then(() => {
    if (options.log !== false) {
      Cypress.log({
        name: 'mount',
        message: 'Mounted component',
      })
    }
  })
}

// Cleanup between each test
setupHooks(cleanup)

```

--------------------------------

### GitLab CI Install Job for Parallelization

Source: https://docs.cypress.io/llm/markdown/app/continuous-integration/gitlab-ci.md

This snippet defines an 'install' job within the 'build' stage, responsible for installing and caching dependencies. This setup is a prerequisite for parallel test execution in GitLab CI.

```yaml
stages:
  - build
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .npm/
install:
  stage: build
  script:
    - npm ci
```

--------------------------------

### Overwrite Cypress 'get' Query in JavaScript

Source: https://docs.cypress.io/llm/markdown/api/cypress-api/custom-queries.md

This example demonstrates overwriting the built-in 'get' query to log arguments and the subject passed to the inner function.

```javascript
Cypress.Commands.overwriteQuery('get', function (originalFn, ...args) {  console.log('get called with args:', args)  const innerFn = originalFn.apply(this, args)  return (subject) => {    console.log('get inner function called with subject:', subject)    return innerFn(subject)  }})
```

--------------------------------

### Visit Example Application in beforeEach

Source: https://docs.cypress.io/api/commands/visit

Use cy.visit() in a beforeEach hook to set up the application state before each test.

```javascript
beforeEach(() => {
  cy.visit('https://example.cypress.io/commands/viewport')
})

```