masalibの日記

システム開発、運用と猫の写真ブログです

puppeteerでCMSの記事更新処理

puppeteerを使って記事更新するのをやってみました
ファイルアップもできました

概要

記事更新の概要は以下のとおりです
1・ログイン処理
2・リストページ遷移
3・新規追加ボタンを押す
4・新規作成の画面に遷移される
5・新規作成画面で記事内容を投稿する
  テキストボックス、テキストエリア、チェックボックス、ファイル添付
6・投稿内容の確認画面に遷移する
7・確認画面から完了画面に遷移する



プログラム

ログインの処理は前回の処理を参照
masalib.hatenablog.com

const puppeteer = require('puppeteer');
const fs = require('fs');
const cookies_path = './cookies_masalib_site.json';
const loginmodule = require('./loginWithCookie.js');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
  });
  const page = await browser.newPage();
  await page.setViewport({width: 1280, height: 700});

  await loginmodule.loginproc(page);
  await page.waitFor(1000);

  //一覧ページ
  await page.goto('http://masalib.jp/admin/blog/ArticleList.asp?page=1');

  console.log(page.url());
  const inputElement = await page.$('table > tbody > tr > td:nth-child(2) > div > input[type=button]');
  await inputElement.click();	//新規作成ボタンをクリック
  await page.waitFor(1000);
  console.log(page.url());	//新規作成のページに遷移しているの確認


  //投稿内容
  //テキストボックス
  await page.focus('input[name=art_title]');
  await page.type("art_title_test");
  await page.focus('input[name=keyword]');
  await page.type("keyword_test");

  //テキストエリア
  await page.focus('textarea[name=art_nom_text]');
  await page.type("art_nom_text_test");
  await page.focus('textarea[name=art_text]');
  await page.type("art_text_test");

  //チェックボックス
  var inputElement2 = await page.$('center > form > table > tbody > tr:nth-child(2) > td > table > tbody > tr:nth-child(2) > td.data > input[type="checkbox"]');
  await inputElement2.click();

  //ファイルアップ
  var filePath =  __dirname + '/icon.jpg';
  console.log("filePath:" + filePath);
  var inputfileup = await page.$('#ent_img_file1');
  await inputfileup.uploadFile(filePath);
  await page.waitFor(2000);
  await page.screenshot({path: 'images/blog_edit.png'});

  //ページ遷移
  console.log("page遷移 入力画面→確認画面");
  var inputElement2 = await page.$('center > form > table > tbody > tr:nth-child(14) > th > input[type=button]');
  await inputElement2.click();
  await page.waitFor(2000);
  console.log("page 確認画面");
  await page.screenshot({path: 'images/blog_edit2.png'});

  console.log("page遷移 確認画面→投稿→完了ページ");
  var bottonobj = await page.$('center > form > table > tbody > tr:nth-child(14) > th > input:nth-child(2)');
  await bottonobj.click();

  console.log("page 完了ページ");
  await page.waitFor(3000);
  console.log(page.url());
  await page.screenshot({path: 'images/blog_edit3.png'});

  //クッキーファイルの更新
  const afterCookies = await page.cookies();
  fs.writeFileSync('cookies_masalib_site.json', JSON.stringify(afterCookies));

  //ブラウザのクローズ
  browser.close();

})();



はまった所

初心者レベルで恐縮ですが
リストページの新規作成のボタンを押す事ができなかった
理由はボタンを特定できるセレクタがわからなかった

調べてみるとchromeデベロッパーモードで
対象のセレクタを取得できるようでした

f:id:masalib:20170922212646p:plain

f:id:masalib:20170922212659p:plain

上記のcopy Selectorと選ぶとコピーされる

body > table > tbody > tr > td:nth-child(2) > div > input

bodyはいらないので削除する必要がありました
またinputのあとにタイプも指定しました

table > tbody > tr > td:nth-child(2) > div > input[type=button]


今もできていない所

対象のセレクタがない場合は、

returns: <Promise

になるらしいのですが
まだその部分を理解できておらず実装できていない

今後について

・できていない部分をできるようになりたい
・imageのダウンロード系をやっていく
・ダイアログ系の対応
・frameの対応

まだまだ勉強しないと提案とかは難しいな~