Automating web browsers using Microsoft Playwright

This is a guide on automating web browsers using Microsoft Playwright. It covers installing Playwright, opening a browser, and crawling Naver News.

8
Automating web browsers using Microsoft Playwright

0. What is Playwright?

Playwright is an open-source library developed by Microsoft for automating web browsers.

Although it was not originally designed for web scraping, it demonstrates excellent performance in this area when combined with browsers and configurations.

It can be used in various languages such as Node.js and Python, and currently supports multiple browsers including Chrome, Firefox, WebKit (mobile Safari), and Electron.

This post uses Python.

1. Installing Playwright

Install the playwright package:

pip install playwright

Install necessary browsers:

playwright install

2. Opening a Browser

Let's try accessing the Naver homepage for testing.

# 패키지 import
import asyncio # 비동기 라이브러리
from playwright.async_api import Playwright, async_playwright

async def run(playwright: Playwright) -> None:
    # headless=False => 브라우저 GUI 모드로 실행
    browser = await playwright.chromium.launch(headless=False) # 크롬 사용
    context = await browser.new_context()  # 새 콘텍스트 생성
    page = await context.new_page()  # 새 페이지 열기
    await page.goto("<https://naver.com/>")  # 네이버 홈페이지로 이동

    await context.close() # 콘텍스트 종료
    await browser.close() # 브라우저 종료

async def main() -> None:
    async with async_playwright() as playwright:
        await run(playwright)

asyncio.run(main()) # 실행

notion image

After running the above code, you can see that the browser opened in 'incognito mode' and successfully accessed the Naver homepage.

3. Scraping Naver News

3.1. Obtaining the URL

After finding the URL pattern, it is as follows:

f"<https://search.naver.com/search.naver?where=news&query=>{인코딩된 검색어}&sort={정렬 기준}&field=0&pd=3&start={시작 페이지}"
  • Encoded search term: Insert the search term using the quote_plus method.
  • Sorting options: {"Relevance": 0, "Latest": 1, "Oldest": 2}
  • Starting page: Increments by 10 per page, such as {1st page: 1, 2nd page: 11}.

Therefore, the search URL is as follows:

# 정렬 옵션("관련도순")과 시작 페이지("1")은 고정
search_url = f"<https://search.naver.com/search.naver?where=news&query={quote_plus(keyword)}&sort=0&field=0&pd=3&start=1>"

notion image

By accessing this URL, you can view the search results for the entered keyword on Naver News.

3.2. Data to Collect + Xpath

  • Article list: //*[@class='list_news']/li
  • Article URL: href attribute of .//a[@class='news_tit']
  • Press company: .//a[@class='info press']
  • Publication date: .//div[@class='info_group']/span[@class='info']
  • Title: title attribute of .//a[@class='news_tit']
  • Summary of the article: .//div[@class='news_dsc']

3.3. Scraping Methods

3.3.1. Selecting Elements with Xpath

In Playwright, elements can be retrieved using xpath as follows:

title_element = await page.query_selector("xpath=//a[@class='news_tit']")

The code execution pauses until the query_selector method is completed with await.

Provide the xpath as an argument, following "xpath=".

3.3.2. Getting Text

To retrieve text from HTML elements, use the inner_text() method.

Since Playwright asynchronously accesses web elements, you cannot select elements and retrieve text simultaneously with query_selector().inner_text().

Use await to wait for the preceding task to complete.

# HTML 요소 선택
title_element = await page.query_selector("xpath=//a[@class='news_tit']")
# 텍스트 가져오기
title_text = await title_element.inner_text()

3.3.3. Getting Attributes

notion image

To retrieve attributes from HTML elements like the above, use the get_attribute() function.

Similarly, use await.

# HTML 요소 선택
title_element = await page.query_selector("xpath=//a[@class='news_tit']")
# href 속성 가져오기
news_link = await title_element.get_attribute("href")
# title 속성 가져오기
title = await title_element.get_attribute("title")

3.4. Scraping Code

3.4.1. Package Import

import re
import asyncio
from pprint import pprint
from datetime import datetime, timedelta
from urllib.parse import quote_plus
from playwright.async_api import Playwright, async_playwright

3.4.2. Date Conversion Function

Normal case:

notion image

Problematic case:

notion image

When the publication date xpath is set to .//div[@class='info_group']/span[@class='info'], errors occurred due to the class 'info' being the same for "16면 TOP" and "4 hours ago" in the image above.

Therefore, if the time contains "면" (Korean character for 'page'), it returns an error message; otherwise, it converts the date format to %Y-%m-%d.

async def convert_write_date(raw_date):
    now = datetime.now()

    if "면" in raw_date:
        return f"[error] raw_date is not datetime form: {raw_date}"

    if "분 전" in raw_date:
        minutes = re.findall('\d+', raw_date)[0]
        article_date = now - timedelta(minutes=float(minutes))
    elif "시간 전" in raw_date:
        hours = re.findall('\d+', raw_date)[0]
        article_date = now - timedelta(hours=float(hours))
    elif "일 전" in raw_date:
        days = re.findall('\d+', raw_date)[0]
        article_date = now - timedelta(days=float(days))
    else:
        article_date = datetime.strptime(raw_date, "%Y-%m-%d")

    article_date = datetime.strftime(article_date, "%Y-%m-%d")

    return article_date

