サイトにログインする

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

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

  • メールアドレスやパスワードの入力
  • ログイン後のサイト操作

ログインについての注意事項

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

 要件の確認

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

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

  • サイト(ログイン画面)を開く
  • IDを入力する
  • パスワードを入力する
  • ログインボタンをクリックする
  • (ログインができているか確認する)

 ワークフローの設定例

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

今回は、こちらのサイト(弊社作成のRPA検証サイト)にIDとパスワードを使ってログインするワークフローを紹介します。

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

  • OpenBrowserアクション(ブラウザを開く)を設置する
  • URL欄に以下URLを入力する
https://gym.bizrobo.com/courses/practice/

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

文字入力アクションを設定し、IDを入力します。
ID入力欄のCSSセレクタを、AUTORO Assistantや、ブラウザの検証画面で取得しておきます。

  • TypeTextアクション(文字入力)を設置する
  • CSSセレクタ欄に、取得したセレクタを入力する
    (本サイトでは #id)
  • 文字列欄にログインに使用するIDを入力する
    (本サイトでは admin)

パスワード入力欄にパスワードを入力します。
TypeTextアクションでも入力できますが、TypePasswordアクションを使用するとパスワードがマスクされます。

パスワード入力欄のCSSセレクタを取得しておきます。

  • TypePasswordアクション(パスワード入力)を設置する
  • CSSセレクタ欄に取得したCSSセレクタを入力する
    (本サイトでは #password)
  • パスワード欄にログインに使用するパスワードを入力する
    (本サイトでは admin)

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

ログインボタンのCSSセレクタを取得しておきます。

  • Clickアクション(クリック)を設置する
  • CSSセレクタ欄に取得したセレクタを入力する
    (本サイトでは .bg-blue-500)

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

ワークフローにてログイン後にセレクタが見つからない場合や操作がうまくいかない場合、何らかの原因でログイン自体ができていない可能性があります。
ログインが成功していことを確認する方法の例を、3つご紹介します。

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

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

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

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

  • ワークフローの設定

  • ログで確認できるスクリーンショット

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

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

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

例:アカウント情報ページへ移動
例:データ登録ページへ移動

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

今回扱うサイトでは、ログインに成功すると、顧客情報一覧ページが表示されます。
ページタイトルである「顧客情報一覧」の要素を検索して見つかれば、ログインが成功していることがわかります。

  • サイトに手動でログインし、「顧客情報一覧」部分のセレクタを取得

  • FindElementアクション(要素を見つける)を設置する
  • 検索条件欄に取得したCSSセレクタを設定する
    (本サイトでは .text-2xl)

  • 実行結果を確認

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

サイトにログインした後にクリックなどのブラウザ操作を行う場合、そのアクションがエラーになるならログインに失敗している可能性があります。
アクションの設定で、操作が成功しない場合はエラーを出すことが可能となり、問題の箇所を見つけ出しやすくなります。

  • ログイン後のブラウザ操作アクション(例:Clickアクション)の「セレクタが見つからなくても次に行く」を無効にする

  • 実行結果を確認

# ブラウザを開く_サイトを開く
+open_browser_1:
  action>: OpenBrowser
  display_name>: 'ブラウザを開く_サイトを開く'
  url: 'https://gym.bizrobo.com/courses/practice/'
  lang: 'ja-JP'
  headless: true
  confirm: true
  windowSize: '1920 x 1080'
  useShadowDomSelector: false
  private: false
  meta:
    action:
      disabled: false

# 文字入力_メールアドレス入力
+type_text_1:
  action>: TypeText
  display_name>: '文字入力_ID入力'
  browser: +open_browser_1
  selector: '#id'
  text: admin
  clearValue: false
  ignoreError: true
  private: false
  meta:
    action:
      disabled: false

# パスワード入力
+type_password_1:
  action>: TypePassword
  display_name>: 'パスワード入力'
  browser: +type_text_1
  selector: '#password'
  password: '********'
  ignoreError: true
  private: false
  meta:
    action:
      disabled: false

# クリック_ログインボタンクリック
+click_2:
  action>: Click
  display_name>: 'クリック_ログインボタンクリック'
  browser: +type_password_1
  selector: '.bg-blue-500'
  confirm: true
  waitAfter: 3000
  ignoreError: true
  timeout: 30000
  private: false
  meta:
    action:
      disabled: false

# スクリーンショットを撮る_ログインできているかスクリーンショットで確認
+take_screenshot_1:
  action>: TakeScreenshot
  display_name>: 'スクリーンショットを撮る_ログインできているかスクリーンショットで確認'
  browser: +click_2
  full_page: false
  type: png
  private: false
  meta:
    action:
      disabled: false

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

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

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

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

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

CONTENTS