Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

Javascript FetchでTwitterにログイン

updated on 2019-07-22

Cypressで非同期

Cypressはクロスドメインでの非同期処理のテストが行えないため、fetchで補うのが一般的

Javascript FetchでTwitterにログインするのを例にする

describe('Login', function () {
it('サインイン', function () {
var twitter_token;
var userid="id";//自分のTwitterIDを入力しています。
var userpass="pass";//自分のTwitterPASSを入力しています。

// GETにアクセスして,responseのうちのtokenをもらい、次にPOSTにアクセスしてtokenとともにusernameやpasswordをresponseに送る
fetch("https://twitter.com/", {
    mode: 'cors',
    credentials: 'include'
}).then(function(response) {
    return response.text();
}).then(function(text) {
//   <input type="hidden" name="(ここから)redirect_after_login" value="/">
// <input type="hidden" value="3f569fb396b8b03a229c3f569fb396b8b03a229c" name="authenticity_token">
// \w 英数文字([A-Za-z0-9_]と同じ) \w+ 1文字以上の英数字 \s 1文字の区切り文字([ \f\n\r\t\v]). 任意の1文字 .+ 1文字以上
    var getstring = text.match(/redirect_after_login" value=.+\s.+value="(\w+)"/);
    twitter_token = getstring[1];
console.log(text);//ここでTwitter_Tokenは取得できています。

//ここからログイン処理
  fetch("https://twitter.com/sessions", {
  mode: 'cors',
  credentials: 'include',
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded','Referer': 'https://twitter.com/' },
  body: 'session[username_or_email]='+ userid + '&session[password]=' + userpass +
  '&remember_me=1&return_to_ssl=true&scribe_log='+
  '&redirect_after_login=/&authenticity_token='+twitter_token
    }).then(function(response) {
    return response.text();
    }).then(function(text) {
    console.log(text);//出力されたhtmlを画面に表示
    cy.visit('https://twitter.com/?lang=ja')
    });
  });
  // Cypress.Cookies.debug(true)
})
})