playwrightを用いたmicroCMSへのデータ移行オートメーション試作

index.ts

import { chromium } from 'playwright';
import dotenv from 'dotenv-flow';
import axios from 'axios';

dotenv.config();

const MICROCMS_SERVICE_ID = process.env.MICROCMS_SERVICE_ID;
const MICROCMS_API_KEY = process.env.MICROCMS_API_KEY;

type FieldValue = {
  type: 'textbox',
  name: string,
  value: string,
} | {
  type: 'image',
  name: string,
  path: string
}

type Content = {
  endpoint: string,
  contentId?: string,
  fields: FieldValue[]
}

const content: Content = {
  endpoint: 'blog',
  fields: [
    {
      type: 'textbox',
      name: 'タイトル',
      value: 'テスト記事'
    },
    {
      type: 'image',
      name: 'サムネイル画像',
      path: 'screenshots/browserType-chromium.png'
    }
  ]
};

(async () => {
  const browser = await chromium.launch({headless: true});
  const context = await browser.newContext({storageState: 'auth.json'});

  console.log(content);

  const ENDPOINT = content.endpoint;
  const page = await context.newPage();
  await page.goto(`https://${MICROCMS_SERVICE_ID}.microcms.io/apis/${ENDPOINT}/create`);

  for(const field of content.fields) {
    switch(field.type) {
      case 'textbox':
        await page.getByRole('textbox', {name: field.name}).type(field.value);
        break;

        case 'image':
        await page.getByRole('group', {name: field.name}).getByRole('button', {name: "ドラッグ&ドロップでも追加できます"}).click();
        await page.setInputFiles(
          'input[type="file"][multiple]',
          field.path
        ).then(() => console.log(`File uploaded：${field.path}`));
        await page.waitForTimeout(1000);
        await page.getByRole('button', {name: "この画像を使用する"}).click();
        await page.waitForTimeout(500);
        break;

      default:
        break;
    }
  }

  // 下書き保存
  await page.getByRole('button', {name: "下書き保存"}).click();
  await page.waitForURL(new RegExp(`^https?://${MICROCMS_SERVICE_ID}\.microcms\.io/apis/${ENDPOINT}/[^create].+$`));

  // URLからcontentIdを取得
  const url = page.url();
  const contentId = url.split('/').pop();
  console.log(contentId);

  // 公開
  await axios.patch(`https://${MICROCMS_SERVICE_ID}.microcms-management.io/api/v1/contents/${ENDPOINT}/${contentId}/status`, {
    status: ["PUBLISH"]
  }, {
    headers: {
      'X-MICROCMS-API-KEY': MICROCMS_API_KEY,
      'Content-Type': 'application/json'
    }
  }).catch((err) => {console.log(err.response);});

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

package.json

{
  "name": "microcms-playwright",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "tsx index.ts",
    "auth": "playwright codegen https://app.microcms.io/signin --save-storage=auth.json"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/dotenv-flow": "^3.2.0",
    "@types/node": "^20.3.1",
    "dotenv-flow": "^3.2.0",
    "playwright": "^1.35.0",
    "tsx": "^3.12.7",
    "typescript": "^5.1.3"
  },
  "dependencies": {
    "axios": "^1.4.0"
  }
}