Yama's Memorandum

Nodejs（JavaScript)上でSeleniumを動かす
ログイン操作とcookieの取得、取得したcookieによるログイン

September 21, 2020 – 5:16 pm

Seleniumによりログイン操作と操作後のCookieを取得・保存し、取得・保存したCookieを用いて要ログインページにアクセスしてみた。

サンプルとして操作の対象としたのは本サイト(https://memorandum.yamasnet.com/) 自身。要ログインページにアクセスするため、他サイトに迷惑をかけないようにした（つもり）。

以下、一連の手続き、スクリプトソースをメモしておいた。

Selenium における Cookie操作：
Cookie操作のためのコマンドがまとめられていたので（参考サイト）以下に転載：

driver.manage().getCookies();   // Return The List of all Cookies
driver.manage().getCookieNamed(arg0);  //Return specific cookie according to name
driver.manage().addCookie(arg0);   //Create and add the cookie
driver.manage().deleteCookie(arg0);  // Delete specific cookie
driver.manage().deleteCookieNamed(arg0); // Delete specific cookie according Name
driver.manage().deleteAllCookies();  // Delete all cookies

　　

ホームページからのログイン操作とCookieの取得：

const fs = require('fs')
const chrome = require('selenium-webdriver/chrome')
const {Builder, By, Key, until } = require('selenium-webdriver')


(async () => {
    const driver = await new Builder()
        .forBrowser('chrome')
        .setChromeOptions(new chrome.Options()
                          .headless()
                          .windowSize({width:1280,height:940}))
        .build()
    
    await driver.get('https://memorandum.yamasnet.com')
    
    const actions = driver.actions()

    let xpstr = ".//div[@id='rsidebar']"
    let el = await driver.wait(until.elementLocated(By.xpath(xpstr)),100)
    await actions.move({origin: el}).perform()
    
    let subel = await driver.wait(until.elementLocated(By.linkText('Log in')),100)
    await actions.move({origin: subel}).click().perform() 

    await driver.wait(until.elementLocated(By.name('log')), 1000).sendKeys('user_id')
    await driver.wait(until.elementLocated(By.name('pwd')), 1000).sendKeys('password')
    await driver.wait(until.elementLocated(By.name('wp-submit')),5000).click()

    let sample_cookie = await driver.manage().getCookies()
    
    await fs.writeFile("DATA/sample.json", JSON.stringify(sample_cookie), (err) => {
        if (err) throw err
        console.log('completed')
    })

    driver && await driver.quit();
})()

　　

Cookie の復元とadmin画面へのアクセス：

const fs = require('fs')
const chrome = require('selenium-webdriver/chrome')
const {Builder, By, Key, until } = require('selenium-webdriver')

outshot = ((data, out) => {
    let base64Data = data.replace(/^data:image\/png;base64,/,"")
    fs.writeFile(out, base64Data, 'base64', 
                   ((err) => {　if(err) console.log(err) })
       )
})

(async () => {
    const driver = await new Builder()
        .forBrowser('chrome')
        .setChromeOptions(new chrome.Options()
                          .headless()
                          .windowSize({width:1280,height:940}))
        .build()
    
    await driver.get('https://memorandum.yamasnet.com')
    
    let cookies = await JSON.parse(fs.readFileSync('DATA/sample.json', 'utf8'))
    for (let i=0; i < cookies.length; i++) {
        await driver.manage().addCookie(cookies[i])
    }

    await driver.get('https://memorandum.yamasnet.com/wp-admin')
    let data1 = await driver.takeScreenshot()
    await outshot(data1, "out1.png")

    const actions = driver.actions()
    
    let el = await driver.wait(until.elementLocated(By.xpath(".//ul[@id='adminmenu']")),10000)
    await actions.move({origin: el}).perform()
    
    let subel= await driver.wait(until.elementLocated(By.linkText('Posts')),10000)
    await actions.move({origin:subel}).perform()
    let subsubel = await driver.wait(until.elementLocated(By.linkText('Add New')),10000)
    await actions.move({origin:subsubel}).click().perform()

    let data2 = await driver.takeScreenshot()
    await outshot(data2, "out2.png") 
 
    driver && await driver.quit();
})()

Dashboard 画面 スナップショット　(out1.png)：

　　

Add New Post 画面 スナップショット (out2.png):

　　

---