Cypressのテストが止まったままになる？？

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--disable-dev-shm-usage')
    }
    return launchOptions
  })
}

:hover

If cy.hover() is used, an error will display and redirect you to this page.

cy.get('.hidden').invoke('show').click()
cy.get('.hidden').click({ force: true })

XPath

require('cypress-xpath')

ESLint

{
  "plugins": [
    "cypress"
  ],
  "env": {
    "cypress/globals": true
  },
  "extends": [
    "plugin:cypress/recommended"
  ]
}

Cypressだけインストールする

pull_requestのclosedイベントの場合を除く、push及びpull_requestイベントで起動されたワークフロー内のキャッシュにのみアクセスできます。

• テストコードを書いて cypress/integration/ ディレクトリに入れておく
• npmでcypressをインストール
• $ npx cypress run で実行

describe('Check page', function() {
  it('top', function() {
    // URLを開く
    cy.visit('https://sitateru.com/')
    // ページタイトルをチェック
    cy.title().should('eq', 'sitateru - シタテル - | その服は、つくれる。')
    // ページ内に特定の文字列があることを確認する
    cy.contains('かんたん無料登録')
    // CSSセレクタを使って、要素が存在することを確認する
    cy.get('.top-main-visual').should('exist')
  })
})

describe('Login', function() {
  it('login', function() {
    cy.visit('https://atelier.sitateru.com/login')
    // フォームに入力
    cy.get('#email').type(Cypress.env('LOGIN_EMAIL'))
    cy.get('#password').type(Cypress.env('LOGIN_PASSWORD'))
    // ログインボタンをクリック
    cy.get('input[type="submit"]').click()

    // 遷移先のURLパスをチェック
    cy.location('pathname').should('eq', '/topics')
  })
})

name: e2e test
on:
  # 毎時0分に実行
  schedule:
    - cron: '0 * * * *'

jobs:
  build:
    name: monitoring
    runs-on: ubuntu-latest
    # cypress公式のDockerイメージを使う
    container:
      image: cypress/browsers:node12.14.0-chrome79-ff71
    steps:
      - name: checkout
        uses: actions/checkout@master
        with:
          ref: 'master'
      - name: install
        run: npm install
      - name: run test
        env:
          LANG: "ja_JP.UTF-8"
          CYPRESS_LOGIN_EMAIL: ${{ secrets.CYPRESS_LOGIN_EMAIL }}
          CYPRESS_LOGIN_PASSWORD: ${{ secrets.CYPRESS_LOGIN_PASSWORD }}
        run: npx cypress run --browser chrome
      # 失敗したときはスクリーンショットをダウンロードできるように
      - name: gather artifact on failure
        uses: actions/upload-artifact@v1
        if: failure()
        with:
          name: cypress-screenshots
          path: cypress/screenshots
      # 結果をslackに通知 (失敗したときはメンション)
      - name: post to slack
        uses: homoluctus/slatify@master
        if: always()
        with:
          type: ${{ job.status }}
          job_name: 'e2e test'
          mention: 'here'
          mention_if: 'failure'
          channel: '#notification-actions'
          icon_emoji: ':github:'
          url: ${{ secrets.SLACK_WEBHOOK_URL }}

• 新しく作るnamespace以下にkubectl applyでアプリケーションをデプロイしようとした
• 対象のyamlファイルは別プロジェクトのソースファイルをコピーして作ったものだった
• yaml内に書かれているapply先namespaceが別プロジェクトのnamespaceのままだった

#!/bin/sh
# check whether namespace is {repository}-{env} correctly or not

kubectl kustomize $1 > /dev/null 2> /dev/null
if [ $? != 0 ]; then
  /bin/echo 'usage: kubeapply [kustomize_dir]'
  exit 1
fi

PROCEED=0
REPOSITORY_NAME=$(git rev-parse --show-toplevel | rev | cut -f1 -d'/' | rev)
NAMESPACES=$(kubectl kustomize $1 | grep namespace | sed -E 's/namespace:(.*)/\1/' | tr -d ' ' | sort | uniq)
OVERLAY_DIR=$(echo $1/ | tr -s '/' | rev | cut -f2 -d'/' | rev)
FOUND=()

for NAMESPACE in $NAMESPACES
do
  if [ ${NAMESPACE} != ${REPOSITORY_NAME}-${OVERLAY_DIR} ]; then
    FOUND+=("${NAMESPACE}")
    PROCEED=0
  else
    PROCEED=1
  fi
done

