python과 selenium에서 element를 찾을 때 사용하는 selector에 대해 알아보겠습니다.
By Class를 이용하여 다양한 방법으로 원하는 element를 찾을 수 있습니다.
class, id, css selector, xpath, name 등을 지원합니다.

일반적으로 element ID가 사용가능하고, 고유하며, 예측가능하다면 검색할 때 element ID를 통해 하는 것이 매우 빠르고, 복잡하게 DOM을 이용하는 방법들을 속도에서 앞섭니다.
고유한 ID가 없다면, CSS selector이 그 다음으로 선호되는 방법입니다.
XPath 또한 CSS selector만큼 잘 작동되지만, 구문이 복잡하며 디버깅을 하기 힘들고 꽤 느린 경향이 있다고 합니다.

selenium element selector By python

selenium selector By.id python

element id를 이용하여 찾는 방법입니다.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
import time

driver = webdriver.Chrome('./chromedriver')

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

login_input = driver.find_element_by_id("loginId")
login_input.send_keys("user", "email")
login_pw = driver.find_element_by_id("loginPw")
login_pw.send_keys("password")

time.sleep(2)

# 비공개 메소드 사용법
login_input.clear()
login_input = driver.find_element(By.ID, 'loginId')
login_input.send_keys("by", "email")
login_pw.clear()
login_pw = driver.find_element(By.ID, 'loginPw')
login_pw.send_keys("by_password")

time.sleep(3)

driver.close()

By.ID를 이용하여 element를 찾고 각각 값을 입력하였습니다.

비공개 함수에서 제공하는 By 속성 속성은 아래와 같습니다.
상황에 맞게 두 가지 중 선택하여 사용하시면 됩니다.

ID = "id"
XPATH = "xpath"
LINK_TEXT = "link text"
PARTIAL_LINK_TEXT = "partial link text"
NAME = "name"
TAG_NAME = "tag name"
CLASS_NAME = "class name"
CSS_SELECTOR = "css selector"

selenium selector By.className python

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

chk_login = driver.find_element_by_class_name("ico_check")
chk_login.click()

time.sleep(2)

chk_login = driver.find_element(By.CLASS_NAME, 'ico_check')
chk_login.click()

time.sleep(3)

By.CLASS_NAME를 이용하여 element를 찾고 로그인 상태 유지 버튼을 클릭하고 해제하는 이벤트를 주었습니다.

selenium selector By.name python

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

login_input = driver.find_element_by_name("loginId")
login_input.send_keys("userId")
login_pw = driver.find_element(By.NAME, "password")
login_pw.send_keys("password")

By.NAME를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium selector By.xpath python

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

login_input = driver.find_element_by_xpath('//*[@id="loginId"]')
login_input.send_keys("userId")
login_pw = driver.find_element(By.XPATH, '//*[@id="loginPw"]')
login_pw.send_keys("password")

By.XPATH를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium에서 element를 찾을 때 사용하는 By 클래스에 대해 알아보았습니다.
By 클래스에서 제공하는 다양한 함수를 활용하면
element id, classname, name, css selector, xpath 등을 활용하여 원하는 element를 찾을 수 있습니다.
다음에는 원하는 페이지 로딩 혹은 element 로딩이 끝날때까지 기다리는 Wait에 대해 알아보겠습니다.

[Selenium] - selenium python 페이지 열기

[Selenium] - selenium WebElement python

nodejs와 selenium-webdriver에서 페이지가 로딩 되지 않았는데 element를 찾는다면 당연히 에러가 날 수 밖에 없습니다.
또한 동적으로 element가 생성되는 element를 찾을 때 아직 로딩이 끝나지 않았다면 element를 찾을 수 없습니다.
이러한 상황에서 사용할 수 있는 wait 함수에 대해 알아보겠습니다.
페이지가 로딩이 되는 시간을 기다리는 wait과 element가 로딩되는 시간을 각각 지정할 수 있습니다.
특히 element는 모든 element를 찾을 때 공통으로 기다리는 시간을 지정할 수도 있고
각각의 element를 찾을 때 개별로 기다리는 시간을 지정할 수 있습니다.

