Skip to content

Commit d37b13c

Browse files
princebaretto99princebaretto99
committed
Cypress Typescript Updates
1 parent 9935991 commit d37b13c

13 files changed

+3647
-2
lines changed

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
results
3+
log
4+
local.log
5+
cypress/videos
6+
cypress/screenshots
7+
npm_install_debug.log

‎README.md

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,34 @@
1-
# typescript-cypress-browserstack
2-
Creating a sample repo for Cypress typescript
1+
# cypress-typescript-browserstack
2+
3+
## Introduction
4+
5+
Cypress is a next generation front end testing tool built for the modern web. Cucumber is a software tool that supports behavior-driven development (BDD).
6+
7+
This BrowserStack Example repository demonstrates a Cypress framework with parallel testing capabilities. The Cypress test scripts are written for the open source [BrowserStack Demo web application](https://bstackdemo.com) ([Github](https://github.com/browserstack/browserstack-demo-app)).
8+
9+
The Cypress tests are run on different platforms like on-prem and BrowserStack using various run configurations and test capabilities.
10+
11+
## Pre-requisites
12+
13+
You need BrowserStack credentials to be able to run Cypress tests. You have to replace `YOUR_USERNAME` and `YOUR_ACCESS_KEY` in the sample scripts in this repository with your BrowserStack credentials which can be found in your [Account Settings](https://www.browserstack.com/accounts/settings) page.
14+
15+
**Alternatively, you can set the environment variables `BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY` with your credentials and all the scripts in this repository should work fine**
16+
17+
NOTE: **Supported on Node v14+**
18+
19+
## Run Cypress test on BrowserStack
20+
21+
1. Clone this repository
22+
2. Install the dependencies using `npm install`
23+
3. Run the sample script using `npm run sample-test`
24+
25+
## Run sample test on privately hosted websites
26+
27+
Run the sample Local test using `npm run sample-local-test`
28+
29+
## Additional Resources
30+
31+
- View your test results on the [BrowserStack Automate dashboard](https://www.browserstack.com/automate)
32+
- Documentation for writing [Automate test scripts in Cypress](https://www.browserstack.com/docs/automate/cypress)
33+
- [List of Browsers & mobile devices](https://www.browserstack.com/list-of-browsers-and-platforms/cypress_testing) for automation testing on BrowserStack
34+
- For testing public web applications behind IP restriction, [Inbound IP Whitelisting](https://www.browserstack.com/local-testing/inbound-ip-whitelisting) can be enabled with the [BrowserStack Enterprise](https://www.browserstack.com/enterprise) offering

‎browserstack.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"auth": {
3+
"username": "BROWSERSTACK_USERNAME",
4+
"access_key": "BROWSERSTACK_ACCESS_KEY"
5+
},
6+
"browsers": [
7+
{
8+
"browser": "chrome",
9+
"os": "Windows 11",
10+
"versions": [
11+
"latest"
12+
]
13+
},
14+
{
15+
"browser": "firefox",
16+
"os": "Windows 10",
17+
"versions": [
18+
"latest"
19+
]
20+
},
21+
{
22+
"browser": "webkit",
23+
"os": "OS X Ventura",
24+
"versions": [
25+
"latest"
26+
]
27+
}
28+
],
29+
"run_settings": {
30+
"cypress_config_file": "./cypress.config.js",
31+
"project_name": "BStack Project",
32+
"build_name": "browserstack-build-1",
33+
"exclude": [],
34+
"build_tag": "Regression",
35+
"parallels": "5",
36+
"cypress_version": "12.latest",
37+
"npm_dependencies": {
38+
"typescript": "^5.0.4",
39+
"cypress": "^12.12.0",
40+
"@cypress/xpath": "^2.0.3"
41+
},
42+
"package_config_options": {},
43+
"headless": false
44+
},
45+
"connection_settings": {
46+
"local": true,
47+
"local_identifier": "CypressBrowserStackTest",
48+
"local_mode": null,
49+
"local_config_file": null
50+
},
51+
"disable_usage_reporting": false
52+
}

‎cypress.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const { defineConfig } = require("cypress");
2+
3+
module.exports = defineConfig({
4+
experimentalWebKitSupport: true,
5+
e2e: {
6+
setupNodeEvents(on, config) {
7+
// implement node event listeners here
8+
},
9+
},
10+
});

‎cypress/e2e/e2e.cy.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/// <reference types="cypress" />
2+
require('@cypress/xpath');
3+
// Welcome to Cypress!
4+
//
5+
// This spec file contains a variety of sample tests
6+
// for a todo list app that are designed to demonstrate
7+
// the power of writing tests in Cypress.
8+
//
9+
// To learn more about how Cypress works and
10+
// what makes it such an awesome testing tool,
11+
// please read our getting started guide:
12+
// https://on.cypress.io/introduction-to-cypress
13+
14+
describe('Bstack Demo test', () => {
15+
beforeEach(() => {
16+
// Cypress starts out with a blank slate for each test
17+
// so we must tell it to visit our website with the `cy.visit()` command.
18+
// Since we want to visit the same URL at the start of all our tests,
19+
// we include it in our beforeEach function so that it runs before each test
20+
cy.visit('https://bstackdemo.com')
21+
})
22+
23+
it('Add to Cart', () => {
24+
// We use the `cy.get()` command to get all elements that match the selector.
25+
// Then, we use `should` to assert that there are two matched items,
26+
// which are the two default items.
27+
cy.xpath('/html/body/div/div/div/main/div[2]/div[2]/div[4]').click()
28+
cy.get('.float-cart__shelf-container').find('.shelf-item').should('have.length',1)
29+
30+
})
31+
})

‎cypress/e2e/localTest.cy.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/// <reference types="cypress" />
2+
// Welcome to Cypress!
3+
//
4+
// This spec file contains a variety of sample tests
5+
// for a todo list app that are designed to demonstrate
6+
// the power of writing tests in Cypress.
7+
//
8+
// To learn more about how Cypress works and
9+
// what makes it such an awesome testing tool,
10+
// please read our getting started guide:
11+
// https://on.cypress.io/introduction-to-cypress
12+
13+
describe('Bstack Demo test', () => {
14+
beforeEach(() => {
15+
// Cypress starts out with a blank slate for each test
16+
// so we must tell it to visit our website with the `cy.visit()` command.
17+
// Since we want to visit the same URL at the start of all our tests,
18+
// we include it in our beforeEach function so that it runs before each test
19+
cy.visit('http://localhost:8081/')
20+
})
21+
22+
it('should see sample local page', () => {
23+
// We use the `cy.get()` command to get all elements that match the selector.
24+
// Then, we use `should` to assert that there are two matched items,
25+
// which are the two default items.
26+
cy.title().should("equal", "BrowserStack Local Website");
27+
})
28+
})

‎cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/support/commands.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add('login', (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

‎cypress/support/e2e.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/e2e.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>BrowserStack Local Website</title>
8+
</head>
9+
<body>
10+
<h1>Sample Website</h1>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)