if [ ${PROCEED} = 0 ]; then
  /bin/echo "expected namespace is '${REPOSITORY_NAME}-${OVERLAY_DIR}'"
  /bin/echo "but, namaspace '${FOUND[@]}' found in kustomize"
  /bin/echo -n "proceed apply? (yes/No): "
  read ANSWER
  if [ ${ANSWER} = 'yes' ]; then
    PROCEED=1
  fi
fi

if [ ${PROCEED} = 1 ]; then
  kubectl apply -k $@
else
  echo "stop applying"
fi

var privilegedRespondent = ['taro@sitateru.sample', 'jiro@sitateru.sample'];

// グループ追加,フォーム送信時に実行
function addUserToGroup(event) {
  console.log('addUserToGroup()');
  var message = "グループ追加フォームからの通知です\n\n";
  const respondent = event.response.getRespondentEmail();
  if(privilegedRespondent.indexOf(respondent) === -1) {
    console.log('Respondent ' + respondent + ' not allowed');
    message += 'あなた( ' + respondent + " )にはアカウントを作成する権限がありません\n";
    sendResult(respondent, message);
    return;
  }
  const response = parseResponse(event.response.getItemResponses());
  const userName = response['追加するユーザー'];
  const groups = response['追加先グループ'].split(',');
  for (var i = 0; i < groups.length; i++) {
    var groupName = groups[i].trim();
    try {
      var member = addGroupMember(userName, groupName);
      console.log(' added member', member);
      if(member == undefined) {
        message += "ユーザーをグループに追加できませんでした。入力内容を確認してください\n";
        message += ' ユーザー: ' + userName + "@sitateru.com\n";
        message += ' グループ: ' + groupName + "@sitateru.com\n\n";
      } else {
        message += "ユーザーをグループに追加しました\n";
        message += ' ユーザー: ' + userName + "@sitateru.com\n";
        message += ' グループ: ' + groupName + "@sitateru.com\n\n";
      }
    } catch(error) {
      console.log(' error', error);
      message += "ユーザーをグループに追加できませんでした。入力内容を確認してください\n";
      message += ' ユーザー: ' + userName + "@sitateru.com\n";
      message += ' グループ: ' + groupName + "@sitateru.com\n";
      message += ' エラー: ' + error.toString() + "\n\n"
    }
  }
  sendResult(respondent, message);
}

// Googleユーザーをグループに追加
function addGroupMember(userName, groupName) {
  if(userName && groupName) {
    const userEmail = userName + '@sitateru.com';
    const groupEmail = groupName + '@sitateru.com';
    console.log(' add ' + userEmail + ' to ' + groupEmail);
    const member = {
      email: userEmail,
      role: 'MEMBER'
    };
    return AdminDirectory.Members.insert(member, groupEmail);
  }
}

// メール送信
function sendResult(recipient, message) {
  MailApp.sendEmail({
    name: 'アカウント管理システム',
    to: recipient,
    subject: 'グループ追加フォーム実行結果',
    body: message
  });
  console.log('send result');
}

// フォームの入力内容をオブジェクトにして返す
function parseResponse(itemResponses) {
  var obj = {};
  for (var i = 0; i < itemResponses.length; i++) {
    var itemResponse = itemResponses[i];
    var question = itemResponse.getItem().getTitle();
    // var type = itemResponse.getItem().getType();
    var answer = itemResponse.getResponse();
    obj[question] = answer;
  }
  return obj;
}

コードは長いですが、GASでユーザーをグループに追加するには AdminDirectory.Members.insert() を実行すればOKです。公式のサンプルはこちら。

こんにちは！

シタテルでエンジニアをしている建山です。

今回は、データベース（MySQL）にJSON形式で格納されているデータをSQLで検索する方法を紹介します。
シタテルでは、AWS上のデータベースに蓄積されたデータをredashというツールを使い、SQLでデータ抽出したあと、データ分析できるようになっています。

やりかた

今回はMySQLの

たとえば、格納データが以下の2レコードあったとします。

{"maxCount":1000,"targets":{"ladies":false,"mens":true,"kids":false,"baby":false}}

{"maxCount":50,"targets":{"ladies":true,"mens":false,"kids":false,"baby":false}}

ここで、maxCountが50のデータを検索したいときは、
JSON_EXTRACTを使用し、以下のように抽出できます。（テーブル名：table_a、JSON格納カラム名：detail）

select * from table_a where JSON_EXTRACT(detail, '$.maxCount') = 50

targetsのladiesがtrueの検索をしたいときは、以下のようになります。

select * from tablename where JSON_EXTRACT(detail, '$.targets.ladies') = true