selenium element timeout/wait By nodejs

selenium set timeouts nodejs

nodejs driver에서 공통으로 설정할 수 있는 timeout 값은 총 3가지가 있다.
implicit: element가 로딩이 될 때까지 기다리는 시간 설정 (milliseconds), default: 0
pageLoad: 페이지가 로딩이 될 때까지 기다리는 시간 설정 (milliseconds), default: 30000
script: script가 로딩이 될 때까지 기다리는 시간 설정 (milliseconds), default: 30000
implicit default 값이 0이기 때문에 설정해주는 것이 좋다.

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();

  await driver.manage().setTimeouts({ 
    implicit: 10000, // 10초
    pageLoad: 30000, // 30초
    script: 30000, // 30초
  });
  console.info( await driver.manage().getTimeouts() )
  // output: {implicit: 10000, pageLoad: 30000, script: 30000}

  setTimeout(async () => {
    await driver.quit();
    process.exit(0);
  }, 3000);
}

run();

설정 값을 확인해보니 {implicit: 10000, pageLoad: 30000, script: 30000}으로 설정된 것을 확인할 수 있다.

selenium element wait nodejs

const webdriver = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();

  // await driver.manage().setTimeouts({ 
  //     implicit: 10000, // 10초
  //     pageLoad: 30000, // 30초
  //     script: 30000, // 30초
  // });

  await driver.get('https://best.aliexpress.com/?lan=en&cv=14000&af=138730&aff_platform=portals-tool&sk=_AYGYIZ&aff_trace_key=69543d3e8b024d5a925cfe8c102002b7-1610580210996-02920-_AYGYIZ&cn=6814&dp=1028506c6be0e835b5f70fc8cf19b8&terminal_id=ed1f98885fb54f62a9035536191d2ea8');

  try {
    const reco_div = await driver.findElement(By.className('_2nJnr'));
  } catch (err) {
    console.error(err);
    await driver.executeScript(`alert('${err.name}, ${JSON.stringify(err.message)}')`);

    setTimeout(async () => {
      await driver.quit();
      process.exit(0);
    }, 3000);
  }
}

run();

implicit element timeout 값을 설정하지 않은 경우 바로 element를 찾지 못하고 error를 발생 시킨다.

const webdriver = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();

  await driver.manage().setTimeouts({ 
    implicit: 10000, // 10초
    pageLoad: 30000, // 30초
    script: 30000, // 30초
  });

  await driver.get('https://best.aliexpress.com/?lan=en&cv=14000&af=138730&aff_platform=portals-tool&sk=_AYGYIZ&aff_trace_key=69543d3e8b024d5a925cfe8c102002b7-1610580210996-02920-_AYGYIZ&cn=6814&dp=1028506c6be0e835b5f70fc8cf19b8&terminal_id=ed1f98885fb54f62a9035536191d2ea8');

  try {
    const reco_div = await driver.findElement(By.className('_2nJnr'));
  } catch (err) {
    console.error(err);
    await driver.executeScript(`alert('${err.name}, ${JSON.stringify(err.message)}')`);

    setTimeout(async () => {
      await driver.quit();
      process.exit(0);
    }, 3000);
  }
}

run();

implicit element timeout 값을 설정한 경우 바로 element를 찾지 못할 경우 바로 error를 발생 시키는 것이 아니라
설정한 시간 만큼 10000(milliseconds) 대기한 후에 error가 발생한다.

selenium에서 페이지 로딩을 기다리는 page timeout과 element를 찾을 때 element를 찾을 때 까지 기다리는 implicit wait에 대해 알아보았습니다.
implicit 설정은 element를 찾을 때 마다 각각 설정하는 방법도 있습니다.
상황에 맞추어 wait를 활용한다면 예외상황을 잘 해결할 수 있습니다.

python과 selenium에서 사용할 수 있는 Element에 대해 알아보겠습니다.
Element를 활용하면 selenium을 활용한 크롤링 혹은 웹 자동화를 할 수있습니다.
웹 페이지에서 Element를 찾고 Element에서 제공하는 다양한 함수에 대해 알아보겠습니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium WebElement python

