제스트+극작가(인형배우)로 끝에서 끝까지 테스트하는 첫걸음
Oryginally posted at: https://kodziak.com/blog/first-steps-with-e2e-testing-using-jest-playwright
This post is a continuation of the “First steps with test automation” article.
최근에 나는 테스트 자동화에 관한 첫 번째 게시물을 한 편 썼다.나는 주제와 관련된 질문에 대답하고 어디서 무엇을 검색하고 검색하는지 지도해 보았다. (관심 있다면 click here!)현재, 나는 당신이 취해야 할 기술적 절차로 그것을 확장하고, 실제 세계의 예시 (내 블로그) 를 어떻게 쉽게 사용하여 기본적인 테스트를 만드는지 보여주고 싶다🥳).
제작자 및 JestJS와 함께 기본 저장소를 만들고 다음과 같은 기본 테스트를 작성합니다.
상금: 테스트 녹음기!게임을 시작하기 전에 다음은 당신이 익숙해야 할 화제들입니다.
자동화부터 시작하려면 무엇이 필요합니까?
우선, 코드 제어 브라우저를 사용할 수 있는 라이브러리/도구가 필요합니다.오늘, 나는 플레이 wright라는 NodeJS 라이브러리를 사용할 것이다. (이것은 Puppeter와 매우 비슷하다. 여기서 차이에 관한 좋은 글을 찾을 수 있다.: https://blog.logrocket.com/playwright-vs-puppeteer/) API를 통해 우리의 조작을 자동화할 것이다.최종 사용자의 행동을 모의하는 테스트를 작성할 수 있는 도구가 필요합니다. (마치 우리 고객과 같습니다.)
기본적으로 수동 테스트는 마우스로 클릭하고 굴리거나 키보드로 표를 작성하는 것이다.자동화 테스트에서, 사용자는 라이브러리 API를 사용하여 같은 일을 하지만, 브라우저는 사용자가 제어하는 것이 아니라 자동화 소프트웨어가 제어합니다.
다음은 단언이 필요하다.극작가는 그들 자신의 것을 제공했지만, 솔직히 말해서, 나는 지금까지 써 본 적이 없다.나는 JestJS를 좋아한다. 이외에, 그것은 테스트 운영자이기도 하다. 이것은 너로 하여금 전체 테스트 라이브러리를 제어할 수 있는 더 많은 기회를 준다.간단한 방법으로 개발/생산 환경을 병행화하거나 설정할 수 있으며, 테스트를 작성하는 것은 즐거움일 뿐이다🥰.
한 마디로 하면 다음과 같은 이점을 얻을 수 있습니다.
극작가와 JestJS의 프로젝트 설정
따라서 다음과 같은 이점을 제공합니다.
css= 부품을 제거하고 waitForLoadState 부품을 변경하면 충분합니다.⇒ waitForNavigation . 이 두 가지 변화 이후에는 모든 것이 정상이어야 한다.첫 번째 자동화 테스트를 작성하기 전에 저장소를 설정해야 합니다.
먼저 초기화합니다.
yarn init 또는 npm installgit init yarn install jest jest-playwright-preset playwright또는npm install jest jest-playwright-preset playwright두 개의 프로필을 만듭니다.// jest.config.js
module.exports = {
preset: 'jest-playwright-preset',
}
// jest-playwright.config.js
module.exports = {
// Describe which browsers we want to run
browsers: ['chromium', 'firefox', 'webkit'],
launchOptions: {
// If we want to run browsers in headless mode or not,
headless: false,
// If we want to have opened devtools from start
devtools: false,
}
}
package.json의 스크립트를 실행해야 합니다."scripts": {
"test": "jest"
},
yarn test 또는 npm run test을 실행할 수 있습니다. 이 파일은 *.test.js의 이름과 일치하는 모든 파일을 실행할 수 있지만 아직 테스트를 하지 않았습니다.🙈나는 또한
tests/ 디렉터리를 추가했는데, 우리는 그 중에서 테스트를 저장할 것이다.자동 테스트를 작성합시다
우선, 우리는 우리가 무엇을 테스트하고 싶은지 알아야 한다.🙈
내 블로그와 관련된 기본 프로세스를 만들었습니다.
tests/에 파일 example.test.js을 추가했습니다.당신이 더욱 쉽게 이해할 수 있도록 저는 상술한 장면을 인코딩하고 한 줄 한 줄 주석을 추가하여 발생하고 있는 일을 묘사했습니다.let blogPosts = [];
describe('Blog - kodziak.com/blog/', () => {
// Will trigger methods before tests
beforeAll(async () => {
// Load blog page
await page.goto('https://kodziak.com/blog/');
})
test('title should be "Blog | Przemysław Paczoski"', async () => {
// Get website title
const title = await page.title();
// Compare title of current page
expect(title).toBe('Blog | Przemysław Paczoski');
})
test('should display list of blog posts', async () => {
// Get all blog posts as an array of objects
blogPosts = await page.$$eval('css=.post', elems => elems.map(el => {
return {
title: el.querySelector('.post-title').textContent.trim(),
description: el.querySelector('.post-description').textContent.trim(),
href: el.href,
}
}));
// Check if list length is greater than 0
expect(blogPosts.length).toBeGreaterThan(0);
})
test('click on blog post should redirect to article', async () => {
// Go to first blog post, there we're waiting to resolve all promises from array
await Promise.all([
// Click oo .post-title css class element
page.click('css=.post-title'),
// Wait for networkidle event, promise resolves after event
page.waitForLoadState('networkidle')
]);
// Get title, content and href of current article
const [articleTitle, articleContent, articleHref] = await Promise.all([
// Get article title, we use here array destructuring
page.$eval('css=h2', el => el.textContent.trim()),
// Get article content
page.$eval('css=.content', el => el.textContent),
// Get article href
page.url()
]);
// Destructuring first element from an blog posts array. First we use array destructuring and then object destructuring
const [{title, description, href}] = blogPosts;
// Compare title from posts list with current article's title
expect(title).toBe(articleTitle);
// Check if the current article content includes description from posts list, compare output with boolean true
expect(articleContent.includes(description)).toBe(true);
// Compare href from posts list with current article's href
expect(href).toBe(articleHref);
})
})
yarn test을 사용하여 실행합니다.극작가는 우리가 앞에서 묘사한 세 개의 브라우저:
chromium, firefox, webkit을 열 것이다.만일 모든 것이 순조롭다면 우리는 아래의 일지를 보아야 한다.
이렇게!우리는 세 가지 다른 브라우저에서 테스트를 진행했다.
보상: 녹음기 테스트!
마지막으로 테스트 자동화부터 시작하는 좋은 방법은 테스트 기록기를 사용하는 것이다.아주 좋은 것은 플레이 wright에서 만든 것입니다: https://github.com/microsoft/playwright-cli. 이것은 브라우저의 상호작용을 기록하고 완전히 작동하는 코드를 자동으로 생성할 수 있도록 합니다. 플레이 wright와 자동 테스트를 할 수 있습니다.
결론
본고에서 플레이 wright와JestJS 등 도구 자동화 기본 테스트 장면을 사용하는 것이 얼마나 쉬운지 보여드리고 싶습니다.나는 이것이 당신이 소프트웨어 공학이라는 부분을 탐색하는 좋은 시작이 되기를 바랍니다.
읽은 후에 당신은 이미 배웠을 것입니다.
좋은 하루 되세요!
Reference
이 문제에 관하여(제스트+극작가(인형배우)로 끝에서 끝까지 테스트하는 첫걸음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kodziak/first-steps-with-end-to-end-testing-using-jest-playwright-puppeteer-26b2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