# 感想
このように、```$.

のあとに、キーの名前を指定してあげれば、かんたんに、jsonが格納してあるカラムの中身を検索することができます。（表示の記述方法も同じ）

公式のドキュメントはこの辺あたりのようです。
https://dev.mysql.com/doc/refman/5.7/en/json.html

他にもいくつか関数があるようなので、いろいろ試してみたら、いいSQL+JSONライフが送れるかも知れません！

簡単ではありましたが、ご紹介でした！

どうもお久しぶりです。シタテルの朝野です。

突然ですがRPAってご存知でしょうか？私は数週間前にまともに知りました🙄
"Robotic Process Automation" の略で、PC上での作業をソフトウェアロボットが行うよう自動化することです。

現在私のいるDevOpsチームでは単純な作業を自動化して時間と手間を節約できないかという取り組みを少しずつ進めています。
そんな中でRPAというものの存在を知り、簡単に無償で導入できるものを試してみたので、サンプルと共に紹介します。

今回やってみたサンプルは、シタテルの「マイアトリエ」をブラウザで開いてログインするというものです。
（※サンプル内のメールアドレスとパスワードはダミーの値です）

Javascript for Automation

MacOS Yosemite以降で使用可能なスクリプト言語です。
サンプルコードはこのようになります。

const DELAY = 3;
const Chrome = Application("Google Chrome");

const window = Chrome.windows[0];
const tab = Chrome.Tab({
  url: 'https://atelier.sitateru.com/login'
});
window.tabs.push(tab);

delay(DELAY);

inputText(tab, 'email', 'sample@sitateru.sample');
inputText(tab, 'password', 'sample_password');
submit(tab);

function inputText(tab, elementId, value) {
  tab.execute({ javascript: "document.getElementById('" + elementId + "').value =`" + value + "`;" });
}

function submit(tab) {
  tab.execute({ javascript: "document.forms[0].submit();" });
}

ブラウザ上での入力やクリックはjavascriptをブラウザ内で走らせることで行っています。

実行はコマンドで $ osascript -l JavaScript sample.js と打つだけです。
JavaScriptを書いてコマンド実行なので、RPAわからんけどJavaScriptチョットワカル！という私のような者にはありがたいです。

エンジニアで使う分にはハードルが低いと思うのですが、ノンプログラマーやMac使わない人がいると導入しにくそうなのが難点でしょうか。

SikuliX

http://sikulix.com/

JavaがあればWindowsでもMacでもLinuxでも使えるOSSのRPAアプリケーションです。
IDEを立ち上げて自動化プログラムを作成・実行します。

サンプルコード（コードと言っていいのかわかりませんが）はこのようになります。

自動化したい操作をスクリプトににしてIDE上で書いていきますが、マウスポチポチでもある程度作れるのでノンプログラマーにもいくぶんとっつきやすそうです。

画像処理で有名なOpenCVを使って作られているらしく、操作対象の認識を「デスクトップ画面の中で対象の画像を抽出する」ことで実現しています。
（サンプルコードの click() のカッコ内にあるのは操作したい要素のスクリーンショットなのです）
画面上の文字を認識するOCR機能も一応あるのですが試してみたところ精度が怪しく実用には難しいなという印象でした。

機能面はやや物足りない感触でしたが、OSをまたいで使えることと導入の難易度が低そうなのはメリットですね。

UiPath

https://www.uipath.com/ja/

こちらもIDEで作成・実行するタイプで、GUIでフローチャートを組み立てたりブラウザ操作を自動で読み取って操作を記録したりと、基本シェアウェアだけあって操作感や機能は充実しています。（そのぶん見た目は複雑なので最初は少し戸惑うかも）

個人や中小企業はCommunity Editionという無料版が使えますが、ある程度以上の規模の企業で使う場合は有料になるようです。
https://www.uipath.com/ja/freetrial-or-community

サンプルコード（これもコードと言っていいのかわかりませんが）はこのようになります。

作業の流れがグラフィカルに表示されるので大掛かりなようにも見えますが、Webページ上の要素を選択して操作しているというのは同じですね。

公式コミュニティがあるほかハンズオンセミナーなども開かれているようで、費用面とWindowsのみという点が問題なければ有力な候補になりそうだと思います。

というわけで、今回は無料で使えるRPAを簡単にお試ししてみました。

こういったRPAは使いようで色々な作業の手間を省けそうな予感がしているので、できることを把握してうまく活用していきたいですね。

この記事がRPAに手を出してみる取っ掛かりになれば嬉しいです🤗