๐ถ It's time to study cypress
cypress - Fast, easy and reliable testing for anything that runs in a browser.
Electron
, Chrome
Iframe
์ Target Web
์ ์ฌ๋ฆฐ ๋ค Browser
๋ด๋ถ์์ ์ ๊ทผํจ.Electron
๋ง ์ง์Mocha
๊ธฐ๋ฐ์ด๊ธฐ ๋๋ฌธ์ Nodejs
๊ฐ๋ฐ์๋ค์๊ฒ ์ต์ํฉ๋๋ค.queue
๋ฅผ ์จ์ sync
์ธ๊ฒ ์ฒ๋ผ ๋์ํฉ๋๋ค.cypress
๋ e2eEnd to End testing framework์ด๋ค. ๊ฐ๋ฐ์ ์
์ฅ์์ ํ๋ก๊ทธ๋จ์ ๋ชจ๋์ ๊ฒ์ฆํ๋ ์ ๋ ํ
์คํธ์ ๋ฌ๋ฆฌ e2e test๋ ์ฌ์ฉ์ ์
์ฅ์์ ํ
์คํธํ๋ ๊ฒ์ ๋ปํ๋ค. e2e ํ
์คํธ์ ๋ํ ์์ธํ ์ค๋ช
์ "E2E Test ์์๋ณด๊ธฐ"๋ฅผ ์ฐธ๊ณ ํ๋ค.
cypress
๋ ๊ฐ ํ
์คํธ์ ๊ณผ์ ์ ์นํ์ด์ง๋ฅผ ํตํด ๋ณด์ฌ์ฃผ๋ ๋งค์ฐ ์๊ฐ์ ๋๊ตฌ์ด๋ค. ๋ํ, ๊ฐ ํ
์คํธ ์ํ์ ์ค๋
์ท์ฒ๋ผ ์ฐ์ด ํด๋น ํ
์คํธํ๊ฒฝ์ผ๋ก๋ ๋์๊ฐ ์ ์๋ค.
๊ธฐ์กด์ ํ ์คํธ๋ ๋๋ฌด ์ด๋ ต๋ค.
๊ธฐ์กด ๊ฐ๋ฐ์๋ค์ด ํ ์คํธ ๋๊ตฌ์ ๊ฐ์ง๋ ๋ถ๋ง์ด ๋ฌด์์ธ๊ฐ?
๋๋ถ๋ถ์ Selenium์ ์ฌ์ฉํ e2e ํ ์คํธ ๋๊ตฌ๋ค์ ๋ฌธ์ ๋ ๋ค์๊ณผ ๊ฐ์๋ค.
์ฐ์ vue-cli
@3.x ๋ฒ์ ์ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ๊ณ , ์ถ๊ฐ ์ค์ ์ ๋ค์๊ณผ ๊ฐ์ด ํด์ค๋ค.
$ vue create cypress-tutorial
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, E2E
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
์ค์น๊ฐ ๋ง๋ฌด๋ฆฌ๋๋ฉด, tests/e2e
๋ผ๋ e2e ํ
์คํธ ์ฝ๋๊ฐ ๋ค์ด์๋ ํด๋๊ฐ ์๊ธด๋ค.
๊ทธ๋ฆฌ๊ณ , tests/e2e/specs
ํด๋์ ์๋ test.js
๊ฐ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ e2e ํ
์คํธ ์ฝ๋์ด๋ค.
// test.js
// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to Your Vue.js App')
})
})
์ด ์ฝ๋๋ฅผ ํ๋ฉด ์ค๊ฐ์ ๋์ค๋ ๋งํฌ์ ๊ฐฏ์๋ฅผ ํ์ธํ๋ ์ฝ๋๋ก ๋ฐ๊ฟ๋ณด์ ์ฐ์ HelloWorld.vue
ํ์ผ์ ์์ ํด์ผํ๋ค.
Essential Links ์๋ ์๋ ul tag์ data-cy="links"
๋ผ๋ ์์ฑ์ ์ฃผ์
ํ๋ค. ์ด ์์ฑ์ cypress
์์๋ง ์ฐ์ด๋ ์์ฑ์ด ๋ ๊ฒ ์ด๋ค.
<h3>Essential Links</h3>
<ul data-cy="links">
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
๊ทธ๋ฆฌ๊ณ ํด๋น ๋งํฌ์ ๊ฐฏ์๋ฅผ ํ์ธํ๋ ํ ์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
// test.js
// https://docs.cypress.io/api/introduction/api.html
describe('Test main page', () => {
beforeEach(() => {
cy.visit('http://localhost:8080')
})
it('check links', () => {
cy.get('[data-cy=links]')
.children()
.should('have.length', 5)
})
})
์ด์ ํ
์คํธ ์ฝ๋๊ฐ ์ ๋์ํ๋ ์ง ํ์ธํ๋ ์ผ๋ง ๋จ์๋ค. ๋ช
๋ น์ด๋ vue-cli
๋ก ์๋์ผ๋ก ์์ฑ๋ yarn test:e2e
๋ฅผ ์ด์ฉํ๋ค.
$ yarn test:e2e
๋ช
๋ น์ด๋ฅผ ์
๋ ฅํ๊ณ ์๊ฐ์ด ์ข ์ง๋๋ฉด ๋ธ๋ผ์ฐ์ ํํ์ cypress
ํ๋ก๊ทธ๋จ์ด ์คํ๋๋ฉด์ ํ
์คํธ๊ฐ ์งํ๋ ๊ฒ์ด๋ค.