대부분의 테스트 자동화 엔지니어에게 심사 중인 사이트의 페이지 원본을 검색하는 것은 일상적인 작업이다.페이지 소스 코드에 대한 분석은 일반 웹 사이트 UI 테스트, 기능 테스트 또는 보안 테스트 연습에서 발견된 오류를 제거하는 데 도움이 됩니다.매우 복잡한 응용 프로그램 테스트 과정에서 자동화 테스트 스크립트의 작성 방식은 프로그램에서 오류가 발견되면 자동으로 실행될 수 있다.
특정 페이지의 소스 코드를 저장합니다. 알림 페이지 URL의 책임자입니다. 특정 요소 또는 코드 블록의 HTML 소스 코드를 추출하고, 특정 독립형 HTML 웹 요소 또는 코드 블록에서 오류가 발생하면 담당 기관에 위임합니다.이것은 전방 코드의 논리와 문법 오류를 추적하고 복구하는 간단한 방법이다.본고에서 우리는 먼저 관련 용어를 이해한 다음에 파이톤을 사용하여Selenium WebDriver에서 페이지 원본 코드를 가져오는 방법을 모색한다.
HTML 페이지 소스 코드란?
비기술 용어에서, 이것은 브라우저가 심미적인 방식으로 화면에 정보를 표시하도록 지도하는 지령이다.브라우저는 이 명령들을 자신의 방식으로 해석하여 클라이언트의 브라우저 화면을 만듭니다.일반적으로 하이퍼텍스트 태그 언어(HTML), 캐스케이드 스타일시트(CSS) 및 Javascript를 사용하여 작성됩니다.
웹 페이지를 구성하는 이 전체 HTML 명령어를 페이지 소스 또는 HTML 소스 또는 소스 코드라고 합니다.사이트 소스 코드는 각 웹 페이지에서 온 소스 코드의 집합이다.
다음은 제목, 폼, 이미지, 제출 단추가 있는basic
page 소스 코드 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Source Example - LambdaTest</title>
</head>
<body>
<h2>Debug selenium testing results : LambdaTest</h2>
<img src="https://cdn.lambdatest.com/assetsnew/images/debug-selenium-testing-results.jpg" alt="debug selenium testing" width="550" height="500"><br><br>
<form action="/">
<label for="debug">Do you debug test results using LambdaTest?</label><br>
<input type="text" id="debug" name="debug" value="Of-course!"><br>
<br>
<input type="submit" value="Submit">
</form> <br><br>
<button type="button" onclick="alert('Page Source Example : LambdaTest!')">Click Me!</button>
</body>
</html>
HTML 웹 요소란?
HTML 웹 요소를 설명하는 가장 간단한 방법은 "HTML 페이지 소스 코드를 구성하는 모든 HTML 태그는 웹 요소입니다."이것은 웹 페이지의 미디어 대상인 이미지, 오디오, 동영상, JS 함수, 심지어
표시에 포장된 JSON 대상인 HTML 코드 블록일 수 있다.
위의 예에서 –
은 HTML 웹 요소이고<br>바디 탭의 하위 요소도 HTML 웹 요소입니다. 예를 들어 <img>, <button> 등입니다.<br><h2>
<a name="how-to-get-page-source-in-selenium-webdriver-using-python" href="#how-to-get-page-source-in-selenium-webdriver-using-python" class="anchor" rel="noreferrer noopener nofollow">
</a>
How To Get Page Source In Selenium WebDriver Using Python?
</h2> <br><a href="https://www.lambdatest.com/blog/selenium-webdriver-tutorial-with-examples/?utm_source=dev&utm_medium=Blog&utm_campaign=Nishant-2032021&utm_term=Nishant" rel="noreferrer noopener nofollow">Selenium WebDriver</a>는 강력한 자동화 테스트 도구로 자동화 테스트 엔지니어에게 일련의 기존의 API를 제공한다.Selenium WebDriver에서 페이지 소스 코드를 가져오도록 하기 위해 Selenium Python은 브라우저에서 현재 활성 URL의 HTML 소스 코드를 가져오는 페이지 source라는 드라이버 함수를 제공합니다.<br>또는 Python 요청 라이브러리의 "GET"함수를 사용하여 페이지 소스 코드를 로드할 수도 있습니다.다른 방법은 드라이버 함수인 excute script를 사용하여 javascript를 실행하고 Selenium WebDriver로 하여금 Python의 페이지 소스 코드를 가져오게 하는 것이다.페이지 소스 코드를 가져오는 가장 권장되지 않는 방법은 XPath를 "소스 코드 보기:"URL과 함께 사용하는 것입니다.Python을 사용하여 Selenium WebDriver에서 페이지 소스 코드를 가져오는 네 가지 방법의 예를 살펴보겠습니다.<br>GitHub에서 호스팅된 작은 예제<a href="https://pynishant.github.io/" rel="noreferrer noopener nofollow">web page</a>를 사용하여 네 가지 예제를 모두 설명합니다.이 페이지는 Selenium Python에서 LambdaTest를 사용하여 프레젠테이션 <a href="https://www.lambdatest.com/blog/drag-and-drop-in-selenium-python/?utm_source=dev&utm_medium=Blog&utm_campaign=Nishant-2032021&utm_term=Nishant" rel="noreferrer noopener nofollow">drag and drop testing</a> 을 하기 위해 만들어졌습니다.<br><h3>
<a name="get-html-page-source-using-driverpagesource" href="#get-html-page-source-using-driverpagesource" class="anchor" rel="noreferrer noopener nofollow">
</a>
Get HTML Page source Using driver.page_source
</h3> <br>ChromeDriver에서 "pynishant.github.io"를 가져와 "page source.html"이라는 파일에 저장합니다.이 파일 이름은 선택한 파일 이름일 수 있습니다.다음에 드라이버를 닫기 전에 파일 내용을 읽고 터미널에 인쇄합니다.<br><pre class="highlight plaintext"><code>from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://pynishant.github.io/")
pageSource = driver.page_source
fileToWrite = open("page_source.html", "w")
fileToWrite.write(pageSource)
fileToWrite.close()
fileToRead = open("page_source.html", "r")
print(fileToRead.read())
fileToRead.close()
driver.quit()
</code></pre>위 스크립트를 성공적으로 실행하면 터미널 출력에 다음 페이지 원본이 표시됩니다.<br><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/838c043ad060ceb65eedea84b6ce50b6.png" loading="lazy"/></a> <br><h3>
<a name="get-html-page-source-using-driverexecutejavascript" href="#get-html-page-source-using-driverexecutejavascript" class="anchor" rel="noreferrer noopener nofollow">
</a>
Get HTML Page Source Using driver.execute_javascript
</h3> <br>이전 예에서 "driver.page source"줄을 주석(또는 바꾸고) 다음 줄을 추가해야 합니다."driver.execute script는 Selenium Python WebDriver API로 Selenium 환경에서 JS를 실행하는 데 사용됩니다. 여기서 HTML 바디 요소를 반환하는 JS 스크립트를 실행합니다.<br><pre class="highlight plaintext"><code># pageSource = driver.page_source
pageSource = driver.execute_script("return document.body.innerHTML;")
</code></pre>출력 코드는 다음과 같습니다 -<br><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/350adee4ebc16e9aa63487236be4e71a.png" loading="lazy"/></a> <br>보시다시피 바디 요소의 inner HTML만 되돌려줍니다.지난번 출력과 마찬가지로, 우리는 전체 페이지의 원본 코드를 얻지 못했다.전체 문서를 얻기 위해 "document.documentElement.outerHTML"을 실행합니다.execute 스크립트 줄은 다음과 같습니다 -<br><pre class="highlight plaintext"><code>pageSource = driver.execute_script("return document.documentElement.outerHTML;")
</code></pre>이것은 바로 우리가 "driver.page source"를 사용하여 얻은 출력을 제공합니다<br>Selenium WebDriver에서 Python의 요청 라이브러리를 사용하여 페이지 소스 코드를 가져옵니다.이 방법은 <a href="https://www.lambdatest.com/selenium?utm_source=dev&utm_medium=Blog&utm_campaign=Nishant-2032021&utm_term=Nishant" rel="noreferrer noopener nofollow">Selenium</a>와는 상관없이 웹 페이지 원본을 가져오는 순수한'파이토닉'방법입니다.여기서, 우리는 Python의 요청 라이브러리를 사용하여 URL에 get 요청을 보내고, 요청한 응답 (즉 페이지 원본) 을 HTML 파일에 저장하여 터미널에 인쇄합니다.<br>다음은 스크립트입니다.<br><pre class="highlight plaintext"><code>import requests
url = 'https://pynishant.github.io/'
pythonResponse = requests.get(url)
fileToWrite = open("py_source.html", "w")
fileToWrite.write(pythonResponse.text)
fileToWrite.close()
fileToRead = open("py_source.html", "r")
print(fileToRead.read())
fileToRead.close()
</code></pre>이 방법은 웹 페이지 소스 코드를 빠르게 저장하는 데 사용할 수 있으며, 웹 페이지를 Selenium 제어 브라우저에 불러올 필요가 없다.이와 유사하게 URllib Python 라이브러리를 사용하여 HTML 페이지 소스 코드를 가져올 수 있습니다.<br>[소스 보기:] URL을 사용하여 HTML 페이지 소스 가져오기<br>이것은 거의 필요하지 않지만, 대상 URL에 '원본 보기' 를 추가하고 브라우저 창에 불러와서 원본 코드를 불러오고 수동 테스트에 저장할 수 있습니다.<br><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/65e33fcefda62b0f62f3d59c563bd6a7.png" loading="lazy"/></a> <br>프로그래밍 방식으로 <a href="https://www.lambdatest.com/blog/python-selenium-screenshots/?utm_source=dev&utm_medium=Blog&utm_campaign=Nishant-2032021&utm_term=Nishant" rel="noreferrer noopener nofollow">screenshots in Python Selenium</a>의 소스 코드를 가져오면 다음을 사용할 수 있습니다.<br><pre class="highlight plaintext"><code>driver.get("view-source:https://pynishant.github.io/")
</code></pre><h3>
<a name="get-html-page-source-in-selenium-python-webdriver-using-xpath" href="#get-html-page-source-in-selenium-python-webdriver-using-xpath" class="anchor" rel="noreferrer noopener nofollow">
</a>
Get HTML Page Source In Selenium Python WebDriver Using XPath
</h3> <br>Selenium WebDriver에서 페이지 소스 코드를 가져오도록 하는 네 번째 방법은 XPath를 사용하여 저장하는 것입니다.여기서 페이지 source를 사용하거나 JavaScript를 실행하지 않고 <html> 소스 요소를 식별하여 추출합니다.이전 페이지의 원본 코드를 주석하여 논리를 가져오고 다음 내용으로 대체합니다 -<br><pre class="highlight plaintext"><code># pageSource = driver.page_source
pageSource = driver.find_element_by_xpath("//*").get_attribute("outerHTML")
</code></pre>위 스크립트에서 드라이버 방법인 "find element by xpath"를 사용하여 웹 페이지의 HTML 요소를 찾습니다.우리는 원본 노드<code>"//*"</code>를 사용하여 문서를 입력하고'외부 HTML', 즉 문서 자체를 가져옵니다.출력은 우리가 이전에 드라이버를 사용해서 얻은 것과 같다.페이지 출처<br><h2>
<a name="how-to-retrieve-html-source-of-webelement-in-selenium" href="#how-to-retrieve-html-source-of-webelement-in-selenium" class="anchor" rel="noreferrer noopener nofollow">
</a>
How To Retrieve HTML Source Of WebElement In Selenium?
</h2> <br>Selenium WebDriver에서 WebElement의 HTML 소스 코드를 가져오려면 <a href="https://www.lambdatest.com/blog/selenium-webdriver-with-python/?utm_source=dev&utm_medium=Blog&utm_campaign=Nishant-2032021&utm_term=Nishant" rel="noreferrer noopener nofollow">Selenium Python WebDriver</a>의 get 속성 방법을 사용할 수 있습니다.우선, 드라이버 포지셔닝 방법 (xpath에서 요소를 찾거나 css 선택기로 요소를 찾음) 을 사용하여 HTML 웹 요소를 가져옵니다.그런 다음 이 요소에 get attribute() 방법을 적용하여 HTML 소스 코드를 가져옵니다.<br>가령 pynishant에서 왔다고 가정하십시오.github.io, id가'div1'인div의 원본 코드를 가져오고 출력하려고 합니다.코드는 다음과 같다-<br><pre class="highlight plaintext"><code>from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://pynishant.github.io/")
elementSource = driver.find_element_by_id("div1").get_attribute("outerHTML")
print(elementSource)
driver.quit()
</code></pre>다음은 출력입니다.<br><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/b6ec154b2c83874856ab8408d0aaebbd.png" loading="lazy"/></a> <br>예를 들어 WebElement의 하위 요소나 innerHTML을 가져오려면<br><pre class="highlight plaintext"><code>driver.find_element_by_id("some_id_or_selector").get_attribute("innerHTML")
</code></pre>이를 해내고 똑같은 결과를 얻을 수 있는 또 다른 방법이 있다.<br><pre class="highlight plaintext"><code>elementSource = driver.find_element_by_id("id_selector_as_per_requirement")
driver.execute_script("return arguments[0].innerHTML;", elementSource)
</code></pre><h2>
<a name="how-to-retrieve-json-data-from-an-html-page-source-in-python-selenium-webdriver" href="#how-to-retrieve-json-data-from-an-html-page-source-in-python-selenium-webdriver" class="anchor" rel="noreferrer noopener nofollow">
</a>
How To Retrieve JSON Data From An HTML Page Source In Python Selenium WebDriver?
</h2> <br>현대 애플리케이션은 여러 API를 통해 구축됩니다.일반적으로 이러한 API는 HTML 요소의 내용을 동적으로 변경합니다.JSON 객체는 XML 응답 유형의 대안이 되었습니다.따라서 pro Selenium python 테스트자는 JSON 객체, 특히 <script> HTML 태그에 포함된 객체를 처리해야 합니다.파이썬은 JSON 대상을 시험하기 위해 내장된 JSON 라이브러리를 제공합니다.<br>예를 들어 설명하기 위해서, 우리는 Selenium driver에 '<a href="https://www.cntraveller.in/%E2%80%9D" rel="noreferrer noopener nofollow">https://www.cntraveller.in/”</a> 를 불러오고, 로고 URL이' json '모드에 포함되어 있는지 확인하기 위해 <script type =' 응용 프로그램/ld+json '> </script > 에 포함된 SEO 모드를 봅니다.겸사겸사 한마디 하자면, 이 'SEO 모드' 는 구글에서 웹 랭킹을 얻는 데 매우 유용하다.그것은 코드 논리나 테스트와 무관하다.우리는 단지 그것으로 시범을 보일 뿐이다.<br>우리는 프레젠테이션에서 LambdaTest를 사용할 것이다 -<br><pre class="highlight plaintext"><code>from selenium import webdriver
import json
import re
username = "hustlewiz247"
accessToken = "1BtTGpkzkYeOKJiUdivkWxvmHQppbahpev3DpcSfV460bXq0GC"
gridUrl = "hub.lambdatest.com/wd/hub"
desired_cap = {
'platform' : "win10",
'browserName' : "chrome",
'version' : "71.0",
"resolution": "1024x768",
"name": "LambdaTest json object test ",
"build": "LambdaTest json object test",
"network": True,
"video": True,
"visual": True,
"console": True,
}
url = "https://"+username+":"+accessToken+"@"+gridUrl
print("Initiating remote driver on platform: "+desired_cap["platform"]+" browser: "+desired_cap["browserName"]+" version: "+desired_cap["version"])
driver = webdriver.Remote(
desired_capabilities=desired_cap,
command_executor= url
)
# driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://www.cntraveller.in/")
jsonSource = driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('text')
jsonSource = re.sub(";","",jsonSource)
jsonSource = json.loads(jsonSource)
if "logo" in jsonSource:
print("\n logoURL : " + str(jsonSource["logo"]))
else:
print("JSON Schema has no logo url.")
try:
if "telephone" in jsonSource:
print(jsonSource["telephone"])
else:
print("No Telephone - here is the source code :\n")
print(driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('outerHTML'))
except Exception as e:
print(e)
driver.quit()
</code></pre>출력에는 logoURL과 webElement 소스가 포함됩니다.<br><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/8048d6fa648aa4fee493da2ae5ce22ae.png" loading="lazy"/></a> <br><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/e92cff071533745da7b1ea144d42412b.png" loading="lazy"/></a> <br>코드 분해<br>다음 세 줄 코드는 필요한 라이브러리를 가져옵니다: Selenium WebDriver, Python의 JSON, 그리고 JSON 대상을 처리하고 정규 표현식을 사용하는re 라이브러리입니다.<br><pre class="highlight plaintext"><code>from selenium import webdriver
import json
import re
</code></pre><a href="#!" class="article-body-image-wrapper" rel="noreferrer noopener nofollow"><img src="https://s1.md5.ltd/image/1af1a63da87f07d1140c2395eeb8941d.png" loading="lazy"/></a> <br>다음은 LambdaTest의 구름에서 성공적으로 실행할 수 있도록 스크립트를 설정할 것입니다. 이것은 매우 빠르고 매끄럽습니다.나는 단지 30초도 안 되어 시작했다(아마도 내가 이전에 이 플랫폼을 사용한 경험이 있기 때문일 것이다).하지만 당신이 처음이라도 1분도 안 걸려요.<a href="https://accounts.lambdatest.com/login" rel="noreferrer noopener nofollow">Register</a> 구글로 로그인하고 <a href="https://accounts.lambdatest.com/detail/profile" rel="noreferrer noopener nofollow">Profile</a>를 클릭하여 사용자 이름과 방문 영패를 복제한다.<br><pre class="highlight plaintext"><code>username = "your_username_on_lambdaTest"
accessToken = "your lambdaTest access token"
gridUrl = "hub.lambdatest.com/wd/hub"
desired_cap = {
'platform' : "win10",
'browserName' : "chrome",
'version' : "71.0",
"resolution": "1024x768",
"name": "LambdaTest json object test ",
"build": "LambdaTest json object test",
"network": True,
"video": True,
"visual": True,
"console": True,
}
url = "https://"+username+":"+accessToken+"@"+gridUrl
</code></pre>우리는 전체 화면 모드로 드라이버를 시작하고 다음 코드 줄로 Cntraveler 홈 페이지를 불러옵니다.<br><pre class="highlight plaintext"><code>driver = webdriver.Remote(
desired_capabilities=desired_cap,
command_executor= url
)
# driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://www.cntraveller.in/")
</code></pre>현재, 스크립트를 포함하는 JSON 대상을 지정하고, 불필요한 번호를 삭제하여 JSON 형식의 문자열을 정확하게 불러옵니다.<br><pre class="highlight plaintext"><code>jsonSource = driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('text')
jsonSource = re.sub(";","",jsonSource)
jsonSource = json.loads(jsonSource)
</code></pre>그런 다음 로고 URL이 있는지 확인합니다.만약 있다면 우리는 인쇄해 낼 것이다.<br><pre class="highlight plaintext"><code>if "logo" in jsonSource:
print("\n logoURL : " + str(jsonSource["logo"]))
else:
print("JSON Schema has no logo url.")
</code></pre>그 밖에 우리는 전화의 상세한 정보가 존재하는지 검사해야 한다.없으면 WebElement의 소스 코드를 인쇄합니다.<br><pre class="highlight plaintext"><code>try:
if "telephone" in jsonSource:
print(jsonSource["telephone"])
else:
print("No Telephone - here is the source code :\n")
print(driver.find_element_by_xpath("//script[contains(text(),'logo') and contains(@type, 'json')]").get_attribute('outerHTML'))
except Exception as e:
print(e)
</code></pre>마지막으로 우리는 기사를 떠났다.<code>driver.quit()</code><h3>
<a href="https://www.lambdatest.com/blog/chrome-extensions-to-find-xpath-in-selenium/?utm_source=dev&utm_medium=Blog&utm_campaign=Nishant-2032021&utm_term=Nishant" rel="noreferrer noopener nofollow">XPath locator</a>
How To Get Page Source As XML In Selenium WebDriver?
</h3> <br>XML로 표시된 웹 사이트를 로드하는 경우 XML 응답을 저장해야 할 수도 있습니다.다음은 Selenium에서 XML 페이지 소스 코드를 가져오는 데 적합한 솔루션입니다.<br><pre class="highlight plaintext"><code>drive.execute_script(‘return document.getElementById(“webkit-xml-viewer-source-xml”).innerHTML’)
</code></pre><h2>
<a name="how-to-get-page-source-as-xml-in-selenium-webdriver" href="#how-to-get-page-source-as-xml-in-selenium-webdriver" class="anchor" rel="noreferrer noopener nofollow">
</a>
Conclusion
</h2> <br>위에서 설명한 모든 방법을 사용하여 LambdaTest<a name="conclusion" href="#conclusion" class="anchor" rel="noreferrer noopener nofollow">
</a>의 유연성과 신축성을 이용하여 테스트 과정을 자동화할 수 있습니다.2000여 개의 브라우저, 운영체제, 버전에서 테스트 용례를 실행할 수 있도록 합니다.또한 자동화 테스트 프로세스를 현대 CI/CD 도구와 통합하고 최상의 지속적인 테스트 실천을 따를 수 있습니다.<br>따라서 일상적인 업무를 즉시 자동화하고 LambdaTest를 사용하면 당신의 생활을 더욱 수월하게 할 수 있습니다.<br>테스트 유쾌!
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
