프런트 엔드 테스트란 무엇입니까?

프런트 엔드 테스트란 무엇입니까?

프런트엔드 테스트 이는 다음과 같은 테스트 기법입니다. 그래픽 사용자 인터페이스 (GUI), 기능 및 사용성 웹 애플리케이션 테스트를 거칩니다. 목표는 연속적인 업데이트를 통해 프레젠테이션 레이어에 결함이 없는지 확인하는 것입니다.

예를 들어, 양식 필드에 이름을 입력할 때 숫자는 허용되지 않아야 합니다. GUI 요소의 정렬을 확인하는 것 또한 흔히 접하는 사례입니다.

이 외에도 다음과 같은 항목에 대해 프런트엔드 테스트가 진행됩니다.

• CSS 회귀 테스트: 사소한 CSS 변경으로 인해 프런트엔드 레이아웃이 깨지는 경우.
• Java스크립트 변경 프런트엔드를 작동하지 못하게 만드는 것들.
• 성능 확인 인터페이스가 얼마나 빨리 사용 가능해지는지에 따라 달라집니다.

프런트엔드 웹사이트 테스트 계획을 세우는 방법은 무엇입니까?

프런트엔드 테스트 계획을 수립하는 것은 간단한 4단계 과정입니다.

단계 1) 테스트 계획 관리 도구를 알아보세요.

단계 2) 프런트엔드 테스트 예산을 결정하세요.

단계 3) 전체 과정에 대한 일정을 설정하세요.

단계 4) 프로젝트 범위를 결정하세요. 범위에는 다음이 포함됩니다.

• Opera사용자들이 사용하는 검색 시스템 및 브라우저
• 청중들이 많이 사용하는 인기 기기
• 청중의 기술적 숙련도
• 청중의 인터넷 연결 속도

프런트엔드 테스트 계획을 수립해야 하는 이유는 무엇일까요?

아래 그림은 계획에서 반드시 명확히 해야 할 두 가지 차원을 보여줍니다.

계획은 어떤 브라우저와 운영체제 프로젝트는 모든 범위를 포괄해야 합니다. 가능한 조합은 무수히 많으므로 계획을 세우면 노력과 비용을 모두 절감할 수 있습니다.

이 계획은 두 가지 분명한 이점을 제공합니다.

• 이는 프로젝트의 범위에 대해 완벽한 명확성을 제공합니다.
• 이는 프로젝트가 배포될 때 자신감을 줍니다.

프런트엔드 테스트를 개선하기 위한 팁

더 나은 프런트엔드 테스트 계획을 수립하기 위한 팁:

• 예산, 자원, 시간을 신중하게 준비하세요.
• 헤드리스 브라우저를 사용하면 테스트 실행 속도가 빨라집니다.
• 보다 빠른 실행을 위해 테스트에서 DOM 렌더링 양을 줄입니다.
• 테스트 케이스를 분리하여 버그의 근본 원인을 신속하게 찾아내고 수정 주기를 단축하십시오.
• 테스트 스크립트를 재사용 가능하게 만들어 개발 속도를 높이세요. 회귀 주기.
• 테스트 스크립트에 일관된 명명 규칙을 사용하세요.
• 각각 묶으세요 테스트 사례 하나의 가시적인 행동으로.

프런트엔드 테스트 도구

스크립팅, 스타일시트 및 시각화를 모두 아우르는 단일 도구는 없으므로 팀에서는 여러 도구를 조합하여 사용합니다.

JS 테스트 도구: Jasmine

재스민 속 테스트용 행동 중심 개발 프레임워크입니다. JavaScript Jest는 기술적인 세부 사항보다는 비즈니스 가치에 초점을 맞추고, 깔끔한 구문을 가지며, 다른 프레임워크에 의존하지 않습니다. JSSpec, ScrewUnit, JSpec, RSpec과 같은 단위 테스트 프레임워크를 기반으로 개발되었으며, 현재는 Jest와 Vitest가 널리 사용되는 대안입니다.

기능 테스트 도구: Selenium

