PostgreSQL 데이터베이스에 Cypress 연결

Cypress Discord 채널에서 자주 묻는 질문 중 하나는 다음과 같습니다. Cypress 프로젝트를 설정하고 데이터베이스에 연결하는 방법. 이번 주에 저는 Postgres, Oracle 및 Microsoft SQL에 대한 질문 팝업을 보았습니다. 이 때문에 다양한 데이터베이스와 Cypress를 사용하여 데이터베이스에 연결하는 방법을 설명하는 작은 시리즈를 만들 생각이었습니다.
첫 번째 블로그에서는 가장 쉬운 PostgreSQL부터 시작하겠습니다.

설명을 건너뛰고 결과를 보려면 내 GitHub 프로젝트https://github.com/Xvier/cypress-postgres-demo로 바로 이동하십시오.

시작하기 위한 전제 조건:

사이프러스 프로젝트

cy.task의 기본 지식

Postgres 데이터베이스

PG nodejs 라이브러리

먼저 데이터베이스를 설정합시다. 이 예에서는 Docker를 사용합니다. 그러나 필요에 따라 Postgres를 설치하거나 클라우드 공급자를 사용하는 것은 자유입니다.

FROM postgres
ENV POSTGRES_USER cypress_admin
ENV POSTGRES_PASSWORD cypressrules
ENV POSTGRES_DB cypress

데이터베이스를 시작하려면 컨테이너를 만들고 다음 명령으로 실행해야 합니다.

docker build -t mydatabase .  
docker run -p 5432:5432 mydatabase:latest 

모두 실행 중이면 데이터베이스가 온라인 상태이고 터미널에 다음 메시지가 표시됩니다. 데이터베이스 시스템이 연결을 수락할 준비가 되었습니다.

새 Cypress 프로젝트를 만들고 Postgres 클라이언트를 설치한 다음 Cypress를 엽니다.

npm init -y 
npm install -D cypress pg
npx cypress open --e2e --browser=chrome

postgres.cy.js라는 e2e 폴더에 새 사양 파일을 생성하겠습니다.

describe('We will make a connection with Postgres, () => {
  it('First connection', () => {

  })
})

그렇다면 데이터베이스에 어떻게 연결합니까? 이를 위해서는 cypress task를 활용해야 합니다. cy.task()를 사용하여 노드 코드를 실행할 수 있습니다.
노드 라이브러리의 예:

운영 체제에 파일을 쓰는 FS

데이터베이스를 호출하는 PG

암호를 해시하는 bcrypt

그렇다면 어떻게 작업을 설정해야 할까요?
cypress.config.js 파일에 다음 코드를 추가합니다.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("task", {
        connectDB(){
          return "Inside our task"
        }
      })
    },
  },
});

우리는 connectDB라는 작업을 만들었고 이것은 우리 작업 안에 문자열을 반환할 것입니다.

Cypress 테스트에서 이제 다음 코드를 테스트에 추가하고 Cypress에서 출력을 봅니다.

cy.task("connectDB").then(cy.log)

cy.log는 문자열 Inside our task를 생성합니다.



이제 이것이 작동한다는 것을 알았으므로 데이터베이스에 연결하고 현재 데이터베이스 날짜를 가져오도록 작업 코드를 변경할 수 있습니다.

데이터베이스에 연결하도록 작업을 변경하겠습니다. 다음 코드는 DockerFile에 설정한 자격 증명을 사용하여 로컬 호스트에 연결합니다.

Postgres 데이터베이스에 연결하는 방법을 알아보려면 문서를 확인할 수도 있습니다. https://node-postgres.com/

const { defineConfig } = require("cypress");
const { Client } = require('pg')
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("task", {
        async connectDB(){
          const client = new Client({
            user: "cypress_admin",
            password: "cypressrules",
            host: "localhost",
            database: "cypress",
            ssl: false,
            port: 5432
          })
          await client.connect()
          const res = await client.query('SELECT NOW()')
          await client.end()
          return res.rows;
        }
      })
    },
  },
});

당분간 유효한 응답을 받을 수 있는지 확인하기 위해 쿼리를 하드 코딩했습니다.
테스트를 다시 실행하고 결과를 확인하겠습니다.



이제 데이터베이스에서 다시 전송되는 유효한 날짜를 볼 수 있습니다.

이제 마지막 단계는 하드 코딩된 쿼리 값을 제거하는 것입니다.
하드 코딩된 값을 제거하기 위해 함수에 쿼리 매개변수를 추가합니다. 이를 통해 테스트에서 쿼리를 설정할 수 있습니다. 메서드와 await.client.query() 문에 값 쿼리를 추가해 보겠습니다.

최종 편집은 다음과 같습니다.

       async connectDB(query){
          const client = new Client({
            user: "cypress_admin",
            password: "cypressrules",
            host: "localhost",
            database: "cypress",
            ssl: false,
            port: 5432
          })
          await client.connect()
          const res = await client.query(query)
          await client.end()
          return res.rows;
        }

그리고 테스트에서 작업을 호출할 때 쿼리를 전달할 수 있습니다.

cy.task("connectDB","SELECT NOW()").then(cy.log)

그러면 하드 코딩했을 때와 동일한 결과를 얻을 수 있습니다.



이제 유효한 연결이 있으므로 데이터베이스에서 데이터를 추가, 제거 및 확인할 수 있습니다.

읽어 주셔서 감사합니다. 전체 작업 샘플에 대한 내 저장소를 확인하십시오: https://github.com/Xvier/cypress-postgres-demo

질문이 있으시면 여기 또는 Cypress Discord 채널에서 저에게 연락해 주십시오.