Cypress 10에 대한 확장된 "모든 사양 실행"기능

필수 노드 패키지:

rimraf

아마도 모든 Cypress 팬이 이미 알고 있듯이 Cypress 10은 "기술적 제한"으로 인해 "모든 테스트 실행"기능 없이 배송되었습니다. , 기술적 한계는 무엇이며 이에 대한 모든 불만도 있습니다)

나는 대부분의 사람들과 마찬가지로 테스트 러너 인터페이스에서 모든 테스트를 실행할 수 있는 기능이 절실히 필요했으며 Cypress가 결정할 때까지 수행할 수 있는 해결 방법/해킹에 대해 here 에서 이great post를 우연히 발견했습니다. 무엇을 해야할지.

Gleb이 제안하는 솔루션은 수동으로 모든 새 사양을 "all.spec.cy/ts"로 가져온 다음 Cypress에서 "all.spec.cy/ts"를 실행하는 것입니다(자세한 내용은 게시물 참조).

그래서 나는 이것을 내 특별한 필요에 맞게 조정할 기회를 보았습니다. 내 시나리오에서는 e2e 아래 폴더/기능별로 그룹화된 많은 테스트가 있었습니다. 그리고 결국 많은 사람들이 각 폴더에 테스트를 추가하는 데 관여하게 될 것이고 어느 시점에서 누군가 import 문을 추가하는 것을 잊어버리고 우리가 곤경에 처하게 될 것임을 알고 있었습니다. 그런 다음 "만약... Cypress가 실행될 때마다 e2e 폴더를 탐색하고 모든 사양을 찾은 다음 해당 가져오기로 all.spec.cy/ts를 만드는 스크립트를 만들 수 있다면 어떨까?"라고 생각했습니다. 그런 다음 "주어진 기능에 대한 모든 테스트를 실행하려는 경우에 내가 가지고 있는 각 폴더에 대해 "groupspec"을 만들 수 있다면 어떨까요?"

그리고 이것이 내가 생각해 낸 것입니다.

루트에 "generateGroups.js"파일을 만듭니다.

/* eslint-disable */
const fs = require('fs');
const folders = fs.readdirSync('cypress/e2e', { withFileTypes: true })

/* Create and populate all.cy.ts with all existing tests imports */
writeFile("all")

addAllImports("all")

/* Create and populate a "group" cy.ts file per folder with corresponding imports */
folders.filter(dirent => dirent.isDirectory())
  .map(dirent => dirent.name).forEach(folder => {
    writeFile(folder);
    addGroupImports(folder)
  })

function addGroupImports(spec) {
  readImports(spec, spec);
}

/* Add all imports to all.cy.ts file */
function addAllImports(spec) {
  folders.filter(dirent => dirent.isDirectory())
    .map(dirent => dirent.name).forEach(folder => {
      readImports("all", folder);
    })
}

/* Build the "import" commands and insert it
in each corresponding cy.ts file */

function readImports(spec, folder) {
  let files = fs.readdirSync(`cypress/e2e/${folder}`)
  let newImport = "";
  files.forEach(file => {
    newImport = `import "./${folder}/${file}";\n`;
    appendImport(spec, newImport);
  })
}

/* Insert the import lines in each corresponding file */
function appendImport(fileName, newImport) {
  fs.appendFile(`cypress/e2e/${fileName}.cy.ts`, newImport, function (err) {
    if (err) throw err;
  })
}

/* Create group cy.ts file */
function writeFile(file) {
  fs.writeFile(`cypress/e2e/${file}.cy.ts`, "", function (err) {
    if (err) throw err;
    console.log(`${file} Group Spec file was created successfully.`);
  })
}

그리고 이것은 package.json 파일의 스크립트 섹션이 됩니다.

"scripts": {
    "open": "npm run groups && cypress open --browser chrome --e2e",
    "test": "npm run cleangroups && cypress run --e2e",           
    "groups": "node generateGroups.js",
    "cleangroups": "npx rimraf cypress/e2e/*.cy.ts",
  },

어디:

"open"은 그룹 파일을 만든 다음 cypress를 엽니다. 여기서 각 폴더에 대한 .cy.ts 파일과 all.cy.ts 파일이 있습니다.

"test"는 rimraf(플랫폼 간 파일/폴더를 삭제할 수 있는 노드 패키지)를 사용하여 모든 그룹 파일을 삭제하므로 "cypress run"을 실행하면 모든 테스트가 실행됩니다(그룹을 삭제하지 않는 경우). 파일, 모든 테스트는 두 번 실행됩니다)

"groups"는 generateGroups를 실행하여 그룹 cy.ts 파일을 생성합니다.

필요할 때 파일을 삭제하는 "cleangroups"

이것은 내 폴더 구조가 정상적으로 보이는 방식입니다(그룹 파일 제외).

Gleb Bahmutov

이것은 "npm run open"을 실행했을 때의 모습입니다.



그리고 이것은 Cypress입니다.



내 all.cy.ts 파일은 다음과 같습니다.



다시 말하지만, 나는 내 필요에 맞게 물건을 조정할 수 있는 유연성을 좋아합니다... :D

이것이 누구에게나 유용하기를 바랍니다... 좋은 하루 되세요 그리고...

행복한 테스트!