3.4.3. run Function

async def run(playwright: Playwright) -> None:
    # 파라미터 설정
    keyword = input("Keyword: ")

    # 컨텍스트 및 브라우저 설정
    browser = await playwright.chromium.launch(headless=False)
    context = await browser.new_context()
    page = await context.new_page()

    # 브라우저 이동
    search_url = f"<https://search.naver.com/search.naver?where=news&query={quote_plus(keyword)}&sort=0&field=0&pd=3&start=1>"
    await page.goto(search_url)

    # 검색 결과 리스트
    articles = await page.query_selector_all("xpath=//*[@class='list_news']/li")

    # 각 리스트에 대해 반복
    for article in articles:
        article_info = {}

        # 기사 URL, 제목
        title_element = await article.query_selector("xpath=.//a[@class='news_tit']")
        article_info["URL"] = await title_element.get_attribute("href")
        article_info["제목"] = await title_element.get_attribute("title")

        # 언론사
        press_element = await article.query_selector("xpath=.//a[@class='info press']")
        raw_press = await press_element.inner_text()
        article_info["언론사"] = raw_press.replace("언론사 선정", "")

        # 작성일자
        date_element = await article.query_selector("xpath=.//div[@class='info_group']/span[@class='info']")
        raw_date = await date_element.inner_text()
        # raw_date에 에러 메시지가 있을 경우 HTML 재선택
        if "[error]" in await convert_write_date(raw_date):
            date_element_list = await article.query_selector_all("xpath=.//div[@class='info_group']/span[@class='info']")
            date_element = date_element_list[-1] # 마지막 요소
            raw_date = await date_element.inner_text()
            if "[error]" in await convert_write_date(raw_date):
                raise # 작성일자 찾지 못해 에러 발생
            article_info["작성일자"] = await convert_write_date(raw_date)
        else:
            article_info["작성일자"] = await convert_write_date(raw_date)

        # 본문 요약
        summary_element = await article.query_selector("xpath=.//div[@class='news_dsc']")
        summary = await summary_element.inner_text()
        article_info["본문 요약"] = summary

        print("=" * 70)
        pprint(article_info)

    # 컨텍스트 및 브라우저 종료
    await context.close()
    await browser.close()

3.4.4. Executing the run Function

async def main() -> None:
    async with async_playwright() as playwright:
        await run(playwright)


asyncio.run(main())

3.5. Collection Results

Here are the search results for Naver News when searching for "AI":

Keyword: AI
======================================================================
{'URL': '<http://www.newsis.com/view/?id=NISX20230908_0002443154&cID=10406&pID=13100>',
 '본문 요약': '정부가 군 장병과 대학생 등을 대상으로 국방 인공지능(AI) 기술 활용 대회를 진행한다. 청년들의 AI 기술 활용 능력을 '
          "통해 국방 분야 난제 해결에 나선다는 목표다. 과학기술정보통신부와 국방부는 '2023 제2회 국방...",
 '언론사': '뉴시스',
 '작성일자': '2023-09-08',
 '제목': "과기정통부, 국방부와 '국방 AI' 경진대회 개최…총 상금 8200만원"}
======================================================================
{'URL': '<https://www.mk.co.kr/article/10825161>',
 '본문 요약': '마이크로소프트가 인공지능(AI) 기술을 이용해 암 식별 프로그램을 개발한다. MS는 7일(현지시각) 디지털 병리학 '
          '제공업체인 페이지(Paige)와 협력해 세계 최대의 이미지 기반 AI 모델을 구축하고 있다고 밝혔다. 이 AI...',
 '언론사': '매일경제',
 '작성일자': '2023-09-08',
 '제목': '“희소암까지 싹 잡아낸다”…MS, AI 기반 암 식별 프로그램 개발'}
======================================================================
{'URL': '<https://zdnet.co.kr/view/?no=20230907220708>',
 '본문 요약': '초거대 인공지능(AI)을 전산업으로 확산하기 위한 산‧학‧연 전문가 협의체가 만들어졌다. 과기정통부는 이런 목적을 가진 '
          "'AI 데이터 융합 네트워크' 발족식을 8일 서울 롯데백화점 인근 이비스 앰배서더 명동 호텔 19층...",
 '언론사': '지디넷코리아',
 '작성일자': '2023-09-08',
 '제목': '"초거대AI 전산업 확산"···AI데이터 융합 네트워크 발족'}
======================================================================
{'URL': '<https://www.news1.kr/articles/5164994>',
 '본문 요약': '박정환 문화전문기자 = 인공지능(Ai)이 국내 거주 중인 외국인과 다문화 가정 자녀들의 한국어 실력을... 열리는 '
          "'제1회 AI 한국어 말하기 대회'에서다. 제1회 AI 한국어 말하기 대회는 한글과컴퓨터는 자회사...",
 '언론사': '뉴스1',
 '작성일자': '2023-09-08',
 '제목': '예선 심사위원은 AI…외국인·다문화가정 자녀의 한국어 실력 경연대회'}
