인형 배우와 극작가의 극본을 조정하여 조정하다.

이 문장은 최초로 checkyLearn Puppeteer & Playwright에 나타났다.
스크립트가 왜 예상대로 작동하지 못하거나 고장의 근본 원인이 무엇인지 이해하는 것이 자동화의 관건적인 기술이다.디버깅의 중요성과 사기적인 복잡성을 감안하면 상당히 많은 관심을 받아야 할 화제다.
본고는 기본 개념과 도구를 탐구하여 초보자에게 정확한 방향을 제시하고자 한다.

의식이 우선이죠.

스크립트 디버깅은 우선 관찰과 이해이다.실행 실패(또는 부적절한 행위)를 초래하는 원인을 찾아내는 것은 어느 정도에 당신이 다음과 같은 방면에 대해 알고 있느냐에 달려 있다.

보고 있는 스크립트는 뭘 해야 하나

스크립트가 실행하는 프로그램이 스크립트의 각 단계에서 어떻게 실행되어야 하는지

디버그 세션을 진행할 때 상기 몇 가지를 주의하십시오.이 단계를 건너뛰는 것은 당신을 위해 어떤 시간도 절약하지 않고 더 많은 시간을 들일 수 있다.

오류 메시지

오류 메시지는 모든 장면에 나타나는 것이 아니다. 왜 스크립트가 통과되었는지, 왜 스크립트가 예상보다 오래 걸렸는지 이해하려고 시도할 수도 있다.그러나 오류 메시지에 접근할 수 있을 때, 우리는 그것을 사용해서 우리를 지도할 수 있다.
오류 자체가 항상 스크립트에 무슨 문제가 생겼는지 이해하기에는 충분하지 않다.일반적으로 오류와 그 근본 원인 사이에는 여러 정도의 분리가 존재할 수 있다.예를 들어 "Element not found" 오류는 페이지에서 요소를 찾을 수 없다는 것을 알릴 수 있지만 브라우저가 처음에 잘못된 URL을 불러왔기 때문일 수 있습니다.
잘못된 정보를 읽고 즉각 결론을 내리는 함정에 쉽게 빠지지 마라.반대로 잘못된 정보를 꺼내서 필요하면 연구해 보세요. 그것과 당신knowledge of script and app under test을 결합시켜 당신이 조사한 도착점이 아니라 수수께끼의 첫 번째 부분으로 삼으세요.

Good knowledge of the automation tool you are using will also help add more context to the error message itself.

가시도 를 높이다

헤드 없는 브라우저 스크립트가 GUI 없이 실행되므로 어플리케이션 상태를 시각적으로 평가하려면 추가 절차가 필요합니다.
스크립트의 특정 부분에 화면 캡처를 추가해서 실행 시간에 발생할 수 있는 일들에 대한 가설을 검증하는 가능성이 있다.예를 들어, 문제가 있는 클릭 또는 페이지 전환 전후에 다음을 수행합니다.
극작가에 대해서:

...
await page.screenshot({ path: 'before_click.png' });
await page.click('#button')
await page.screenshot({ path: 'after_click.png' });
...

인형 배우에 대해:

...
await page.screenshot({ path: 'before_click.png' });
await page.waitForSelector('#button');
await page.click('#button')
await page.screenshot({ path: 'after_click.png' });
...

스크립트의 실행 상태를 보다 잘 관찰하는 또 다른 방법은 헤드 모드로 실행하는 것입니다.
극작가에 대해서:

...
const browser = await chromium.launch({ headless: false, slowMo: 20 });
...

인형 배우에 대해:

...
const browser = await puppeteer.launch({ headless: false, slowMo: 20 });
...

그리고 우리는 slowMo 옵션을 조정할 수 있다. 이 옵션은 상호작용 사이에 밀리초 단위의 지연을 증가시켜 실행 속도가 너무 빠르지 않도록 한다.

벌목량 증가

때때로 우리는 자동화 도구의 눈을 통해 실행 상황을 관찰해 보아야 한다.추가된 로그 기록은 명령을 실행할 때 단계적으로 완성하는 데 도움을 줄 수 있습니다.
극작가에 대해서:

DEBUG=pw:api node script.js

인형 배우에 대해:

DEBUG="puppeteer:*" node script.js

DevTools 액세스

크롬 개발자 도구를 사용하면 다양한 정보를 얻을 수 있습니다.DevTools 탭이 열린 상태에서 브라우저를 시작하도록 설정할 수 있습니다. (이것은 자동으로 headless 모드를 사용하지 않습니다.) 이것은 어떤 것들이 예상대로 작동하지 않을 때 유용합니다.콘솔, 네트워크, 기타 옵션을 자세히 검사하면 숨겨진 오류와 기타 중요한 발견을 발견할 수 있다.

극작가에 대해서:

...
await chromium.launch({ devtools: true });
...

인형 배우에 대해:

...
await browser.launch({ devtools: true });
...

또한 콘솔을 사용하여 페이지에서 현재 상태의 선택기를 직접 시도할 수 있습니다. 예를 들어 document.querySelector 또는 document.querySelectorAll.

만약 우리가 Playwright를 사용한다면, 우리는 PWDEBUG=console node script.js 디버깅 모드에서 실행할 수 있습니다.이것은 브라우저에 playwright 대상을 제공하여 저희도 시도할 수 있도록 허락합니다Playwright-specific selectors.

극작가가 감독하다.

Playwright Inspector는 GUI 도구로 추가 디버그 기능PWDEBUG=1 npm run test을 공개하여 시작할 수 있습니다.
Inspector는 스크립트의 모든 명령을 쉽게 완성할 수 있도록 해 주며, 모든 명령의 지속 시간, 결과, 기능에 대한 명확한 정보를 제공합니다.이것은 getting to the root cause 좀 더 일반적인 오류에 도움이 된다.

The Inspector includes additional handy features such as selector generation and debugging, as well as script recording.

한층 더 읽다

Debugging challenges

Working with selectors

표지 사진: "Manual descent simulation in the centrifuge" 저자AstroSamantha 근거CC BY 2.0 권한 수여