WebElement는 DOM element를 나타냅니다.
element를 찾을 떄는 Webdriver를 이용해서 찾을 수도 있고 다른 WebElement를 통해서도 찾을 수 있습니다.

from selenium import webdriver
import time

driver = webdriver.Chrome('./chromedriver')

driver.get("https://www.tistory.com/")
element = driver.find_element_by_class_name("btn_tistory")
element.click()

time.sleep(3)
driver.close()

selenium findElement, findElements python

find_element: 일치하는 하나의 Element를 반환합니다.
find_elements: 일치하는 모든 Elements를 array로 반환합니다.

findElement python

driver.get("https://www.tistory.com/")

element = driver.find_element_by_css_selector("#kakaoHead > div > div.info_tistory > div > a")
print(element.text) # print: 시작하기

findElements python

driver.get("https://www.tistory.com/")

gnb_menus = driver.find_elements_by_css_selector("#kakaoGnb > ul > li")
print(len(gnb_menus)) # print: 4
print(gnb_menus[0].text) # print: 피드

findElements는 array를 리턴합니다.

selenium send_keys python

문자 데이터를 입력하거나 Key 입력 이벤트를 발생시킬 수 있습니다.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome('./chromedriver')

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

login_input = driver.find_element_by_css_selector("#loginId")
login_input.send_keys("user", "email")
login_pw = driver.find_element_by_css_selector("#loginPw")
login_pw.send_keys("password", Keys.ENTER)

Key.ENTER를 사용하여 패스워드 입력 후 엔터를 입력합니다.

selenium element click python

element의 click 이벤트를 발생시킵니다.

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

login_input = driver.find_element_by_css_selector("#loginId")
login_input.send_keys("user", "email")
login_pw = driver.find_element_by_css_selector("#loginPw")
login_pw.send_keys("password")
login_btn = driver.find_element_by_css_selector("#authForm > fieldset > button")
login_btn.click()

로그인 버튼 element를 찾고 click() 함수를 이용하여 click이벤트를 발생시킵니다.

selenium element text python

element의 sub-elements 포함한 모든 텍스트를 return합니다.

driver.get("https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F")

fields = driver.find_element_by_css_selector("#authForm > fieldset")
print(fields.text)
# print
# 로그인
# 로그인 상태 유지
# 아이디 / 비밀번호 찾기

element를 활용하여 원하는 DOM을 찾거나 혹은 모든 DOM 리스트를 찾는 방법에 대해 알아보겠습니다.
다음에는 By를 활용한 DOM을 찾는 다양한 방법에 대해 알아보겠습니다.

[Selenium] - selenium python 페이지 열기

[Selenium] - selenium element selector python

python과 selenium를 활용한 웹 크롤링에 대해 알아보겠습니다.
selenium은 다양한 브라우저(Chrome, Internet, Edge, Firefox, Opera, Safari)를 지원합니다.
selenium을 활용하면 웹페이지 정보 수집도 가능하고 원하는 웹 자동화 프로그램을 작성할 수 있습니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium 크롤링 phyton

chrome-driver 다운로드

chrome브라우저를 사용하기 위해 chromedriver를 chrome 버전에 맞게 다운로드 받아야합니다.

• chromedriver 다운로드 링크

pip selenium 설치

pip를 이용하여 selelnium을 사용하기 위해 selenium를 설치해줍니다.

$ pip install selenium

selenium python 페이지 열기

from selenium import webdriver
import time

# 1. chromedriver 경로 설정
driver = webdriver.Chrome('./chromedriver')

# 2. google 사이트 열기
driver.get("https://google.com")
     
# 3. 3초 후에 브라우저 종료
time.sleep(3)
driver.close()

chromedriver가 다른 경로에 있다면 chromedriver path를 설정합니다.

python에서 chromedriver와 selenium을 활용하여 브라우저를 오픈하고 원하는 주소로 이동하는 방법에 대해 알아보았습니다.
다음에는 원하는 DOM Elements를 찾고 입력하는 방법들에 대해 알아보겠습니다.

