diff --git a/REQUIREMENTS.md b/REQUIREMENTS.md new file mode 100644 index 00000000..2f75e6c6 --- /dev/null +++ b/REQUIREMENTS.md @@ -0,0 +1,5 @@ +- [v] 영화 목록의 1페이지를 불러오며 더보기 버튼을 누르면 그 다음의 영화 목록을 불러 올 수 있다. + - 단, 페이지 끝에 도달한 경우에는 더보기 버튼을 화면에 출력하지 않는다. + - ⚠️ 인기순은 TMDB에서 제공하는 API의 속성 이름을 나타내는 것이므로 별도로 받은 데이터를 정렬하지 않습니다. +- [v] 영화 목록 아이템에 대한 Skeleton UI를 구현한다. + - Skeleton UI는 템플릿으로 제공되는 파일 이외로 자유롭게 구현할 수 있다. diff --git a/cypress.config.js b/cypress.config.js new file mode 100644 index 00000000..17161e32 --- /dev/null +++ b/cypress.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from "cypress"; + +export default defineConfig({ + e2e: { + setupNodeEvents(on, config) { + // implement node event listeners here + }, + }, +}); diff --git a/cypress/e2e/index.cy.js b/cypress/e2e/index.cy.js new file mode 100644 index 00000000..5d9f749a --- /dev/null +++ b/cypress/e2e/index.cy.js @@ -0,0 +1,45 @@ +describe("메인 페이지", () => { + beforeEach(() => { + cy.intercept( + { + method: "GET", + url: /^https:\/\/api\.themoviedb\.org\/3\/movie\/popular*/, + }, + (req) => { + req.reply({ + fixture: "popular-movies.json", + delayMs: 500, + }); + } + ).as("getPopularMovies"); + + cy.visit("http://localhost:5173"); + }); + + it("영화 목록 API를 호출하면 20개의 영화가 불러와진다.", () => { + cy.wait("@getPopularMovies").then((interception) => { + const popularMovies = interception.response.body.results; + expect(popularMovies).to.have.length(20); + + const popularMovieItems = cy.get("ul.thumbnail-list > li"); + popularMovieItems.should("have.length", 20); + }); + }); + + it("더보기 버튼 클릭 시 스켈레톤이 보였다가 사라지고, 새 영화 카드 20개가 추가로 보인다.", () => { + cy.get("ul.thumbnail-list > li").should("have.length", 20); + + cy.get("button").contains("더 보기").click(); + + cy.get("ul.thumbnail-list > li.card-skeleton").should( + "have.length.greaterThan", + 0 + ); + + cy.wait("@getPopularMovies"); + + cy.get("ul.thumbnail-list > li.card-skeleton").should("have.length", 0); + + cy.get("ul.thumbnail-list > li").should("have.length", 40); + }); +}); diff --git a/cypress/fixtures/popular-movies.json b/cypress/fixtures/popular-movies.json new file mode 100644 index 00000000..d89093a0 --- /dev/null +++ b/cypress/fixtures/popular-movies.json @@ -0,0 +1,327 @@ +{ + "page": 1, + "results": [ + { + "adult": false, + "backdrop_path": "/1RgPyOhN4DRs225BGTlHJqCudII.jpg", + "genre_ids": [16, 28, 14, 53], + "id": 1311031, + "original_language": "ja", + "original_title": "劇場版「鬼滅の刃」無限城編 第一章 猗窩座再来", + "overview": "혈귀로 변해버린 여동생 네즈코를 인간으로 되돌리기 위해 혈귀를 사냥하는 조직인 《귀살대》에 입대한 카마도 탄지로. 입대 후 동료인 아가츠마 젠이츠, 하시비라 이노스케와 함께 많은 혈귀와 싸우고, 성장하면서 세 사람의 우정과 유대는 깊어진다. 탄지로는 《귀살대》 최고위 검사인 《주》와도 함께 싸웠다. 「무한열차」에서는 염주・렌고쿠 쿄쥬로, 「유곽」에서는 음주・우즈이 텐겐, 「도공 마을」에서는 하주・토키토 무이치로, 연주・칸로지 미츠리와 함께 혈귀를 상대로 격렬한 전투를 벌였다. 그 후 다가올 혈귀와의 결전에 대비해 귀살대원들과 함께 《주》가 주도하는 합동 강화 훈련에 참가해 훈련을 받던 도중 《귀살대》의 본부인 우부야시키 저택에 나타난 키부츠지 무잔. 어르신의 위기에 달려온 《주》들과 탄지로였지만, 무잔의 술수로 의문의 공간으로 떨어지고 말았는데. 탄지로 일행이 떨어진 곳, 그곳은 혈귀의 본거지 《무한성》─ “귀살대”와 “혈귀”의 최종 결전의 포문이 열린다.", + "popularity": 856.2691, + "poster_path": "/m6Dho6hDCcL5KI8mOQNemZAedFI.jpg", + "release_date": "2025-07-18", + "title": "극장판 귀멸의 칼날: 무한성편", + "video": false, + "vote_average": 7.646, + "vote_count": 229 + }, + { + "adult": false, + "backdrop_path": "/iZLqwEwUViJdSkGVjePGhxYzbDb.jpg", + "genre_ids": [878, 53], + "id": 755898, + "original_language": "en", + "original_title": "War of the Worlds", + "overview": "전설적인 동명 소설을 새롭게 재해석한 이번 작품은 거대한 침공의 서막을 알린다. 에바 롱고리아와 전설적인 래퍼이자 배우 아이스 큐브, 그리고 마이클 오닐과 이만 벤슨이 합류해, 기술과 감시, 사생활이라는 현대적 주제를 아우르는 짜릿한 우주급 모험을 선보인다.", + "popularity": 554.7928, + "poster_path": "/yvirUYrva23IudARHn3mMGVxWqM.jpg", + "release_date": "2025-07-29", + "title": "우주전쟁", + "video": false, + "vote_average": 4.335, + "vote_count": 531 + }, + { + "adult": false, + "backdrop_path": "/Q2OajDi2kcO6yErb1IAyVDTKMs.jpg", + "genre_ids": [27, 9648], + "id": 1078605, + "original_language": "en", + "original_title": "Weapons", + "overview": "평범한 수요일, 어느 마을 학교의 같은 반 학생 17명이 등교하지 않는다. 그날 새벽 2시 17분, 잠에서 깬 아이들이 어둠 속으로 달려가 돌아오지 않았기 때문이다. 유일하게 남은 아이는 입을 다물고, 사라진 아이들을 찾으려는 이들은 악몽 같은 현실을 마주하게 되는데…", + "popularity": 460.1982, + "poster_path": "/lcu0aRFg7lzmzxGzpkYCeN4XRjh.jpg", + "release_date": "2025-08-04", + "title": "웨폰", + "video": false, + "vote_average": 7.403, + "vote_count": 1350 + }, + { + "adult": false, + "backdrop_path": "/fq8gLtrz1ByW3KQ2IM3RMZEIjsQ.jpg", + "genre_ids": [27], + "id": 1038392, + "original_language": "en", + "original_title": "The Conjuring: Last Rites", + "overview": "1986년 펜실베니아, 자신의 집에 사악한 존재가 들어왔다고 주장하는 스멀 일가를 조사하던 '워렌' 부부가 지금껏 마주한 적 없는 가장 위험하고 강력한 악령에 맞서는 '컨저링' 시리즈의 마지막 이야기", + "popularity": 405.6182, + "poster_path": "/y9jKDJuf5WCDjSPsqkt1cb0JHGm.jpg", + "release_date": "2025-09-03", + "title": "컨저링: 마지막 의식", + "video": false, + "vote_average": 6.628, + "vote_count": 327 + }, + { + "adult": false, + "backdrop_path": "/mEW9XMgYDO6U0MJcIRqRuSwjzN5.jpg", + "genre_ids": [28, 53], + "id": 1007734, + "original_language": "en", + "original_title": "Nobody 2", + "overview": "가족과 소홀해지는 걸 느낀 허치. 오랜만에 가족들과 떠나는 여름 휴가지는 유년 시절의 추억이 깃든 플러머빌. 꿀 같은 휴식을 꿈꿨지만 평온은 온데간데없고… 사건만 터지는데. 일도 가족도 고단한 아저씨의 휴가를 쟁탈하기 위한 싸움이 시작된다.", + "popularity": 328.7692, + "poster_path": "/vBKQuGX0nrx9p8H3j3GGojDYoKH.jpg", + "release_date": "2025-08-13", + "title": "노바디 2", + "video": false, + "vote_average": 7.295, + "vote_count": 528 + }, + { + "adult": false, + "backdrop_path": "/rzGHVq2BCMwjp93QaKYoLPSaSrp.jpg", + "genre_ids": [28, 14, 12, 9648], + "id": 506763, + "original_language": "zh", + "original_title": "狄仁杰之四大天王", + "overview": "당나라 최고의 천재 수사관, 적인걸. 신도해왕 사건 이후 황제의 신임을 얻어 항룡간을 하사 받고 대리사의 수장이 된다. 이에 최초의 여황제가 되려는 황후 측천무후는 권력을 차지하기 위해 적인걸을 제거할 계획을 세우고, 근위대장 위지진금에게 항룡간을 빼앗아 올 것을 명령한다. 한편, 적인걸은 수사를 하던 도중 황후의 야심을 이용해 황실에 복수를 꿈꾸는 ‘바람의 전사’의 존재를 알게 되고 피의 복수를 막기 위한 목숨을 건 사투를 시작하는데…", + "popularity": 296.6281, + "poster_path": "/eIbbVJr6R3FNFqAE6jeHwb4b3of.jpg", + "release_date": "2018-07-27", + "title": "적인걸 3: 사대천왕", + "video": false, + "vote_average": 6.205, + "vote_count": 200 + }, + { + "adult": false, + "backdrop_path": "/JMlVj6X2F1PuDz9OyHShThzpa2.jpg", + "genre_ids": [28, 80, 53], + "id": 1369679, + "original_language": "en", + "original_title": "Get Fast", + "overview": "한 도둑과 그의 파트너 빅은 악명 높은 조직의 두목 누시의 돈을 강탈하기로 한다. 둘은 슬라이, 탱크와 대치하며 총격전을 벌이고, 그 과정에서 탱크가 사망한다. 누시는 친오빠 탱크의 복수를 위해, 또 돈을 되찾기 위해 빅을 이용해 그 '도둑'을 잡으려 한다. 한편 부패 경찰 돈과 라비의 추격을 피해 도망치던 도둑은 아이스크림 트럭이 치이는데 그 트럭을 타고 경찰의 추적을 따돌린다. 트럭 주인 톰은 얼떨결에 도둑과 합류해 총격전까지 벌이며 사건에 휘말린다. 도둑은 톰과 헤어지고 홀로 빅을 구하러 약속 장소로 나간다. 누시는 엄청난 인원을 동원해 도둑을 잡으려고 대기 중이고, 마침 돈과 라비도 그 장소에 나타나는데 톰이 그들에게 인질로 잡혀 있었다. 도둑은 돈 가방을 던져주고 톰과 빅을 데리고 현장에서 일단 빠져나온 후, 다시 돈 가방을 가지러 간다. 경찰과 누시 조직, 도둑 일행이 얽혀 한바탕 소란이 벌어지는 가운데, 누시가 고용한 킬러 카우보이가 빅을 총으로 쏘고, 톰에게까지 총을 겨눈 상황에서 도둑이 카우보이를 처리한다. 하지만 빅은 그 자리에서 사망하고 만다. 얼마 후, 비행기를 훔치려던 도둑 앞에 아이스크림 트럭이 나타난다. 톰은 도둑에게 받은 돈이 새 출발 하기에 넘칠 정도로 많았다며 나머지 돈을 그에게 돌려주고, 그들은 악수를 나누며 작별한다.", + "popularity": 242.6208, + "poster_path": "/2MZBpW0bfQNJdWPCDM7OZetem1L.jpg", + "release_date": "2024-12-12", + "title": "겟 패스트", + "video": false, + "vote_average": 5.8, + "vote_count": 17 + }, + { + "adult": false, + "backdrop_path": "/eU7IfdWq8KQy0oNd4kKXS0QUR08.jpg", + "genre_ids": [878, 12, 28], + "id": 1061474, + "original_language": "en", + "original_title": "Superman", + "overview": "슈퍼맨은 오늘도 세계 곳곳의 위협에 맞서 싸우지만, 시민들의 반응은 극과 극으로 갈린다. 한편, 렉스 루터는 슈퍼맨을 무너뜨릴 비밀을 손에 넣고 역대 최강의 슈퍼-빌런들과 함께 총 공격에 나선다. 슈퍼맨은 첫 패배와 함께 이들의 계속된 공세에 직면하고 모든 것을 바로잡기 위해 슈퍼독 크립토와 함께 맞서게 되는데... 과연 그는 이 전례 없는 위기에서 다시 날아오를 수 있을까?", + "popularity": 239.0731, + "poster_path": "/kCXGCEsDqjzWJVDyHgBUg0AMetT.jpg", + "release_date": "2025-07-09", + "title": "슈퍼맨", + "video": false, + "vote_average": 7.509, + "vote_count": 3125 + }, + { + "adult": false, + "backdrop_path": "/kzeBfhXMRWiykBsqoL3UbfaM0S.jpg", + "genre_ids": [35, 28, 80], + "id": 1035259, + "original_language": "en", + "original_title": "The Naked Gun", + "overview": "단 한 사람만이 경찰 특공대를 이끌고 세상을 구할 특별한 기술을 지녔다… 그는 바로 프랭크 드레빈이다.", + "popularity": 215.7143, + "poster_path": "/rmwQ8GsdQ1M3LtemNWLErle2nBU.jpg", + "release_date": "2025-07-30", + "title": "총알 탄 사나이", + "video": false, + "vote_average": 6.725, + "vote_count": 656 + }, + { + "adult": false, + "backdrop_path": "/7FTOVQO3pndOuswVS3iNt3odVq5.jpg", + "genre_ids": [27], + "id": 691363, + "original_language": "fr", + "original_title": "La Chose Derrière La Porte", + "overview": "", + "popularity": 204.7468, + "poster_path": "/yMBMPRyrgSxuWeswuplS5rTqfsw.jpg", + "release_date": "2023-01-16", + "title": "La Chose Derrière La Porte", + "video": false, + "vote_average": 5.7, + "vote_count": 20 + }, + { + "adult": false, + "backdrop_path": "/ZtcGMc204JsNqfjS9lU6udRgpo.jpg", + "genre_ids": [28, 18], + "id": 911430, + "original_language": "en", + "original_title": "F1", + "overview": "한때 주목받는 유망주였지만 끔찍한 사고로 F1®에서 우승하지 못하고 한순간에 추락한 드라이버 소니 헤이스. 그의 오랜 동료인 루벤 세르반테스에게 레이싱 복귀를 제안받으며 최하위 팀인 APXGP에 합류한다. 그러나 팀 내 떠오르는 천재 드라이버 조슈아 피어스와 소니 헤이스의 갈등은 날이 갈수록 심해지고. 설상가상 우승을 향한 APXGP 팀의 전략 또한 번번이 실패하며 최하위권을 벗어나지 못하고 고전하는데···", + "popularity": 198.217, + "poster_path": "/bvVoP1t2gNvmE9ccSrqR1zcGHGM.jpg", + "release_date": "2025-06-25", + "title": "F1 더 무비", + "video": false, + "vote_average": 7.818, + "vote_count": 2068 + }, + { + "adult": false, + "backdrop_path": "/6nCy4OrV7gxhDc3lBSUxkNALPej.jpg", + "genre_ids": [28, 36, 18, 12, 10752], + "id": 1051486, + "original_language": "en", + "original_title": "Stockholm Bloodbath", + "overview": "", + "popularity": 193.3051, + "poster_path": "/tzXOB8nxO70SfSbOhrYcY94x6MI.jpg", + "release_date": "2024-01-19", + "title": "Stockholm Bloodbath", + "video": false, + "vote_average": 6.2, + "vote_count": 32 + }, + { + "adult": false, + "backdrop_path": "/zNriRTr0kWwyaXPzdg1EIxf0BWk.jpg", + "genre_ids": [878, 12, 28], + "id": 1234821, + "original_language": "en", + "original_title": "Jurassic World Rebirth", + "overview": "지구 최상위 포식자가 된 공룡들이 인간 세상으로 나온 5년 후, 인간과 공룡의 위태로운 공존이 이어지는 가운데 인류를 구할 신약 개발을 위해 육지, 하늘, 바다를 지배하는 가장 거대한 공룡들의 DNA가 필요하게 된다. 불가능한 미션 수행을 위해 조라와 헨리 박사 그리고 던컨은 공룡들을 추적하며 지구상에서 가장 위험한 섬에 도착하고 폐쇄된 쥬라기 공원의 연구소가 감추어 온 충격적인 진실을 마주하게 되는데...", + "popularity": 190.6502, + "poster_path": "/ygr4hE8Qpagv8sxZbMw1mtYkcQE.jpg", + "release_date": "2025-07-01", + "title": "쥬라기 월드: 새로운 시작", + "video": false, + "vote_average": 6.4, + "vote_count": 2095 + }, + { + "adult": false, + "backdrop_path": "/538U9snNc2fpnOmYXAPUh3zn31H.jpg", + "genre_ids": [28, 12, 53], + "id": 575265, + "original_language": "en", + "original_title": "Mission: Impossible - The Final Reckoning", + "overview": "디지털상의 모든 정보를 통제할 수 있는 사상 초유의 무기로 인해 전 세계 국가와 조직의 기능이 마비되고, 인류 전체가 위협받는 절체절명의 위기가 찾아온다. 이를 막을 수 있는 건 오직 존재 자체가 기밀인 에단 헌트와 그가 소속된 IMF뿐이다. 무기를 무력화하는 데 반드시 필요한 키를 손에 쥔 에단 헌트. 오랜 동료 루터와 벤지, 그리고 새로운 팀원이 된 그레이스, 파리, 드가와 함께 지금껏 경험했던 그 어떤 상대보다도 강력한 적에 맞서 모두의 운명을 건 불가능한 미션에 뛰어든다.", + "popularity": 173.9196, + "poster_path": "/5Zxdorl5TharlI9S47YxoKzGCsi.jpg", + "release_date": "2025-05-17", + "title": "미션 임파서블: 파이널 레코닝", + "video": false, + "vote_average": 7.286, + "vote_count": 1717 + }, + { + "adult": false, + "backdrop_path": "/w3Bi0wygeFQctn6AqFTwhGNXRwL.jpg", + "genre_ids": [16, 35, 14, 10402], + "id": 803796, + "original_language": "en", + "original_title": "KPop Demon Hunters", + "overview": "케이팝 슈퍼스타 루미, 미라, 조이. 매진을 기록하는 대형 스타디움 공연이 없을 때면 이들은 또 다른 활동에 나선다. 바로 비밀 능력을 이용해 팬들을 초자연적 위협으로부터 보호하는 것.", + "popularity": 162.4869, + "poster_path": "/k7DCwySN2XGZ67qcz2ADbgmGwzG.jpg", + "release_date": "2025-06-20", + "title": "케이팝 데몬 헌터스", + "video": false, + "vote_average": 8.3, + "vote_count": 1396 + }, + { + "adult": false, + "backdrop_path": "/vHTFrcqJoCi1is3XN0PZe2LSnI2.jpg", + "genre_ids": [14, 10751, 28, 12], + "id": 1087192, + "original_language": "en", + "original_title": "How to Train Your Dragon", + "overview": "수백년간 지속되어온 바이킹과 드래곤의 전쟁. 드래곤을 없애는 것이 삶의 모든 목적인 바이킹들과 다른 신념을 가진 '히컵'은 무리 속에 속하지 못하고 족장인 아버지에게도 인정받지 못한다. 그러던 어느 날, 히컵은 베일에 싸인 전설의 드래곤 나이트 퓨어리인 '투슬리스'와 만나게 되고, 드래곤을 죽이라는 바이킹의 신념을 깨고 '투슬리스'와 친구가 된다. 하지만 드래곤을 죽여야 된다고 믿는 바이킹 족과 모든 드래곤을 위협하는 더 거대한 존재와 맞닥뜨리게 된 '히컵'과 '투슬리스'. 세상을 변화시키기 위한 특별한 여정을 시작하게 되는데... 다르다는 건, 특별하다는 것. 세상을 바꿀 우리들의 모험이 시작된다!", + "popularity": 160.5537, + "poster_path": "/frXkpt1dLKO3iDbmBsjQUKseLiS.jpg", + "release_date": "2025-06-06", + "title": "드래곤 길들이기", + "video": false, + "vote_average": 8.026, + "vote_count": 1903 + }, + { + "adult": false, + "backdrop_path": "/uBB1aMga5ngZxsUQL5k36zeW3pB.jpg", + "genre_ids": [27, 10749], + "id": 1242011, + "original_language": "en", + "original_title": "Together", + "overview": "관계의 한계에 부딪힌 오래된 커플 팀과 밀리. 어느 날 서로의 몸이 점점 붙어버리기 시작하는데…", + "popularity": 138.4769, + "poster_path": "/ivWOD2MiC1HywIPBF2Ei2CN3ywY.jpg", + "release_date": "2025-07-28", + "title": "투게더", + "video": false, + "vote_average": 7.132, + "vote_count": 421 + }, + { + "adult": false, + "backdrop_path": "/2nwhxEyefcIFKwOrSigiamoIzu2.jpg", + "genre_ids": [28, 53, 18], + "id": 1119878, + "original_language": "en", + "original_title": "Ice Road: Vengeance", + "overview": "“빙하 위에 펼쳐진 새롭고 위험한 여정” 얼어붙은 도로 대신, 네팔의 설산 ‘하늘로 가는 길’이 배경이다. 첫 번째 영화에서의 비극 이후, 마이크 맥캔(리암 니슨 분)은 형의 유언을 따라 그의 유골을 히말라야 만년설에 뿌리기로 결심한다. 그곳에서 만난 산악 가이드 다니(판 빙빙 분)와 함께, 그는 설산을 횡단하는 관광 버스를 운전하며 설원을 가로지른다. 그런데 뜻하지 않게 만나게 된 용병 집단의 계략은 평화를 위협하고, 마이크는 탑승객과 마을 사람들을 위해 다시 한 번 몸을 던지게 된다. 거친 산길 위에서 벌어지는 긴장감 넘치는 추적과 대결, 그리고 인간애가 교차하며 숨 막히는 순간들을 이어가는데… 그리고 마침내 그가 마주하게 될 진실은…?", + "popularity": 132.2473, + "poster_path": "/cQN9rZj06rXMVkk76UF1DfBAico.jpg", + "release_date": "2025-06-27", + "title": "아이스 로드: 복수", + "video": false, + "vote_average": 6.5, + "vote_count": 366 + }, + { + "adult": false, + "backdrop_path": "/jvpkBenB6hv19WWYVlaiow8zklq.jpg", + "genre_ids": [16, 10751, 35, 80, 12], + "id": 1175942, + "original_language": "en", + "original_title": "The Bad Guys 2", + "overview": "착하게 살기 위해 무지하게 애쓰는 자타공인 최고의 나쁜 녀석들이 새롭게 등장한 '배드 걸즈'로 인해 일생일대의 글로벌 범죄 작전에 휘말리며 벌어지는 범죄오락액션 블록버스터", + "popularity": 128.2952, + "poster_path": "/1oG69MtmZGovhho0pPgRY9d1qrU.jpg", + "release_date": "2025-07-24", + "title": "배드 가이즈 2", + "video": false, + "vote_average": 7.79, + "vote_count": 364 + }, + { + "adult": false, + "backdrop_path": "/i8QHgJKnsd8csNBo8fH9wYW2Y9E.jpg", + "genre_ids": [10749, 35], + "id": 1321439, + "original_language": "en", + "original_title": "The Wrong Paris", + "overview": "파리에서 열리는 연애 리얼리티 쇼에 참가하기로 한 던. 그런데 알고 보니 프랑스 파리가 아닌 텍사스주 파리였다. 일찍 탈락할 계획을 세우지만 한 카우보이에게 마음이 끌리고 만다.", + "popularity": 121.7885, + "poster_path": "/kO0tmaeXG5QkPUyynEopd54kX0f.jpg", + "release_date": "2025-09-11", + "title": "내가 몰랐던 파리", + "video": false, + "vote_average": 6.885, + "vote_count": 74 + } + ], + "total_pages": 52496, + "total_results": 1049920 +} diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/cypress/support/commands.js @@ -0,0 +1,25 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js new file mode 100644 index 00000000..3a252243 --- /dev/null +++ b/cypress/support/e2e.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/e2e.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import "./commands"; + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/index.html b/index.html index 9acaf748..6c140460 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,11 @@
+