======================================================================
{'URL': '<https://www.yna.co.kr/view/AKR20230908046351017?input=1195m>',
 '본문 요약': 'AI) 기술로 진화한 플랫폼을 만들겠다는 비전을 제시했다. 카카오모빌은 8일 서울 강남구 그랜드인터컨티넨탈 '
          "서울파르나스에서 올해로 2회째를 맞는 '넥스트 모빌리티'(NEMO) 행사를 열어 '우리의 세상을 이해하는 AI...",
 '언론사': '연합뉴스',
 '작성일자': '2023-09-08',
 '제목': '카카오모빌 "내년 상반기까지 모빌리티 특화 생성AI 엔진 구축"(종합)'}
======================================================================
{'URL': '<https://www.munhwa.com/news/view.html?no=2023090801071607275001>',
 '본문 요약': '■ 카카오모빌리티‘네모2023’ 내년 상반기 생성AI 엔진 구축 이동·물류·배송분야 적용 계획 모임장소 제안서 '
          '택시호출까지 맞춤여행경로 생성서비스 제시 ‘AI랩’서 자율주행로봇 등 전시 카카오모빌리티가 내년...',
 '언론사': '문화일보',
 '작성일자': '2023-09-08',
 '제목': '“모빌리티에 특화된 생성형 AI엔진 구축”'}
======================================================================
{'URL': '<http://www.edaily.co.kr/news/newspath.asp?newsid=01420246635737824>',
 '본문 요약': '프라이빗 뱅커(PB) 1000여 명이 2차전지 다음으로 인공지능(AI)·반도체 테마 상장지수펀드(ETF)를... '
          '‘인공지능(AI)&반도체’가 335명(32%)의 선택을 받아 1위를 했다고 7일 밝혔다. 이어 249명(23%)이 '
          '△‘2차전지&전기차’...',
 '언론사': '이데일리',
 '작성일자': '2023-09-07',
 '제목': '"2차전지 다음은 AI·반도체"…PB 1000명이 주목한 이유'}
======================================================================
{'URL': '<https://www.etoday.co.kr/news/view/2282422>',
 '본문 요약': '인공지능(AI)보이스봇이 안정적으로 정착되면서, 상담사가 보다 섬세한 고객 케어에 집중할 수 있었던 결과라고 설명했다. '
          'KT는 2017년부터 준비를 시작해, 2021년 4월, 365일 24시간 상담이 가능한 AI 보이스봇 ‘지니’...',
 '언론사': '이투데이',
 '작성일자': '2023-09-08',
 '제목': 'KT, 10년 연속 우수 콜센터…AI가 응대하고 사람이 집중케어'}
======================================================================
{'URL': '<http://news.mt.co.kr/mtview.php?no=2023090810400076118>',
 '본문 요약': '월간큐브/나무는 고객의 월별 투자활동을 시각화해 보여주고 해당 월의 시황을 반영한 인공지능(AI) 음악과 함께 제공하는 '
          '서비스다. 투자자들의 즐거운 순간을 포착해 투자에 대한 긍정적인 경험을 강화하기 위해...',
 '언론사': '머니투데이',
 '작성일자': '2023-09-08',
 '제목': '내 투자가 AI 음악으로…NH투자증권, 월간큐브·월간나무 출시'}
======================================================================
{'URL': '<https://www.hankyung.com/article/202309083127i>',
 '본문 요약': '중국에서 인공지능(AI) 백가쟁명(百家爭鳴) 시대가 열렸다. 기존 중국 정보기술(IT) 업계 강호인 바이두... 다만 '
          "공산당의 사상 검열로 인해 중국산 AI가 글로벌 경쟁에서 뒤처질 경우 '그들만의 리그'가 될 수 있다는...",
 '언론사': '한국경제',
 '작성일자': '2023-09-08',
 '제목': '중국 \'AI 백가쟁명\' 시대 열렸다…"100개 넘는 모델이 전쟁"'}

4. Conclusion

In fact, Playwright is not specifically for web scraping but a framework for web testing and automation.

However, Playwright is a powerful tool for web scraping as well.

Although not covered in this post, it has various convenient features.

It supports multiple browsers like Chromium, Firefox, WebKit, enabling web scraping without restrictions on browsers or engines, especially with high compatibility for modern websites.

It can also enhance scraping performance by skipping unnecessary image or stylesheet loading.

When we do web scraping, we mostly use bs4 or selenium, which are already excellent libraries. However, trying out Playwright and experiencing its advantages mentioned above would be even better.

Also, check out this article:

Data Collection, Automate Now

Start in 5 minutes without coding · Experience crawling 5,000+ websites

Start for free →

Comments

Add Comment

Your email won't be published and will only be used for reply notifications.

Continue Reading

Get notified of new posts

We'll email you when 해시스크래퍼 기술 블로그 publishes new content.

Your email will only be used for new post notifications.