깍돌이

일이 바빠 포스팅 하기가 너무 힘들지만 그래두 열심히 하려고 하고있습니다. ㅜㅜ

지난 포스팅때 만들어 놓은 Naver Login  - selenium-JS ( iframe 대처 방안 - IE 버전) 이 있는데요

// naver 자동 로그인하여서 최근 메일 가져오기  - IE 

http://ipex.tistory.com/entry/webUI-Naver-Login-seleniumJS-iframe-%EB%8C%80%EC%B2%98-%EB%B0%A9%EC%95%88-IE%EB%B2%84%EC%A0%84?category=770641

해당 소스코드가 Windwos 10 에서 같은 드라이버와 같은 브라우저 버전 같은 npm Node.js 버전을 사용하여도

동작하지 않습니다.

??

일단 멈춰지는 소스코드는 await loginBtn.click(); 입니다.

여기서 클릭이 안됐는데 다음 DOM 찾고 객체 찾고를 반복 하다보니

되지않던 현상이였습니다.

관련 내용을 찾아 보니

셀리니엄 HQ에 이런 이슈가 있더군요

// 링크

https://github.com/SeleniumHQ/selenium/issues/4292

이슈는 역시 Closed 되어있고

셀레니엄팀에서 해줬을 거라고는 생각 하지 않습니다. 

(최신버전을 쓰고있는 저에게 되지않으니까요 Stable 버전 기준으로)

아래 글 내용들을 읽어 보니

결국 우회 처리로 요소를 클릭 하였습니다.

그 우회 처리란

  // login 버튼 가져와서 클릭          let loginBtn = await driver.findElement(By.css("input[type='submit']"));         await loginBtn.click(); 

기존에는 위와같이 await loginBtn.click() 이 동작하였지만 Windwos 10 에서는 동작하지가 않습니다.

그래서 사용하는 우회 방법은

Driver 모듈에 있는 executor를 이용하는 방법입니다.

일단 JS DOC을 한번 확인해보겠습니다.

보시면 2개가 있는데 Async 근 비동기방식이고 제가 펼쳐 놓은 이 executor는 동기 방식으로 차이는 없습니다.

자 보시면 (Script,... args) 라고 되어있습니다.

앞에 파라미터로는 스크립트가 들어갈 것이고 뒤에 arguments로는 WebElement가 들어가야 된다고 쓰여있네요

그럼 저 위에 동작하지 않는 login Btn 을 어떻게 클릭을 할것인가 하면

