puppeteer(node.js )でO365に接続

前提・実現したいこと

初心者のため初歩的な質問ですみません。
見当違いな記載がありましたらご容赦ください。

puppeteerでOffice365にログインしたいです。

発生している問題・エラーメッセージ

アカウント入力後、遷移した画面でさらにパスワードを入力後、サインインボタンをクリックできずにいます。
エラーメッセージは表示されずにその後の処理(スクショ保存)が実行されます。

該当のソースコード

JS、Puppeteer

/////////////////////////////
const puppeteer = require('puppeteer');
require('dotenv').config();

(async () => {
const TARGET_URL = 'https://login.microsoftonline.com/common/oauth2/authorize?<省略>...';
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto(TARGET_URL);

//Login 365
await page.type('input[id=i0116]', 'usera@domain.onmicrosoft.com');
await page.click('input[id=idSIButton9]');
await page.type('input[id=i0118]', '<MyPassword>');

await page.waitForNavigation();　　---- A'
await page.click('btn[id=idSIButton9]');

///////////////////////////////////////////////////
await page.screenshot({ path: 'example.png' });

//await browser.close();
})();

試したこと

クリックしたいボタンのid、nameともに試しているのですがうまくいってないです。
その後の処理で取ったスクショには該当のボタンが写っていないため、クリックもできていないのだと思うのですが、どのように対処したら実現できるのでしょうか。
遷移が足りないうちに押下しているのかと、ボタン押下前(A'のところ)にpage.waiForNavigationを複数回入れてみたのですが、変わりませんでした。

よろしくお願いいたします。

m.ts10806

2019/07/22 07:58

もしかしてNode.jsでしょうか。なのでしたらタグに追加しておいてください

toraoo

2019/07/22 08:13

ご指摘ありがとうございます。タグ追加してみました。

行動規範の内容に同意します

回答1件

ベストアンサー

いろいろ（フォーカスしてクリックしたりエンターキータイプしたり‥）苦戦しましたがログインボタンをクリックする前にウェイトタイムを長く設ける事で解決できました。

ユーザーIDなど入力中にボタンがクリックされてしまうタイミングの問題に感じました。

下記の書き方が良いか何と言えませんが
工程ごとにPromise.allで括っています。
ご参考までに

await
1	console.log('✅  Office ログイン開始 '),
2	 page.waitForSelector('input[id="i0116"]'),
3	console.log('✅  ID 入力準備完了 '),
4	page.type('#i0116','ユーザーID'),
5	page.waitFor(3000), //入力完了待ち
6	console.log('✅  ID入力完了')
7  ]);
8	 
9  await Promise.all([
10	console.log('✅  ボタンクリック工程'),
11	page.click('#idSIButton9'),
12	console.log('✅  ボタンクリック '),
13	page.waitFor(4000), //パスワード画面待ち
14  ]);