# driver를 이용해 해당 사이트에 요청을 보내봅시다.
driver = webdriver.Chrome(service = Service(ChromeDriverManager().install()))

driver.get("https://hashcode.co.kr")

driver.implicitly_wait(0.5)

button = driver.find_element(By.CLASS_NAME, "UtilMenustyle__Link-sc-2sjysx-4.ewJwEL")

# 내비게이션 바에서 "로그인" 버튼을 찾아 눌러봅시다.
ActionChains(driver).click(button).perform()

# "아이디" input 요소에 여러분의 아이디를 입력합니다.
id_input = driver.find_element(By.XPATH, '//input[@placeholder="이메일을 입력해 주세요"]')
ActionChains(driver).send_keys_to_element(id_input, "chaujin00@gmail.com").perform()

# "패스워드" input 요소에 여러분의 비밀번호를 입력합니다.
pw_input = driver.find_element(By.XPATH, '//input[@placeholder = "비밀번호를 입력해 주세요"]') #??!
ActionChains(driver).send_keys_to_element(pw_input, "1234").perform()


# "로그인" 버튼을 눌러서 로그인을 완료합니다.
button = driver.find_element(By.CLASS_NAME, "ayxkplSwAOlzWhl7UloQ.IQmH8pxs6MpeDFpLSMPh.Gosd7zfsHAxk1MOYSkL1")
ActionChains(driver).click(button).perform()

문제

• 동적 웹사이트에서 정적 클래스 이름을 활용해 크롤링하면 에러 발생

시도

• XPath와 placeholder를 사용해 아이디와 비밀번호의 입력 위치를 찾음

해결

• 클래스 이름이 같은 id와 password의 input이 구분이 됨

배운 점

• placeholder: HTML에서 <input> 요소 등에 사용되는 속성으로, 사용자가 입력하지 않은 경우 필드에 표시되는 힌트 텍스트. 사용자가 입력을 시작하면 placeholder 텍스트는 자동으로 사라짐
• XPath(XML Path Language): XML 및 HTML 문서의 요소를 탐색하고 찾기 위해 사용되는 언어로 문서의 계층 구조를 따라 요소를 선택할 수 있어 동적 웹페이지 스크래핑에 유용함

• 절대 경로: 문서의 루트부터 요소까지의 전체 경로를 명시
  /html/body/div[1]/div[2]/button
• 상대 경로: 원하는 요소만 지정, 더 유연하고 보편적으로 사용
  //button[@id="login"]

XPath 주요 함수

• //: 문서 전체에서 요소를 검색
• @attribute: 특정 속성을 기반으로 검색
• contains(): 속성값 또는 텍스트가 특정 문자열을 포함하는 요소 검색
• text(): 요소의 텍스트를 기준으로 검색
• *: 모든 요소 선택
• ..: 부모 요소로 이동