[Selenium] - selenium WebElement python
[Selenium] - selenium element selector python

nodejs와 selenium-webdriver에서 element를 찾을 때 사용하는 selector에 대해 알아보겠습니다.
By Class를 이용하여 다양한 방법으로 원하는 element를 찾을 수 있습니다.
class, id, css selector, xpath, name 등을 지원합니다.

일반적으로 element ID가 사용가능하고, 고유하며, 예측가능하다면 검색할 때 element ID를 통해 하는 것이 매우 빠르고, 복잡하게 DOM을 이용하는 방법들을 속도에서 앞섭니다.
고유한 ID가 없다면, CSS selector이 그 다음으로 선호되는 방법입니다.
XPath 또한 CSS selector만큼 잘 작동되지만, 구문이 복잡하며 디버깅을 하기 힘들고 꽤 느린 경향이 있다고 합니다.

selenium element selector By nodejs

selenium selector By.id nodejs

element id를 이용하여 찾는 방법입니다.

const webdriver = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();
  await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

  const loginInput = await driver.findElement(By.id('loginId'));
  await loginInput.sendKeys("userid");
  const loginPw = await driver.findElement(By.id('loginPw'));
  await loginPw.sendKeys("password");

  setTimeout(async () => {
    await driver.quit();
    process.exit(0);
  }, 3000);
}

run();

By.id를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium selector By.className nodejs

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const chkLogin = await driver.findElement(By.className('img_top ico_check'));
await chkLogin.click();

By.className를 이용하여 element를 찾고 로그인 상태 유지 버튼을 클릭하는 이벤트를 주었습니다.

selenium selector By.name nodejs

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.name('loginId'));
await loginInput.sendKeys("userid");
const loginPw = await driver.findElement(By.name('password'));
await loginPw.sendKeys("password");

By.name를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium selector By.xpath nodejs

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.xpath('//*[@id="loginId"]'));
await loginInput.sendKeys("userid");
const loginPw = await driver.findElement(By.xpath('//*[@id="loginPw"]'));
await loginPw.sendKeys("password");

By.xpath를 이용하여 element를 찾고 각각 값을 입력하였습니다.

selenium에서 element를 찾을 때 사용하는 By 클래스에 대해 알아보았습니다.
By 클래스에서 제공하는 다양한 함수를 활용하면
element id, classname, name, css selector, xpath 등을 활용하여 원하는 element를 찾을 수 있습니다.
다음에는 원하는 페이지 로딩 혹은 element 로딩이 끝날때까지 기다리는 Wait에 대해 알아보겠습니다.

[Selenium-크롤링] - selenium 크롤링 nodejs - 브라우저 열기

[Selenium-크롤링] - selenium element 찾기 nodejs

nodejs와 selenium-webdriver에서 사용할 수 있는 Element에 대해 알아보겠습니다.
Element를 적절히 활용하면 selenium을 활용한 크롤링 혹은 웹 자동화를 할 수있습니다.
Element를 찾고 Element에서 제공하는 다양한 함수에 대해 알아보겠습니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium WebElement nodejs

WebElement는 DOM element를 나타냅니다.
element를 찾을 떄는 Webdriver를 이용해서 찾을 수도 있고 다른 WebElement를 통해서도 찾을 수 있습니다.

const webdriver = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  const driver = await new webdriver.Builder()
    .forBrowser('chrome')
    .build();
  await driver.get('https://www.tistory.com/');

  const info_div = await driver.findElement(By.className('btn_tistory '));
  start_btn.click();

  setTimeout(async () => {
    await driver.quit();
    process.exit(0);
  }, 3000);
}

run();

selenium findElement, findElements nodejs

findElement: 일치하는 하나의 Element를 반환합니다.
findElements: 일치하는 모든 Elements를 array로 반환합니다.

findElement

await driver.get('https://www.tistory.com/');

