{"id":15786165,"url":"https://github.com/dl0312/cypress-tutorial","last_synced_at":"2026-02-17T12:02:51.186Z","repository":{"id":35696645,"uuid":"201878334","full_name":"dl0312/cypress-tutorial","owner":"dl0312","description":"👶 It's time to study cypress","archived":false,"fork":false,"pushed_at":"2022-12-11T01:47:45.000Z","size":3461,"stargazers_count":1,"open_issues_count":32,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-09T19:05:26.667Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dl0312.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-12T07:17:12.000Z","updated_at":"2020-09-06T11:57:28.000Z","dependencies_parsed_at":"2023-01-16T03:30:54.664Z","dependency_job_id":null,"html_url":"https://github.com/dl0312/cypress-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dl0312/cypress-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Fcypress-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Fcypress-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Fcypress-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Fcypress-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dl0312","download_url":"https://codeload.github.com/dl0312/cypress-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Fcypress-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29543361,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T08:11:05.436Z","status":"ssl_error","status_checked_at":"2026-02-17T08:09:38.860Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-04T21:00:47.359Z","updated_at":"2026-02-17T12:02:51.155Z","avatar_url":"https://github.com/dl0312.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress Tutorial\n\n[cypress](https://github.com/cypress-io/cypress) - Fast, easy and reliable testing for anything that runs in a browser.\n* OpenSource Project(MIT License)\n* Browser Support: `Electron`, `Chrome`\n* Element 접근: `Iframe`에 `Target Web`을 올린 뒤 `Browser` 내부에서 접근함.\n* Headless Support: 지원\n* CLI Support: 지원\n* ScreenShot: 지원\n* Video Record: `Electron`만 지원\n* 심플한 API 제공\n* `Mocha` 기반이기 때문에 `Nodejs` 개발자들에게 익숙합니다.\n* 내부적으로 `queue`를 써서 `sync`인것 처럼 동작합니다.\n  \n## Cypress는 무엇인가?\n`cypress`는 e2e\u003csup\u003eEnd to End\u003c/sup\u003e testing framework이다. 개발자 입장에서 프로그램의 모듈을 검증하는 유닛 테스트와 달리 e2e test는 사용자 입장에서 테스트하는 것을 뜻한다. e2e 테스트에 대한 자세한 설명은 \"[E2E Test 알아보기](https://medium.com/hbsmith/e2e-test-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-3c524862469d)\"를 참고한다.\n\n`cypress`는 각 테스트의 과정을 웹페이지를 통해 보여주는 매우 시각적 도구이다. 또한, 각 테스트 시행을 스냅샷처럼 찍어 해당 테스트환경으로도 돌아갈 수 있다.\n\n## 왜 또 다른 테스트 도구가 필요한가?\n기존의 테스트는 너무 어렵다.\n\n기존 개발자들이 테스트 도구에 가지는 불만이 무엇인가?\n* 기본 설정이 어렵다 - 진입장벽이 높다.\n* 작성 - 테스트 코드를 작성하는 것이 어렵다.\n* 관리 - 해당 테스트 코드의 결과가 이해하기 어렵고 다루기 어렵다.\n\n대부분은 Selenium을 사용한 e2e 테스트 도구들의 문제는 다음과 같았다.\n* 웹의 발전\u003csup\u003eEvolution\u003c/sup\u003e - AJAX의 등장으로 웹의 구조가 점점 더 복잡해졌다.\n* 비동기 코드\u003csup\u003eAsync Code\u003c/sup\u003e\n* 구조\u003csup\u003eArchitecture\u003c/sup\u003e\n* 제어\u003csup\u003eControl\u003c/sup\u003e - 개발자가 완전한 통제권을 가지지 못한다.\n* 속도\u003csup\u003eSpeed\u003c/sup\u003e - 너무너무 느렸다.\n\n# Cypress with Vue.js\n우선 `vue-cli`@3.x 버전을 사용하여 프로젝트를 구성하고, 추가 설정은 다음과 같이 해준다.\n```shell\n$ vue create cypress-tutorial\n? Please pick a preset: Manually select features\n? Check the features needed for your project: Babel, Linter, E2E\n? Pick a linter / formatter config: Basic\n? Pick additional lint features: (Press \u003cspace\u003e to select, \u003ca\u003e to toggle all, \u003ci\u003e to invert selection)Lint on save\n? Pick a E2E testing solution: Cypress\n? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files\n? Save this as a preset for future projects? No\n```\n\n설치가 마무리되면, `tests/e2e`라는 e2e 테스트 코드가 들어있는 폴더가 생긴다.\n그리고, `tests/e2e/specs` 폴더에 있는 `test.js`가 우리가 사용할 e2e 테스트 코드이다.\n```js\n// test.js\n// https://docs.cypress.io/api/introduction/api.html\ndescribe('My First Test', () =\u003e {\n  it('Visits the app root url', () =\u003e {\n    cy.visit('/')\n    cy.contains('h1', 'Welcome to Your Vue.js App')\n  })\n})\n```\n이 코드를 화면 중간에 나오는 링크의 갯수를 확인하는 코드로 바꿔보자 우선 `HelloWorld.vue` 파일을 수정해야한다.\nEssential Links 아래 있는 ul tag에 `data-cy=\"links\"`라는 속성을 주입한다. 이 속성은 `cypress`에서만 쓰이는 속성이 될 것 이다.\n```html\n\u003ch3\u003eEssential Links\u003c/h3\u003e\n\u003cul data-cy=\"links\"\u003e\n    \u003cli\u003e\n    \u003ca href=\"https://vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eCore Docs\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003ca href=\"https://forum.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eForum\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003ca href=\"https://chat.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eCommunity Chat\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003ca href=\"https://twitter.com/vuejs\" target=\"_blank\" rel=\"noopener\"\u003eTwitter\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003ca href=\"https://news.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eNews\u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n그리고 해당 링크의 갯수를 확인하는 테스트 코드를 작성한다.\n```js\n// test.js\n// https://docs.cypress.io/api/introduction/api.html\ndescribe('Test main page', () =\u003e {\n  beforeEach(() =\u003e {\n    cy.visit('http://localhost:8080')\n  })\n  it('check links', () =\u003e {\n    cy.get('[data-cy=links]')\n      .children()\n      .should('have.length', 5)\n  })\n})\n```\n이제 테스트 코드가 잘 동작하는 지 확인하는 일만 남았다. 명령어는 `vue-cli`로 자동으로 생성된 `yarn test:e2e`를 이용한다.\n```shell\n$ yarn test:e2e\n```\n명령어를 입력하고 시간이 좀 지나면 브라우저 형태의 `cypress` 프로그램이 실행되면서 테스트가 진행될 것이다.\n\n## References\n* 📹[Testing The Way It Should Be (aka Intro Into Cypress)](https://youtu.be/pJ349YntoIs)\n* 📹[Cypress Official Tutorial Videos](https://docs.cypress.io/examples/examples/tutorials.html#Best-Practices)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdl0312%2Fcypress-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdl0312%2Fcypress-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdl0312%2Fcypress-tutorial/lists"}