コンプリートセットアップガイド


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 or npx 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.


    ハーレイ!あなたのマシンは今サイプレスを使用するセットアップです.それのすべてのビットをお楽しみください、それは本当に素晴らしいツールです.
    サイプレスに関連するどんな質問でも、コメントで彼らを掲示してください.