[용어 #2] XPath에 대하여

XPath (출처: https://velog.io/@hippohami/XPath-%EC%9E%91%EC%84%B1%EB%B2%95)

📌 XPath(XML Path Language)란?

XPath는 XML 문서에서 특정 요소나 속성에 접근하기 위한 경로를 지정하는 언어로, W3C 표준이다. 문서의 구조를 기반으로 경로를 지정하고, 특정 구문을 활용하여 요소를 찾거나 처리하는 방식을 제공힌다. 원래는 XML 문서 내의 항목을 배치하고 처리하기 위해 개발되었지만, 전반적으로 마크업 언어(Markup Language)를 다루는 방법으로 볼 수 있다. 따라서 HTML과 같은 마크업 언어에서도 활용할 수 있다.

+ 추가 지식

Markup Language

~> 문서나 데이터를 구조화하고 표시하는 언어 (예: HTML, XML 등)

~> 특징

• 태그를 사용하여 문서 구조를 정의

• 데이터의 의미를 표현하는 용도로 사용

• 프로그래밍 언어에 해당하지 않음

XML(eXtensible Markup Language)

~> 데이터를 저장하고 전달하는 데 사용되는 마크업 언어

~> HTML과 비슷한 태그 기반 구조를 가지지만, 데이터를 표현하는 것이 주목적 (HTML은 웹 페이지를 표시하는 것이 주목적)

📌 HTML 계층 구조

HTML은 문서를 구조화하는 마크업 언어로, 트리 구조를 기반으로 계층적으로 요소들이 배치된다. 따라서 HTML 문서는 부모 요소와 자식 요소간의 계층적인 관계를 가지며, 모든 HTML 요소는 DOM(Document Object Model) 트리를 형성한다.

따라서 아래의 HTML 코드는

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Document</h1>
    <div>
        <p id="ch1" class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p id="ch2" class="text">Vitae quo natus veniam quia mollitia dignissimos odio sunt ut ex, in quas ipsa iusto.</p>
    </div>
</body>
</html>

아래의 트리 구조로 표현할 수 있다.

HTML 문서는 위와 같이 계층적인 트리 구조로 이루어져 있으며, 각 요소는 부모, 자식, 형제 관계를 가진다. XPath는 이러한 계층 구조를 따라 동작하므로, 이를 효과적으로 활용하려면 HTML 문서의 계층 구조를 정확히 이해하는 것이 필수적이다.

📌 XPath 기본 문법

1️⃣ 주요 기호

기호	의미	예제	설명
/	절대 경로	/html/body/div	문서의 루트부터 탐색
//	상대 경로	//p	문서 전체에서 모든 <p> 요소 찾기
.	현재 요소	./p	현재 요소 내의 <p> 찾기
..	부모 요소	//p/..	<p> 요소의 부모 요소 선택
@	속성 선택	//p[@class='text']	class가 'text'인 <p> 찾기
*	모든 요소 선택	//div/*	<div> 내부의 모든 요소 선택

2️⃣ 조건 및 연산자

연산자	의미	예제	설명
[]	조건	//p[@id='ch1']	id가 'ch1'인 <p> 선택
and	AND 조건	//p[@id='ch1' and @class='text']	id가 'ch1'이고 class가 'text'인 <p> 선택
or	OR 조건	//p[@id='ch1' or @id='ch2']	id가 'ch1' 또는 'ch2'인 <p> 선택
=	값 비교	//a[@href='/home']	href가 '/home'인 <a> 선택
!=	값 불일치	//input[@type!='text']	type이 'text'가 아닌 <input> 선택
<	작은 값	//price[. < 100]	값이 100보다 작은 <price> 선택
>	큰 값	//price[. > 50]	값이 50보다 큰 <price> 선택

3️⃣ 함수

함수	의미	예제	설명
text()	텍스트 값 선택	//p[text()='Hello']	'Hello'인 <p> 선택
contains()	특정 문자열 포함	//p[contains(text(), 'Lorem')]	'Lorem'이 포함된 <p> 선택
starts-with()	특정 문자열로 시작	//p[starts-with(text(), 'Hello')]	'Hello"로 시작하는 <p> 선택
last()	마지막 요소 선택	//p[last()]	문서 내 마지막 <p> 선택
position()	특정 위치 요소 선택	//li[position()=2]	두 번째 <li> 선택

📌 다양한 방식의 XPath

1️⃣ 절대 경로 방식 (Absolute XPath)

/html/head/meta[1]          # 첫 번째 <meta>
/html/head/meta[2]          # 두 번째 <meta>
/html/head/title            # <title>
/html/body/h1               # <h1>
/html/body/div              # <div>
/html/body/div/p[1]         # 첫 번째 <p> (id="ch1")
/html/body/div/p[2]         # 두 번째 <p> (id="ch2")

2️⃣ 상대 경로 방식 (Relative XPath)

//meta                      # 모든 <meta> 요소 선택
//p                         # 모든 <p> 요소 선택
//div/p                     # <div> 내부의 <p> 태그들 선택
//head/*                    # <head> 내부의 모든 자식 요소 선택 (meta, title 포함)
//body//p                   # <body> 내부의 모든 <p> 요소 선택

3️⃣ 속성 기반 선택 (Attributes in XPath)

/html/body/div/p[@id='ch1'] # id가 'ch1'인 <p> 태그 선택
//p[@id='ch2'] # id가 'ch2'인 <p> 태그 선택
/html/body/div/p[@class='text'] # class가 'text'인 모든 <p> 태그 선택
//p[@id='ch1' and @class='text'] # id가 'ch1'이고 class가 'text'인 <p> 태그 선택

4️⃣ 텍스트 기반 선택 (Text in XPath)

//p[text()='Lorem, ipsum dolor sit amet consectetur adipisicing elit.'] # 정확한 텍스트를 포함한 <p> 태그 선택
/html/body/div/p[contains(text(), 'Lorem')] # 'Lorem'을 포함하는 태그 선택

//p[starts-with(text(), 'Vitae')] # 'Vitae'로 시작하는 태그 선택

+ 출처

https://hahahax5.tistory.com/2

'📂 Quality Assurance Study > 📄 QA 공부' 카테고리의 다른 글

[자동화 #1] Unity에서의 테스트 자동화 및 Jira 이슈 등록 자동화 (0)	2025.03.09
[도구 #2] Jira REST API 토큰 발급 및 이슈 조회 (0)	2025.03.02
[도구 #1] Jira 및 Confluence 사용 방법 (2)	2025.02.20
[용어 #1] BTS (Bug Tracking System)에 대하여 (3)	2025.01.13

📌 XPath(XML Path Language)란?

📌 HTML 계층 구조

📌 XPath 기본 문법

📌 다양한 방식의 XPath

'📂 Quality Assurance Study > 📄 QA 공부' 카테고리의 다른 글

티스토리툴바