Element 찾는 방법

Element를 찾는 다양한 방법에 대해 소개하려 한다.
자세한 내용은 아래 예제를 참고하기 바람.

Element 찾기 - id

<input type="email" class="TextField-module__input" id="userEmail" name="user[email]" placeholder="[email protected]" value="">

locator = (By.ID, "userEmail")

Element 찾기 - name

<input type="email" class="TextField-module__input" id="userEmail" name="user[email]" placeholder="[email protected]" value="">

locator = (By.NAME, "user[email]")

Element 찾기 - h1 tag

<h1 class="css-jvj358--ProductHeader-style--title">제주도 한옥 민박</h1>

locator = product_title = (By.TAG_NAME, "h1")

Element 찾기 - img alt

<img alt="coupon banner" loading="lazy" class="css-y5m0bt" src="https://testurl.com">

locator = (By.XPATH, '//img[@alt="coupon banner"]')
locator = (By.CSS_SELECTOR, 'img[alt="coupon banner"]')

Element 찾기 - img alt

<img alt="coupon banner" loading="lazy" class="css-y5m0bt" src="https://testurl.com">

locator = (By.XPATH, '//img[@src="https://testurl.com]')

Elements 찾기 - img alt (같은 값이 여러개)

<img src="image/png" alt="dropdown caret">
<img src="image_1/png" alt="dropdown caret">
<img src="image_2/png" alt="dropdown caret">

locator1 = (By.XPATH, ("(//img[@alt='dropdown caret'])[1]"))    # img src="image/png"와 맵핑
locator2 = (By.XPATH, ("(//img[@alt='dropdown caret'])[2]"))    # img src="image_1/png"와 맵핑
locator3 = (By.XPATH, ("(//img[@alt='dropdown caret'])[3]"))    # img src="image_2/png"와 맵핑

Element 찾기 - span text

<span class="css-18edq37--Partner-style--contactText">문의하기</span>
<span class="css-1s4v6ia">객실 선택</span>

locator = (By.XPATH, '//span[text()="문의하기"]')
locator = (By.XPATH, '//span[text()="객실 선택"]')

Element 찾기 - span class and text

<span class="css-1s4v6ia">예약 취소</span>

locator = (By.XPATH, '//span[@class="css-1s4v6ia" and contains(text(), "예약 취소")]')

Element 찾기 - Xpath 상대경로

<div class="css-l6jdxe">
   <div class="css-55cwgi">
      <div class="css-j7xuov">
      <div class="css-1wome70">
         <span class="css-ghu4lc">예약하지마세요~!! (자동화 테스트 상품)</span>
      </div>
   </div>
   <div class="css-1edbqdp">
      <span>선택</span></button></span>
   </div>
</div>

locator = (By.XPATH, '//span[text()="예약하지마세요~!! (자동화 테스트 상품)"]/../../..//span[text()="선택"]')

Element 찾기 - div class

<div class="css-l6jdxe">

locator = (By.XPATH, '//*[@class="css-l6jdxe"]')               
locator = (By.XPATH, '//div[contains(@class, "css-l6jdxe")]')
locator = (By.CSS_SELECTOR, "div.css-l6jdxe")

Element 찾기 - placeholder

<input type="text" placeholder="홍길동" maxlength="50" class="css-hc9jwh" value="">

locator = (By.CSS_SELECTOR, "div>input[placeholder='홍길동']")