말그대로 앞에는 스크립트 ( 클릭 스크립트를 넣을것이고) 뒤에는 가져온 WebElement ( loignBtn 을 넣어서 확인합니다.)

         await driver.executeScript('return arguments[0].click()",loginBtn);  

단순합니다. 우측에 놓은 element 가 arguments로 넘어오게 되고 1개만 넘겼으니 [0]으로 첫번째 값을 가져오면 됩니다.

가져온 후에 click 을 하는 스크립트로 return 을 넣어주면 driver executor에서 해당 반환된 스크립트를 브라우저로

인젝션하게 되어 실행을 합니다.

해당 이슈에서도 그렇고 여러 Win10 분들은 이와 같은 방안으로 우회를 하고 있는 것으로 보여집니다. 

win 10에서 네이버 로그인시 DOM 도 제대로 못가져오는 경우가 있는데

이에 대해서는 다음 포스팅때 작성 하도록 하겠습니다.

감사합니당

앞서 UI 자동화에 대한 기본적인 개요 및 네이버 자동 로그인을 IE 11과 Chrome(66 Stable)로 테스트 해보았습니다.

이제 제대로 업무에 적용하기에 앞서 자동화가 이루어지기 위해서 빠지지 않는 webDriver에 대해 조사해보았습니다.

Selenium WebDriver

Selenium webDriver(셀레니엄 웹드라이버) 는 많은 브라우저(FireFox,Edge,InternetExplorer,Chrome...) , 운영체제 및 프로그래밍언어(ruby,js,C#,JAVA,Python .. ) 등을 지원하며 웹 응용 프로그램들의 테스트 를 단순화 함과 동시에 가속화를 도와주는 툴입니다.

해당 Selenium WebDriver 가나오기전 있었던 Selenium Remote Control(RC) 버전이 있었습니다.

해당 제품의 구동 방식은 이와 같습니다.

[Chrome]

Chrome 바이너리가 실행 되고 Remote Controller를 통해서 해당 Chrome에 메시지를 전달하고 다시 받고 다시 전달 하는 방식을 취득하였으며 지원되는 브라우저도 적었으며 RC구현으로 인해 OS의 제약도 많았습니다. 

또한 해당 메시지 방식을 취득 하다 보니 실제 사용자의 동작으로 보이지 않는 경우도 있었습니다.

이러저러한 문제점으로 인해 Selenium WebDriver(2.0) 이 webDriver + Selenium1.0 으로 나오게 되었으며

Selenium WebDriver 의 장점이 있습니다. 

1. 다채로운 프로그래밍 언어 지원

    기존의 Selenium IDE와는 다르게  Java,PHP,Perl,Ruby,Python,C#,JS 등을 지원합니다.

2. 매우 단순한 사용 법

    기존의 RC사용법은 RC실행 + 드라이버 세팅  + Selenium 세팅 및 스크립트가 따로 가야 하지만

    WebDriver는 StandardAlone으로  내부적으로 한번에 스크립트를 사용하여 제어합니다.

3. 실제 사용자 동작을 예뮬레이션 합니다.

    동작 내용을 확인해 보면 아실수 있겠지만 WebElement 등을 클릭할때 마우스로 인한 포커싱이 되는 모습을 확인 

    이가능합니다.

4. 기존보다 스크립트 실행 속도가 빠릅니다.

    - 해당은 제가 기존을 사용하지 않아서  확인을 못해봤습니다.

5.  API 지원

    WebDriver API 를 통해서 어렵지 않게 개발등이 가능합니다.

 (JS로 하는에 손쉬운거 같진 않지만)

chromedriver.exe가 하는 역할은  selenium에서 webdriver명령을 보낼때 크롬을 제어 하는 방법 을 제공해주는데

이를 크롬 57버전까지는 자동화 확장 기능을 사용하여 크롬과 통신을 원할하게 하였지만

크롬 58 버전 부터는 확장 기능을 제거하고 WebSocket 통신을 사용하고 원격 디버깅을 지원하는 크롬의 dev tool api 에서 모든것을 제어하는 방법으로 바뀌었습니다.

그러므로 자동화 실행시에는 위의 크롬은 현재 자동화 테스트 소프트웨어로 인해 제어되고 있습니다. 라는 메시지가 나타납니다.

설명이 매우 부실해보이지만.. 필요하면 더 추가하겠습니다.

Selenium 관련하여 이슈 트래킹 사이트가 있습니다.

안되 는 것이 있을 경우 이슈트래킹에서 

확인 해보시기 바랍니다.

https://github.com/SeleniumHQ/selenium/issues

또한 최근에(?) 만들어지는 Selenium 개발자가 직접 프로젝트를 합쳐서 만드는 4.0 Alpha 버전에 대한

지원 레밸 정의입니다.

대충 보면

이슈를 재기해도 고치진 않을것이고 fix되지 않은 API 에 대한 보장은 해주지 않겠지만

최선을 다해서 내부적으로 이슈를 찾아서 고칠 것이며  selenium 은 플랫폼 API 와 호환 API 를 릴리즈 한다.

Support Level Definitions

• supported: A selenium-webdriver release will be API compatible with the platform API, without the use of runtime flags.

• best effort: Bugs will be investigated as time permits. API compatibility is only guaranteed where required by a supported release. This effectively means the adoption of new JS features, such as ES2015 modules, will depend on what is supported in Node's LTS.

• unsupported: Bug submissions will be closed as will-not-fix and API compatibility is not guaranteed.

해당 에러는 줌 레벨 문제로 나타나는 에러인데 IE 드라이버로 실행할 때 만 나타나는 현상입니다.

원시적인 방법

보기 -> 확대/축소 - 100% 지정

아래와같이 코드상으로 무시할수 있습니다. IgnorezoomLevel 을 통한 

// 관련 유사 에러 링크 

http://ipex.tistory.com/entry/webUI%EC%9B%B9%EC%9E%90%EB%8F%99%ED%99%94-Error-WebDriver-NodeJS-Instantiate-IE-Driver-with-Capabilities-introduceFlakinessByIgnoringProtectedModeSettingsignoreSettings

첫번째 해결 방안

IE를 여신 후 보안 설정을 전부 체크합니다.

도구 -> 인터넷 옵션 (alt + T + O)

보안 탭 

인터넷 : 하단 보호 모드 사용 체크 

로컬인트라넷 : 하단 보호 모드 사용 체크

신뢰할 수 있는 사이트 : 하단 보호 모드 사용 체크

제한된 사이트 : 하단 보호 모드 사용 체크

두번째 해결 방안

코드상으로 Ignore하는 방법

->

const Capabilities = require('selenium-webdriver/lib/capabilities').Capabilities; let capabilities = Capabilities.ie(); capabilities.set('ignoreProtectedModeSettings', true);  capabilities.set('ignoreZoomSetting', true); 

와 같이 옵션을 작성후 빌드시 옵션을 넣어서 무시할수 있도록 

해당 방식은 사이드가 있어서 좀더 확인 후 포스팅 하겠습니다.

IE 버전입니다. 

트러블 슈팅 

현재 capabilities 가 동작하지 않는데 

1. 이그노어프로텍티드모드 세팅 true

2. 이그노어줌세팅 true

2개가 있는데 이유는 IE는 줌 100% , 보안에서 보호체크가 전부되어야 하기 때문이다.

이거를 코드상으로 무시를 하고 킬수가있는데 일단 코드상은 안되니

IE에서 직접 설정 후 코드를 돌려보시기 바랍니다.

iframe (IE의 경우는 swtichTo.frame('string') 이 되지않아

 iframe을 직접 찾아서 WebElement를 넘겨주어야 합니다.  (IE상의 이벤트 사이클 문제로 인함)

결과 코드 

 const _url = "https://www.naver.com/";    require('iedriver'); const webdriver = require('selenium-webdriver'); const {By,Util}  = webdriver; // 드라이버 빌드 // IE const Capabilities = require('selenium-webdriver/lib/capabilities').Capabilities; let capabilities = Capabilities.ie(); capabilities.set('ignoreProtectedModeSettings', true); capabilities.set('ignoreZoomSetting', true); capabilities.set('IgnoreZoomLevel', true); const driver = new webdriver.Builder().withCapabilities(capabilities).build();   const register_pc = false; (async () => {   try {     // 페이지 이동     await driver.get(_url);         // 윈도우 최대화  headless 옵션 사용시 는 의미없음     await driver.manage().window().maximize();     // input값 가져옴     let inputId = await driver.findElement(By.css('input#id'));     // ID 입력         await inputId.sendKeys('myID');     // password 값 가져옴     let inputpw = await driver.findElement(By.css('input#pw'));     // password 입력         await inputpw.sendKeys('mypw');     // login 버튼 가져와서 클릭          let loginBtn = await driver.findElement(By.css("input[type='submit']"));         await loginBtn.click();       // 최초 실행 PC일 경우 해당 페이지가 나타나기 때문에 존재한다면 등록 유무 선택     let page_ = await driver.findElements(By.css('fieldset.login_form a'));       if(!!page_){             // 등록 page_[0] 등록 안함  page_[1]             !!register_pc ?console.log("등록합니다.") :await page_[1].click();       }        await driver.sleep(2000);           // selenium-js 에서는 switchTo.frame을 통해서 프레임을 변경 한다.       console.log("프레임 변경");     await driver.sleep(5000);       await driver.switchTo().frame(await driver.findElement(By.id("minime")));     // 변경 후 프로필에 메일을 가져오고 클릭        let mail_profile = await driver.findElement(By.id('mail_count_profile'));       //  메일 클릭        //  화면 제어가 빠른 경우에 대한 sleep -> 추후 isContentsLoaded 또는 WebElement Condition 으로 변경         console.log(await mail_profile.getAttribute('href'));        await driver.sleep(1500);       await mail_profile.click();   //   // 기존 프레임으로 다시 돌아오는 경우 (page이동이없었을때)      //   //   await driver.switchTo().defaultContent();   //   // 임시 테스트용 Sleep      await driver.sleep(2000);     console.log(await driver.getTitle());     console.log(await driver.getCurrentUrl());     let newUrl = await driver.getCurrentUrl();     await driver.navigate().to(newUrl);   // // 가장 최상단 메일 의 Subject를 가져옴     let mailTitle = await driver.findElement(By.css('ol.mailList.sender_context li .subject'));   // // 셀레니엄 JS에서 getText는 innerText를 가져온다고 되어있습니다.    console.log(await mailTitle.getText());    // 페이지 뒤로가기    // await driver.navigate().back();         }    catch(err){     // Node Debug시 메시지가 너무길어 한글로 처음과 끝을 지정해서 보여지기 쉽게 처리      console.log("자동화 도중 에러 ",err  +  " 에러메시지 끝  ");   }   finally {         await driver.sleep(3000);         await driver.quit();   } })();   

저번에 UI 자동화에 대한 개요(?) 정도로만 시작했으며

이번에는 메일까지 접속해서 확인하도록 하겠습니다.

ID를 가져와서 입력하는 부분 및 PW를 가져오는 부분은 생략 하겠습니다.

전 포스팅에서 다루었기 때문에 

id와 pw를 입력해서 로그인 까지 하게되면

const _url = "https://www.naver.com/";  require('chromedriver'); const webdriver = require('selenium-webdriver'); const {By,Util}  = webdriver;   var driver = new webdriver.Builder() .forBrowser('chrome') .build();   const register_pc = false; (async () => {   try {     await driver.get(_url);           await driver.manage().window().maximize();     let inputId = await driver.findElement(By.css('input#id'));         await inputId.sendKeys('myID');     let inputpw = await driver.findElement(By.css('input#pw'));         await inputpw.sendKeys('mypassWord');     let loginBtn = await driver.findElement(By.css("input[type='submit']"));         await loginBtn.click();      let page_ = await driver.findElements(By.css('fieldset.login_form a'));    // 최초 실행 PC일 경우 페이지가 나타남        if(!!page_){             // 등록 page_[0]             // 등록 안함  page_[1]             !!register_pc ?console.log("등록합니다.") :await page_[1].click();       }               }    catch(err){     console.log("자동화 도중 에러 ",err  +  " 에러메시지 끝  ");      }   finally {         await driver.sleep(2000);         await driver.quit();   } })(); 

해당과 같이 코드를 작성후 node test.js 를 실행할시에 로그인 까지는 정상적으로 됩니다.

그후에 내 로그인 프로파일에 메일 이라는 부분을 클릭하여서 이동을 하여야 디는데 iframe 특성상

일반 DOM 과 분리되어있는 독립 document이기 때문에 클릭이 되지않습니다.

-> 정확히는 WebElement를 가져오지 못합니다.

해당 내용을 해결하기 위해서는 selenium-js에 있는 swtichTo 라는 API 를 사용하여야 합니다.

아래의 이미지는 네이버 로그인 프로필은 iframe으로 감싸져있음을 나타냅니다.

Native JavaScript 역시 iframe에 접근할 때는

이와같이 사용합니다. 

[iframe] 

결과 코드

 const _url = "https://www.naver.com/";  // require 가 Builder보다 위에 있어야 함 공식 홈페이지  require('chromedriver'); const webdriver = require('selenium-webdriver'); const {By,Util}  = webdriver;  // 드라이버 빌드  var driver = new webdriver.Builder() .forBrowser('chrome') .build();   const register_pc = false; (async () => {   try {     // 페이지 이동     await driver.get(_url);         // 윈도우 최대화  headless 옵션 사용시 는 의미없음     await driver.manage().window().maximize();     // input값 가져옴     let inputId = await driver.findElement(By.css('input#id'));     // ID 입력         await inputId.sendKeys('id');     // password 값 가져옴     let inputpw = await driver.findElement(By.css('input#pw'));     // password 입력         await inputpw.sendKeys('pw');     // login 버튼 가져와서 클릭          let loginBtn = await driver.findElement(By.css("input[type='submit']"));         await loginBtn.click();       // 최초 실행 PC일 경우 해당 페이지가 나타나기 때문에 존재한다면 등록 유무 선택     let page_ = await driver.findElements(By.css('fieldset.login_form a'));       if(!!page_){             // 등록 page_[0] 등록 안함  page_[1]             !!register_pc ?console.log("등록합니다.") :await page_[1].click();       }     // selenium-js 에서는 switchTo.frame을 통해서 프레임을 변경 한다.        await driver.switchTo().frame('minime');     // 변경 후 프로필에 메일을 가져오고 클릭        let mail_profile = await driver.findElement(By.id('mail_count_profile'));       //  메일 클릭        //  화면 제어가 빠른 경우에 대한 sleep -> 추후 isContentsLoaded 또는 WebElement Condition 으로 변경        await driver.sleep(1500);       await mail_profile.click();     // 기존 프레임으로 다시 돌아오는 경우 (page이동이없었을때)        //   await driver.switchTo().defaultContent();     // 임시 테스트용 Sleep      await driver.sleep(2000);     console.log(await driver.getTitle());     console.log(await driver.getCurrentUrl());     let newUrl = await driver.getCurrentUrl();     await driver.navigate().to(newUrl);   // 가장 최상단 메일 의 Subject를 가져옴     let mailTitle = await driver.findElement(By.css('ol.mailList.sender_context li .subject'));   // 셀레니엄 JS에서 getText는 innerText를 가져온다고 되어있습니다.    console.log(await mailTitle.getText());    // 페이지 뒤로가기    // await driver.navigate().back();         }    catch(err){     // Node Debug시 메시지가 너무길어 한글로 처음과 끝을 지정해서 보여지기 쉽게 처리      console.log("자동화 도중 에러 ",err  +  " 에러메시지 끝  ");   }   finally {         await driver.sleep(2000);         await driver.quit();   } })();    

저는 네이버 알림을 켜놔서 새로운 기기 에서 로그인되었다는 창이 계속 나타나네요 

// ** 2019-02-27

localhost: 를 사용할때 발생하는 이슈로 localhost에 대한 매핑이 PC마다 다르기 때문에 발생하게 되는 것으로 보입니다.

127.0.0.1 로 수정

//

UnhandledPromiseRejectionWarning: Error: Server terminated early with status 1

 session not created exception

from disconnected: unable to connect to renderer

SessionNotCreatedError

셀레니엄 lib는 실행시에 웹 드라이버르 통해서 실행하게 되는데 (driver를 require에서 사용시)

가끔 해당 에러로 인해 실행이 되지않는 경우가 있습니다.

급한대로 

코드에서

require('chromedriver') 부분은 잠시 주석처리하고 실행했다가

다시

주석을 풀면되는데

이부분에서 주석을 제거하면 실행되는점도 이상하고

생각보다 많이 이상한거같은데

일단은 현재 저 방법으로 해결이 됩니다.

급한대로 적어 놓고

확실한 동작 원리나 방식등은 조사하고 다시 포스팅 하겠습니다.

webUI 테스트 자동화 (E2E 테스트 end to end)

UI 테스트 자동화 관련된 키워드

phantom.js && casper.js, zombie.js, slimer.js ,node.js, webdriver.io, Cucumber.js, protractor ,nightwatch.js, htmlUnit,Guitar , selenium , webdriver,javascript,Cypress.io,uitest.js,uirecorder,testCafe(*typeScript를 사용)    + assertiong lib (chai.js)

1. Headless Browser (헤들리스 브라우저)

정확히는 헤들리스 브라우저 라기보단 헤들리스 옵션으로 사용할수 있는 lib 들을 표현하였습니다.

헤들리스 옵션은 자동화 테스트 진행시에 UI 없이 브라우저가 실행되게 하는 옵션 입니다. PhantomJS의 CapserJS는

PhantomJS 를 조금 더 세밀하게 제어할수 있는 lib 입니다. 

장점에 셀레니움 이슈들이 존재 하지 않는다고 되어 있는 부분들은  셀레니엄 IDE(Java)등에서 사용되는 여러 방법이 있는데 해당 에서 발생하는 side-effect 들에 대한 이슈없이 단순히 lib에서 발생하는 이슈만 있기 때문에  조금 더 최적의 상태? 를 사용할수 있다고는 하지만 실제로 다 써본건 아니니 참고만 하려고합니다.

2. 셀레니움 의존 

셀레니엄 관련 lib들을 가져와서 사용하는 것으로 Python,Ruby,Java,C#,js (vanilla)

js말고도 다른 언어들이 셀레니엄 lib를 통해서 사용할수 있는 것으로 여러 맞는 언어들을 나에게 맞게 사용할수 있는 장점이 있기 때문에 원하시는 언어로 사용해보시면 될것 같습니다.

저는 JS를 현재 공부중에 있다보니 js기반인 selenium-webdriver npm 에서 받아서 사용 하겠습니다.

기존에 UI 자동화를 위해서 이것저것 사용은 해봤습니다. guitar라든지 관련 자동화 스크립트 등등

하지만 결국 자동화를 위해서 는 코드를 기반으로 짜주어야 하며 위에서와 같이 pyhton,ruby,java,C# 너무많이 있습니다.

사실 js를 사용하기 때문에 했다기보다는 Node.js위에서 npm 을 통한 자동화 테스트 코드를 만드는것이 가장 유연성이 

높다고 판단되었기 때문입니다.  

실제로 자동화에 접목시키기 위해서 아는 지식선에서는 js가 가장 좋아보였습니다.(정확히는 데이터 전송등 유연하다고 생각되었습니다.)

그래서 일단 간단하게 Naver Login 후에 메일 에 대한 내용을 가져오는 방법에 대해서 작성하려고 합니다. 

우선 오늘은 기본 설정 후 네이버 메인에서 Login 버튼을 클릭 하려고 합니다. 

3. Total Test Case

1. www.naver.com 으로 접속 (테스트하는 브라우저로)

2. id 란 id 입력

3. pw 란 pw 입력

4. login 버튼 클릭

5. 메일 메뉴 클릭

6. 가장 최상단 메일 클릭 

7. contents 가져오기 

8. 로그아웃 

어떻게 보면 1~4까지가 Login 에 대한 자동화 Test Case 라고 볼수 있다. 

4. Environment Set ( 환경 설정 )

우선 Java Script run-time 설치를 위한 https://nodejs.org/en/ 에 들어가서 Node.js를 설치 합니다.

LTS 와 Current 에 대한 설명은 생략 하도록 하겠습니다.

비트에 맞게 설치 후 자동화 테스트 프로젝트로 사용할 폴더를 하나 지정합니다.

저는 바탕화면에 자동화라는 폴더를 만들었습니다.

cmd 에서 해당 경로로 이동 후에 npm init 명령어를 통하여서 기본 설정을 행합니다.

npm init에 대해서는 따로 포스팅하겠습니다.

그리고 일단 크롬테스트를 위하여 설치 하여야 하는 2개의 npm 모듈을 설치합니다.

//셀레니엄 드라이버

npm i selenium-webdriver

// 크롬 드라이버

npm i chromedriver

설치 후 코드를 짜기전에 확인하여야 하는 docs가 있습니다.

http://seleniumhq.github.io/selenium/docs/api/javascript/index.html

셀레니엄 docs 공식 홈페이지인데요 해당 docs만 보고나서도 셀레니엄으로 어지간한 작업은 다 해결이 됩니다.

브라우저 실행 및 기본 동작 

 const _url = "https://www.naver.com/"; const webdriver = require('selenium-webdriver'); const {By,Util} = webdriver; require('chromedriver');  var driver = new webdriver.Builder() .forBrowser('chrome') .build();   (async () => {     try {     await driver.get(_url);          } finally {     await driver.sleep(2000);     await driver.quit();     } })();       

간단 설명이자면  우선적으로 _url 로 어떤 url 에접속할지 정하게 됩니다.

그리고 테스트를 위한 selenium-webdrvier를 가져오게 되구요.

해당 selenium 에서 사용되어지는 유틸 객체들(By,Util)을 가져옵니다. By의 경우는 DOM 조작에 대한 작업이 많기 때문에 자주 쓸일이 많을 겁니다.     그리고 크롬 드라이버를 사용할 것이기 때문에 chromedriver를 require로 가져옵니다.

테스트용이기 때문에 IIFE 즉시 실행함수로 바로 실행하게 하였습니다.

여기서 주의할 점이   await driver.get(_url); 부분인데요 

Selenium-JS 에서 사용되어지는 모든 객체들은 webElement 이며 Promise 객체입니다. JS에서 Promise에 대한 지식이 없다면 사용하기가 애매할수 있기 때문에 비동기 호출과 Promise에 대해서는 꼭 숙지가 되어야 합니다.

또한 Promise가 아니라면 async await(ES8) 도 숙지가 되어야 합니다. Promise then(ES6) 보다는 async await가 조금더 가독성이 높기 때문에 저는 async await 방식을 사용하겠습니다.  자세한 설명빼고 말씀드리자면

async function 으로 선언후 Promise 객체들을 그냥 리턴받게 되면 Promise<pending> 으로 리턴이되어 리턴된 비동기 함수 에대한 보장을 받지 못합니다. 그렇기 때문에

await를 통해서 비동기 함수에 대한 리턴을 보장받게 되는데 해당 await를 사용하기 위해서는 함수를 async로 선언하여야 합니다.

그렇기 때문에 위와같이 선언이되었으며 async await를 사용시에 try block 을 만들지 않게 되면 UnHangle Promise ~ 에러가 나타나기 때문에 해당의형식을 취해주어야 합니다.

이제 네이버에서 입력하거나 클릭을 위해서 태그를 가져오는 방법에 대해서 생각 해보겠습니다.

단순 자동화 클릭만해서는 자동화라고 할수가 없지만 하나하나 차근차근히 진행 하도록 하겠습니다.

순서는 이와같습니다. 주황색 부분에 id를 입력 -> 파란색 박스에 pw를 입력 -> 1과 2과 되었을 경우 빨간색 버튼에 대해서 클릭을 하게 됩니다.

그러면 해당 input 과 button 을 어떤식으로 객체를 가져와서 조작을 해야 할지 고민이 되는 상황에서 네이버 페이지를 직접 들어가 보는게 제일 좋습니다.

사진이 잘 작아서 보이진 않지만 입력 하는 id박스에는

<div class="input-box">로 감싸져 있으며 내부값은

label 과 input으로 이루어져있습니다. 우리가 직접 입력하는 부분은 당연히 input 태그일 거고 아래와 같이

document.querySelector('input#id').value='login 입니다.'; 라고 개발자 도구에 쳤더니 id칸에 입력이 된점이 확인됩니다.

 // ID 입력 document.querySelector("input#id").value="test";  // 패스워드 입력 document.querySelector("input#pw").value="test"; 

위의 DOM (돔) 조작을 위한 방식이 있지만 이 방식이 Selenium_JS에서는 되지않을것 같습니다. 그래서 해당 lib의 코드로 수정을 해보자면

  let input_id = await driver.findElement(By.css('input#id')); let input_pw = await driver.findElement(By.css('input#pw')); 

  와같이 수정이 가능 하다. driver.findElement 현재 드라이버 (현재화면) 에서 By.css( selector ) 의 맞는 객체를 가져옵니다.

xPath 또는 findElement(By.id( id ))방식도 있고 docs를 확인하시면 제어 방법은 여러가지가 있습니다.

입력은 다음에 하도록 하고 login 버튼 까지 클릭을 하도록 하겠습니다.

여기서 로그인 버튼은 <span class="btn_login">

                                       <input type="submit" > 해당 버튼입니다.

여기서 이제 객체를 가져오는 방법은 완전한 개인의 차이 라는 점을 보여드리고자 합니다.

버튼의 위치를 봅니다 ( 물론 가장 확실하게 가져온다는 가정하에 입니다.)

 <span class="btn_login">         <input type="submit" title="로그인" value="로그인" data-clk="nmy.login"> </span> 

저 가운데 버튼 클릭을 어떤식으로 할수 있을까 라고 말하고 결론부터 말씀드리면 아래의 4가지 방식이 우선 떠 올랐습니다.   해당 방식으로 잘 가져와짐도 확인이 되었으며  그냥 여러 방식이 있다는 점을 보여 드리고 싶었습니다.

<토막 상식  data-clk 는 HTML5에서 제공되어지는 data-* 으로 커스텀 프로퍼티를 사용하기 위함입니다.>

CSS 셀렉터를 정말 무궁무진하기떄문에 어떠한 방식으로도 객체를 가져와서 사용할수 있음을 알면 됩니다.

해당 코드를 node test.js로 실행시 네이버를 열고 -> 바로 login 버튼을 클릭 하기 때문에 id를 입력하라는 tooltip을 확인 할수 있다.

다음에는 id와 pw를 입력해서 로그인하는 방법 을 작성 하겠습니다.

 // 네이버 로그인 해서 가장 최근 메일 제목 읽어서 가져오기  // TC 1 네이버 창 렌더링 // TC 2 네이버 로그인 // TC 3 최근 메일 TXT 가져오기 // TC 4 네이버 로그아웃  const _url = "https://www.naver.com/"; const webdriver = require('selenium-webdriver'); const {By,Util} = webdriver; require('chromedriver');  var driver = new webdriver.Builder() .forBrowser('chrome') .build(); // 로그인 // ID 입력 document.querySelector("input#id").value="test";  // 패스워드 입력 document.querySelector("input#pw").value="test";  // Login 버튼 클릭 // document.querySelector("input[type='submit']"); // document.querySelector("input[title='로그인']"); // document.querySelector("span.btn_login > input"); // document.querySelector("span.btn_login").children[0];  // 이외에도 셀렉터를 활용한 방법은 너무나도 많다. 단순한 예로 들었을뿐   var loginSelector = [ "input[type='submit']", "input[title='로그인']", "span.btn_login > input" ];  (async () => {     try {         await driver.get(_url);         let loginBtn = await driver.findElement(By.css("input[type='submit']"));         loginBtn.click();         }   finally {             await driver.sleep(2000);             await driver.quit();         } })();