Selenium 다양한 브라우저 및 플랫폼에서 엔드투엔드 테스트를 수행합니다. Windows, macOS Linux에서도 작동하며, 테스트를 작성할 수 있게 해줍니다. Java, PythonC# 및 기타 언어. Selenium IDE 녹음 및 재생 기능을 추가하므로 첫 번째 스크립트에는 코드가 필요하지 않습니다. Cypress Playwright는 내장된 대기 기능을 통해 동일한 내용을 다룹니다. tracING.

CSS 및 시각화 도구: CSSLint 및 BackstopJS

CSS린트 는 오픈 소스 린터로 작성되었습니다. Java브라우저와 명령줄에서 실행되는 스크립트입니다. 더 이상 활발하게 유지 관리되지 않으므로, 현재는 Stylelint 또는 ESLint의 CSS 지원 기능을 사용하여 스타일시트를 검사합니다.

백스톱JS 시각적 회귀 테스트를 처리합니다. 헤드리스 Chrome에서 페이지를 렌더링하고, 각 스크린샷을 승인된 참조 이미지와 비교하며, 뷰포트 크기와 합격/불합격 조건을 구성할 수 있습니다.

프런트엔드 테스트 도구에는 두 가지 과제가 있습니다.

• 테스트 자동화 초기 단계에는 상당한 노력이 필요합니다.
• 일부 도구는 특정 운영 체제 및 브라우저 버전과 호환성 문제가 있을 수 있습니다.

프런트엔드 성능 최적화

프런트엔드 성능 테스트는 페이지 로딩 속도와 사용 가능 속도라는 한 가지 질문에 대한 답을 제시합니다. 애플리케이션에 부하가 많이 걸리기 전에 단일 사용자를 대상으로 성능을 최적화하는 것은 좋은 방법입니다. 성능 시험.

프런트엔드 성능 최적화가 중요한 이유는 무엇입니까?

과거에는 성능 최적화란 서버 튜닝을 의미했는데, 대부분의 웹사이트가 정적이었고 처리가 서버 측에서 이루어졌기 때문입니다.

웹 애플리케이션이 동적으로 변하면서 프레임워크 코드, 서드파티 스크립트, 이미지 및 글꼴 등 훨씬 더 많은 작업이 브라우저로 이동했습니다. 클라이언트 측 코드는 그 자체로 병목 현상이 되었습니다.

프런트엔드 성능 최적화의 이점은 무엇입니까?

• 클라이언트 측 문제는 서버 병목 현상만큼이나 사용자 경험에 직접적인 악영향을 미치므로, 둘 다 주의 깊게 살펴봐야 합니다.
• 방문자가 기다리는 시간의 상당 부분은 서버 응답 이후 다운로드, 구문 분석 및 렌더링 과정에서 발생하므로 프런트엔드 작업이 눈에 띄는 성능 향상을 가져오는 경우가 많습니다.
• 이미지 압축, 스크립트 실행 지연, 미디어 저장 공간 확보와 같은 해결책은 백엔드 아키텍처를 재설계하는 것보다 비용이 저렴합니다.
• 핵심 웹 필수 요소 - 최대 콘텐츠 페인트, 다음 페인트까지의 상호 작용 및 누적 레이아웃 Shift — 결과를 모두가 볼 수 있는 점수판을 제공하세요.

프런트엔드 성능 테스트 도구

1. PageSpeed ​​인사이트

PageSpeed​​ 인사이트 is GoogleLighthouse는 무료 페이지 분석 서비스입니다. Lighthouse 검사를 실행하고, Core Web Vitals를 보고하며, 로딩 시간을 단축하기 위한 제안 사항을 제시합니다. Lighthouse는 Chrome 개발자 도구에도 포함되어 있습니다.

2. Pingdom

Pingdom 웹사이트 및 성능 모니터링 서비스입니다. 페이지 속도가 느려지거나 접속이 끊길 경우 고객에게 알림을 보내 사용자가 문제를 보고하기 전에 문제를 파악할 수 있도록 도와줍니다.

특징:

• 웹페이지의 모든 부분을 검사합니다.
• 성능 개요를 제공합니다.
• Trac귀하의 성과 기록
• 여러 위치에서 테스트할 수 있습니다.

자주 묻는 질문