【AUTOROに行く】※ユーザーの方のお問い合わせもこちらよりお願いします
Updated on 2024年11月25日

Docly Child

サイトにログインする

126 views

この記事では、ログインが必要なサイトなどにロボットを使ってログインする方法について紹介します。

【できるようになること】

  • メールアドレスやパスワードの入力
  • ログイン後のサイト操作
ログインについての注意事項

・サイトやツールの仕様上、ロボット判定が非常に厳しい等の理由でログイン自体が非推奨/不可能というケースもございます。
・AUTOROにコネクションが用意されているサービスであれば、ログイン処理なしで操作できるものもございます。※コネクションについてはこちら

　要件の確認

ワークフロー作成の前に、今回達成したい要件を確認しましょう。

今回達成したい要件は、「ログインが必要なサイトにログインができている」となります。
必要な手順を分解すると、以下のようになります。

  • サイト（ログイン画面）を開く
  • メールアドレスを入力する
  • パスワードを入力する
  • ログインボタンをクリックする
  • （ログインができているか確認する）

　ワークフローの設定例

下記手順にてワークフローを設定します。

今回は、こちらのサイト（弊社代表作成のデモサイト）にメールアドレスとパスワードを使ってログインするフローを紹介します。

まず、ブラウザを開くアクションを設定し、目的のサイトを開きます

  • OpenBrowserアクションを設置する
  • URL欄に以下URLを入力する
https://www.tutorial.tokyo/

このとき、ログイン情報を入力するページが直接開けるURLがあれば、それを指定しておくとページ移動の必要がなくなり簡潔になります。

文字入力アクションを設定し、メールアドレスを入力します。
今回扱うサイトは、右上のSign inという箇所をクリックするとログイン情報のポップアップが開く仕様のため、Clickアクションも設定します。

  • Sign inをClickアクションでクリックする
  • メールアドレス（ユーザー名）入力欄のCSSセレクタを取得

  • TypeTextアクションを設置し、CSSセレクタ欄に取得したセレクタを入力する
  • 文字列欄にログインに使用するメールアドレスを入力する

パスワード入力欄にパスワードを入力します。
TypeTextアクションでも入力できますが、TypePasswordアクションを使用すると設定後にパスワードがマスクされるので基本的にはこちらを使用します。

  • パスワード入力欄のCSSセレクタを取得

  • TypePasswordアクションを設置し、CSSセレクタ欄に取得したセレクタを入力する
  • パスワード欄にログインに使用するパスワードを入力する

クリックアクションを設定し、ログインボタンをクリックします。

  • LoginのボタンのCSSセレクタを取得

  • Clickアクションを設置し、CSSセレクタ欄に取得したセレクタを入力する

サイトにログインするフロー自体は以上で完了です。

ワークフローにてログイン後にセレクタが見つからない場合や操作がうまくいかない場合、何らかの原因でログイン自体ができていない可能性があります。
ログインが完了しているかどうかは、以下のような方法で確認できます。

①画面のスクリーンショットを撮ってみる

ログイン処理の後にTakeScreenshotアクションを設置し、画面のスクショを撮影します。
このとき、ログインボタンをクリックするClickアクションの実行後待機時間欄に3000と入力しておきます（クリックした後3秒待ってからスクショ撮影という指示になります）。
※ログイン後はページの読み込み中となり、続けて操作するとエラーの可能性が高くなります。そのため、ログイン処理の後は待機を設定いただくと安定しやすくなります。

問題なくログインができていれば、手元で操作したときと同じログイン後の画面がログに出力されているはずです。

「パスワードが間違っている」というような表示やロボット判定など、ログインできていない理由が表示されていないかご確認ください。
また読み込み中のような画面になっている場合は、待機時間の設定等で解決しないかお試しください。

  • ワークフローの設定

  • ログで確認できるスクショ

②ログイン後にしか表示されないものを探してみる

（a）ログイン後しか表示できないページに遷移する

ログイン処理の後にGoToアクションを設置し、ログイン後しか操作できないページのURLを指定します。
もしこのアクションがエラーになったり開けない場合は、正常にログインできていない場合が多いです。

  • プロフィールページ（ログインしていないと表示できない）のURLをGoToアクションに指定

  • ログでGoToアクションの結果を確認

（b）ログイン後しか表示されない要素を見つける

今回扱うサイトでは、ログインしているときのみ右上のプロフィール情報が表示されています。この部分の要素を探してみて見つかっていれば、ログインできていることがわかります。

  • サイトに手動でログインし、プロフィール情報部分をセレクタを取得

  • FindElementアクションを設置し、取得したセレクタを検索条件欄に指定

  • 実行結果を確認

③ログインできていなければエラーを出すようにする

サイトにログインした後にクリックなどのブラウザ操作を行う場合、そのアクションの設定によってエラーを出すことが可能になります。
ここでエラーが出ていた場合、ログインに失敗している可能性が高いので、問題になっている箇所の確認が簡易になります。

  • ログイン後の操作（例：Clickアクション）の「セレクタが見つからなくても次に行く」をOFFにする

  • 実行結果を確認

# ブラウザを開く_サイトを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://www.tutorial.tokyo/'
  lang: 'ja-JP'
  headless: true
  confirm: true
  windowSize: '1920 x 1080'
  useShadowDomSelector: false
  private: false

# クリック_ログインのポップアップを開く
+click_1:
  action>: Click
  browser: +open_browser_1
  selector: '.apus-user-login.wel-user'
  confirm: true
  ignoreError: true
  timeout: 30000
  private: false

# 文字入力_メールアドレス入力
+type_text_1:
  action>: TypeText
  browser: +click_1
  selector: 'input[name="username"]'
  text: 'xxxxxx@xxxx.xxx'
  clearValue: false
  ignoreError: true
  private: false

# パスワード入力
+type_password_1:
  action>: TypePassword
  browser: +type_text_1
  selector: 'input[name="password"]'
  password: ''
  ignoreError: true
  private: false

# クリック_ログインボタンクリック
+click_2:
  action>: Click
  browser: +type_password_1
  selector: 'input[type="submit"]'
  confirm: true
  waitAfter: 5000
  ignoreError: true
  timeout: 30000
  private: false

　上記方法でのログインが難しい場合

メールアドレスとパスワード入力でのログインが難しい場合、クッキーでのログインであれば成功する可能性があります。

詳しくはこちらの記事をご覧ください。

［参考記事］

ログイン
メールアドレス
パスワード

このページは役に立ちましたか？

Related articles

Powered By EazyDocs