コンプリートセットアップガイド
This blog post is a simple and easy guide for the first time Cypress users, who wish to setup Cypress on their Windows machines.
環境設定:
- Install node.js and Set node_home (Open Environment Variables and add the node bin folder path to Paths).
Install Visual Studio Code a.k.a VS Code(Recommended IDE for JS/TS projects.
Install plugins highlighted in image below to VS Code, by going to plugins tab.
サイプレスのインストールと設定.
- Create a project folder (Note: Don't name it as Cypress).
Let's says you named it: 'CypressAutomationProject'.
- Open the project folder in VS Code.
- In VS Code terminal, run a command -
npm init
.
- Enter the package name and just hit enter for other options leaving them blank.
This will create a new package.json file in your project folder.
- In VS Code terminal, run a command -
npm install --save-dev cypress
.This will install the latest Cypress version locally as a dev dependency for your project.
node_modules folder will be created in main project folder.
Note: At this moment you won't be able to see the Cypress folder in your project folder. This is a bit tricky, as the suspense reveals in the next command.
- In VS Code terminal, run a command -
./node_modules/.bin/cypress open
ornpx cypress open
.
When you run this command, the Cypress Test Runner is opened, and now you can see a Cypress folder created in your project folder.
You can click on any of the spec file listed in test runner, and see Cypress in action. ( I will include the details of test runner in my next blog article).
プロジェクトの設定
これらの設定は、サイプレスプロジェクトの重要な側面として機能します.
メインの3つの設定ファイルがあります.
1 ) jsconfig.JSON
- Not present by default, need to create.
Therefore the step here is to create a jsconfig.json file under main project folder - 'CypressAutomationProject'.
Enter below code & Save the file:
{
"include": [
"./node_modules/cypress",
"cypress/**/*.js"
]
}
NOTE: The definition in this file helps us to populate all cypress commands (methods) to be used in project spec files (i.e. Test Scripts).
2)サイプレス.JSON
Present, nested under cypress folder inside main project folder. (Project Folder > cypress > cypress.json).
- We use this file to view default settings or update the default project settings (Closely related to Cypress).
The settings can be viewed on Cypress Test Runner under Settings tab.
サイプレスの
{
"$schema": "https://on.cypress.io/cypress.schema.json"
}
- This acts as an intellisense that populates all cypress settings automatically (After type double quotes you can see the list).
3)パッケージ.JSON
Present, nested under main project folder. (Project Folder > cypress > package.json).
This is related to Node.js, where devDependencies and Scripts can be defined.
We are going to define scripts in this file to run the cypress in Head and Headless mode.
Remove the default test script present and enter below lines lines of code under the scripts object and save the file.
{
"scripts" : {
"cy:open": "./node_modules/.bin/cypress open",
"cy:run": "./node_modules/.bin/cypress run"
}
}
To run the scripts in Head mode, run command:
npm run cy:open
.
(Note: This actually opens up test runner).To run the scripts in Headless mode, run command:
npm run cy:run
.
ハーレイ!あなたのマシンは今サイプレスを使用するセットアップです.それのすべてのビットをお楽しみください、それは本当に素晴らしいツールです.
サイプレスに関連するどんな質問でも、コメントで彼らを掲示してください.
Reference
この問題について(コンプリートセットアップガイド), 我々は、より多くの情報をここで見つけました https://dev.to/aonkar/cypress-complete-setup-guide-5d1cテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol