เพิ่มประสิทธิภาพการทดสอบ Cypress ของคุณด้วย CircleCI

บล็อกนี้จะทำให้คุณเข้าใจวิธีใช้การทดสอบ e2e ของคุณโดยใช้ Cypress และทำการบูรณาการและส่งมอบอย่างต่อเนื่องกับ CircleCI สำหรับการทดสอบของคุณ

เกี่ยวกับไซเปรส

Cypress เป็นเครื่องมือทดสอบส่วนหน้ารุ่นใหม่ สร้างขึ้นสำหรับเว็บแอปสมัยใหม่ Cypress มาพร้อมกับฟีเจอร์ต่างๆ เช่น:

— การเดินทางข้ามเวลา

— ความสามารถในการแก้ไขจุดบกพร่อง

— การรออัตโนมัติ

— ภาพหน้าจอ และวิดีโอ

— การทดสอบข้ามเบราว์เซอร์

และอีกมากมาย…

Cypress มีความแตกต่างทางสถาปัตยกรรม ต่างจากเครื่องมือส่วนใหญ่ตรงที่มันทำงานภายในรันลูปเดียวกันกับแอปพลิเคชันของคุณ มันซิงโครไนซ์กับกระบวนการโหนดและจัดการการสื่อสาร การซิงโครไนซ์ และดำเนินงานในนามของกันและกัน

การตั้งค่าโครงการ

มาเริ่มตั้งค่าโปรเจ็กต์ Cypress พื้นฐานกันดีกว่า

— สร้างโฟลเดอร์ชื่อ cypress-circleci และเริ่มต้นโปรเจ็กต์โหนดของคุณ

$ mkdir cypress-circleci
$ npm init

- ติดตั้ง cypress ด้วยคำสั่ง

npm install cypress --save

- เปิดไซเปรสจากโครงการของคุณ

npx cypress open

- โครงสร้างโฟลเดอร์จะมีลักษณะดังนี้

circleci-cypress
│
└───fixtures
│ │ sampleData.json
│ │
└───integration
│ │ siteVerify.js
│
└───plugins
│ │ index.js
│
└───screenshots
│ │ img1.pmg
│
└───results
│ │ test
│
└───supports
│ │ commands.js
│ │ index.js
|
└───cypress.json
└───package.json

- สร้างการทดสอบพื้นฐานเพื่อตรวจสอบไซต์ “https://dikshitashirodkar.com' และคุณสามารถกำหนดค่า URL พื้นฐานของไซต์ของคุณได้ภายใน cypress.json

{
  "baseUrl": "https://dikshitashirodkar.com/",
  "video": false,
  "reporterOptions": {
    "mochaFile": "cypress/results/tests-[hash].xml",
    "toConsole": true
  }
}

หมายเหตุ: ตามค่าเริ่มต้น cypress จะให้การบันทึกวิดีโอของการทดสอบที่ดำเนินการ ที่นี่เราได้ปิดอย่างชัดเจนโดยใช้การตั้งค่าสถานะวิดีโอ และเพิ่มการกำหนดค่าสำหรับรายงาน xml

ไฟล์ทดสอบด้านล่างใช้ fixtures (ใช้เพื่อจัดเก็บและจัดการข้อมูลการทดสอบ ซึ่งไม่ใช่ไฟล์อื่นนอกจากไฟล์ json)
ไฟล์ฟิกซ์เจอร์ธรรมดาที่มีชื่อ sample.json

{
  "imageName": "dikshita",
  "heading": "QA Talking point"
}

นี่คือการทดสอบขั้นพื้นฐาน integration/test.js การทดสอบประกอบด้วย:

1. เยี่ยมชมเว็บไซต์

2. ตรวจสอบสถานะการตอบสนองของเว็บไซต์เป็น 200

3. ตรวจสอบส่วนหัว ของบล็อกให้เป็น 'QA Talking point'

4. ตรวจสอบไอคอนรูปภาพของบล็อกว่าเป็น 'dikshita'

describe("Verify the website", function() {
  before(function() {
    cy.visit("/")
  })
  beforeEach(function() {
    cy.fixture("sample").then(function(sample) {
      this.sample = sample
    })
  })
  it("verify the status of the site", function() {
    cy.request("/about").should(function(response) {
      expect(response.status).to.eq(200)
    })
  })
  it("verify the heading of the blog", function() {
    cy.get(".head-logo")
      .children("a")
      .should("have.text", this.sample.heading)
  })
  it("verfiy the image icon on the site", function() {
    console.log(this.sample, "printing data")
    cy.get(".profile-img")
      .should("have.attr", "src")
      .and("include", this.sample.imageName)
  })
})

มาดำเนินการทดสอบโดยใช้คำสั่ง:

npm run cypress run --browser chrome

ผลลัพธ์ของผลลัพธ์จะเป็นดังนี้:

Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  tests/verifySite.js                      00:08        3        3        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:08        3        3        -        -        -

เอาล่ะ คุณได้กำหนดค่าและดำเนินการสำเร็จแล้ว...🏅

เรียกใช้ไซเปรสด้วย CircleCI

CircleCI เป็นเครื่องมือบูรณาการและปรับใช้อย่างต่อเนื่อง ซึ่งช่วยให้ทีมรวมโค้ดของตนภายในพื้นที่เก็บข้อมูลและสร้างการทดสอบ “n” ไม่จำกัดครั้งในหนึ่งวัน CircleCI ใช้ Orbs ซึ่งเป็นแพ็คเกจโอเพ่นซอร์สที่แชร์ได้ขององค์ประกอบการกำหนดค่าที่ใช้ซ้ำได้แบบกำหนดพารามิเตอร์ได้ พร้อมด้วยงาน คำสั่ง และตัวดำเนินการ
CircleCI ยังมี Orb สำหรับ cypress เพื่อทดสอบโดยไม่ต้องเสียเวลากำหนดค่า CircleCI นอกจากนี้ยังบันทึกผลลัพธ์และจัดทำ GUI

ข้ามไปกำหนดค่า CircleCI กัน

- สร้างโฟลเดอร์ .circleci ในไดเรกทอรีรากของโครงการของคุณ
- เพิ่มไฟล์ภายในโฟลเดอร์ .circleci เป็น config.yml

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
executors:
  with-chrome:
    resource_class: small
    docker:
      - image: "cypress/browsers:node14.16.0-chrome90-ff88"
workflows:
  build:
    jobs:
      - cypress/install
      - cypress/run:
          requires:
            - cypress/install
          executor: with-chrome
          browser: chrome
          post-steps:
            - run: ls
            - store_test_results:
                path: cypress/results
            - store_artifacts:
                path: cypress/screenshots

หมายเหตุ: วางโปรเจ็กต์ cypress ของคุณลงในระบบควบคุมเวอร์ชัน (github หรือ bitbucket) ในกรณีของเรา เราจะวางมันไว้บน GitHub

ตั้งค่าบัญชี CircleCI ของคุณ

1. คุณสามารถเข้าสู่ระบบพอร์ทัล CircleCI ผ่าน gitHub และคุณจะสามารถเข้าถึงที่เก็บ GitHub ทั้งหมดของคุณภายในหน้าจอรายการโครงการ

2. ในการตั้งค่า Circleci สำหรับโปรเจ็กต์ Git Hub ของคุณ ให้เลือก Setup project จากนั้นจะขอให้คุณเลือกสาขาที่คุณต้องการดำเนินการทดสอบ และควรมี config.yml อยู่ในโฟลเดอร์ .circleci หรืออีกทางเลือกหนึ่งคือสร้างไฟล์ปรับแต่งใหม่

หมายเหตุ:
สำหรับโพสต์บนบล็อกนี้ เรากำลังเรียกใช้ไปป์ไลน์ด้วยตนเอง แต่คุณสามารถทำให้กระบวนการทริกเกอร์ไปป์ไลน์เป็นอัตโนมัติได้อย่างแน่นอน

3. เมื่อคุณตั้งค่าโปรเจ็กต์ ไปป์ไลน์จะถูกทริกเกอร์โดยอัตโนมัติและสามารถมองเห็นความคืบหน้าของการสร้างได้

4. ความสำเร็จของไปป์ไลน์จะมีลักษณะดังนี้:

5. ไปป์ไลน์ที่ล้มเหลวจะมีลักษณะเช่นนี้

6. เราได้เพิ่มการกำหนดค่าเพื่อจัดเก็บทั้งผลการทดสอบและส่วนต่างๆ ไว้ในไฟล์ config.yml ของเรา ดังนั้นเราจึงสามารถดูรายละเอียดการทดสอบที่ล้มเหลวได้ภายในส่วนการทดสอบและลิงก์ภาพหน้าจอของการทดสอบในส่วนสิ่งประดิษฐ์

นั่นคือทั้งหมดสำหรับบล็อกนี้ หวังว่าคุณจะสนุกกับมัน ขอบคุณที่อ่าน…!