const startBtn = await driver.findElement(By.css('#kakaoHead > div > div.info_tistory > div > a'));
console.log(await startBtn.getText());

findElements nodejs

await driver.get('https://www.tistory.com/');

const gnbMenus = await driver.findElements(By.css('#kakaoGnb > ul > li'));
console.log(gnbMenus.length);
console.log(await gnbMenus[0].getText());

findElements는 array를 리턴합니다.

selenium sendKeys nodejs

문자 데이터를 입력하거나 Key 입력 이벤트를 발생시킬 수 있습니다.

const { By, Key } = require('selenium-webdriver');

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.css('#loginId'));
await loginInput.sendKeys("email", "abc")
const pwInput = await driver.findElement(By.css('#loginPw'));
await pwInput.sendKeys("password", Key.ENTER)

Key.ENTER를 사용하여 패스워드 입력 후 엔터를 입력합니다.

selenium element click nodejs

element의 click 이벤트를 발생시킵니다.

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const loginInput = await driver.findElement(By.css('#loginId'));
await loginInput.sendKeys("email", "abc")
const pwInput = await driver.findElement(By.css('#loginPw'));
await pwInput.sendKeys("password")
const loginBtn = await driver.findElement(By.css('#authForm > fieldset > button'));
await loginBtn.click();

로그인 버튼 element를 찾고 click() 함수를 이용하여 click이벤트를 발생시킵니다.

selenium element getText nodejs

element의 sub-elements 포함한 모든 텍스트를 return합니다.

await driver.get('https://www.tistory.com/auth/login/old?redirectUrl=https%3A%2F%2Fwww.tistory.com%2F');

const fields = await driver.findElement(By.css('#authForm > fieldset'));
console.log(await fields.getText());
// output
// 로그인
// 로그인 상태 유지
// 아이디 / 비밀번호 찾기

element를 활용하여 원하는 DOM을 찾거나 혹은 모든 DOM 리스트를 찾는 방법에 대해 알아보겠습니다.
다음에는 By를 활용한 DOM을 찾는 다양한 방법에 대해 알아보겠습니다.

[Selenium-크롤링] - selenium 크롤링 nodejs - 브라우저 열기

[Selenium-크롤링] - selenium element selector By nodejs

nodejs와 selenium-webdriver를 활용한 크롤링에 대하 알아보겠습니다.
selenium을 활용하면 웹페이지 정보 수집도 가능하고 원하는 웹 자동화 프로그램을 작성할 수 있습니다.
selenium은 다양한 브라우저(Chrome, Internet, Edge, Firefox, Opera, Safari)를 지원합니다.
예제에서는 chrome 브라우저를 사용합니다.

selenium 크롤링 nodejs

chrome-driver 다운로드

chrome브라우저를 사용하기 위해 chromedriver를 chrome 버전에 맞게 다운로드 받아야합니다.

• chromedriver 다운로드 링크

selenium-webdriver 설치

selelnium을 사용하기 위해 selenium-webdriver를 설치해줍니다.

$ npm install selenium-webdriver

nodejs

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const run = async () => {
  // 1. chromedriver 경로 설정
  // chromedriver가 있는 경로를 입력
  const service = new chrome.ServiceBuilder('./chromedriver').build();
  chrome.setDefaultService(service);

  // 2. chrome 브라우저 빌드
  const driver = await new webdriver.Builder()
      .forBrowser('chrome')
      .build();

  // 3. google 사이트 열기
  await driver.get('https://google.com');
  
  // 4. 3초 후에 브라우저 종료
  setTimeout(async () => {
      await driver.quit();
      process.exit(0);
  }, 3000);
}

run();

chromedriver가 다른 경로에 있다면 chromedriver path를 설정합니다.

chromedriver와 selenium을 활용하여 간단하게 브라우저를 오픈하고 원하는 주소로 이동하는 방법에 대해 알아보았습니다.
다음에는 원하는 DOM Elements를 찾고 입력하는 방법들에 대해 알아보겠습니다.

[Selenium-크롤링] - selenium element 찾기 nodejs

[Selenium-크롤링] - selenium element selector By nodejs