E2Eテスト -headタグ内の情報取得まとめ-

E2Eテスト 番外編 -metaとOGPの取得-
↑でmetaやOGPを取得してjsonに吐き出す方法を紹介しましたが、その他にもfaviconなど取得する項目が増えたので取得情報一覧を書こうと思います!
(一緒に実装してくれてる@yukijiさんThanks)
本記事は所々省略しているので、詳しい実装方法は上記の記事をご覧ください。

取得情報一覧

【URL】

ホスト名

common.js

export const getUrl = ClientFunction(() => location.hostname);

パス名

common.js

export const getUrlPath = ClientFunction(() => location.pathname);

【lang属性】

common.js

export const getLang = ClientFunction(() => {
  const lang = document.documentElement.lang
  if (lang === undefined) return null
  return lang
})

【titleタグ】

common.js

export const getTitle = ClientFunction(() => document.title);

title文字数

common.js

export const getTitleLength = ClientFunction(() => document.title.length);

【meta】

charset

common.js

export const getCharset = ClientFunction(() => {
  const charset = document.charset
  if (charset === undefined) return null
  return charset
})

viewport

common.js

export const getViewPort = ClientFunction(() => {
  const viewport = document.getElementsByName('viewport')[0]
  if (viewport === undefined || viewport.content === '') return null
  return viewport.content
})

description

common.js

export const getDesc = ClientFunction(() => {
  const description = document.getElementsByName('description')[0]
  if (description === undefined || description.content === '') return null
  return description.content
})

description文字数

common.js

export const getDescLength = ClientFunction(() => {
  const description = document.getElementsByName('description')[0]
  if (description === undefined || description.content === '') return null
  return description.content.length
})

keyword

common.js

export const getKeyword = ClientFunction(() => {
  const keyword = document.getElementsByName('keyword')[0]
  if (keyword === undefined || keyword.content === '') return null
  return keyword.content
})

keyword個数

common.js

export const getKeywordLength = ClientFunction(() => {
  const keyword = document.getElementsByName('keyword')[0]
  if (keyword === undefined || keyword.content === '') return null
  return keyword.content.split(',').length
})

noindex

common.js

export const getRobots = ClientFunction(() => {
  const robots = document.getElementsByName('robots')[0]
  if (robots === undefined || robots.content === '') return null
  return robots.content
})

【OGP】

og:title

common.js

export const getOgTitle = ClientFunction(() => {
  const ogTitle = document.querySelector("meta[property='og:title']")
  if (ogTitle === undefined || ogTitle.content === '') return null
  return ogTitle.content
})

og:url

common.js

export const getOgUrl = ClientFunction(() => {
  const ogUrl = document.querySelector("meta[property='og:url']")
  if (ogUrl === undefined || ogUrl.content === '') return null
  return ogUrl.content
})

og:image

common.js

export const getOgImg = ClientFunction(() => {
  const ogImg = document.querySelector("meta[property='og:image']")
  if (ogImg === undefined || ogImg.content === '') return null
  return ogImg.content
})

og:site_name

common.js

export const getOgSiteName = ClientFunction(() => {
  const ogOgSiteName = document.querySelector("meta[property='og:site_name']")
  if (ogOgSiteName === undefined || ogOgSiteName.content === '') return null
  return ogOgSiteName.content
})

og:description

common.js

export const getOgDesc = ClientFunction(() => {
  const ogDesc = document.querySelector("meta[property='og:description']")
  if (ogDesc === undefined || ogDesc.content === '') return null
  return ogDesc.content
})

【linkタグ】

canonical

common.js

export const getCanonicalUrl = ClientFunction(() => {
  const links = document.getElementsByTagName('link')

  for (var i = 0; i < links.length; i++) {
    if (links[i].rel.toLowerCase() === 'canonical') {
      return links[i].href
    }
  }
  return null
})

【apple-touch-icon】

common.js

export const getAppleTouchIcon = ClientFunction(() => {
  const links = document.getElementsByTagName('link')

  for (var i = 0; i < links.length; i++) {
    if (links[i].rel === 'apple-touch-icon') {
      return links[i].href
    }
  }
  return null
})

【favicon】

common.js

export const getFavicon = ClientFunction(() => {
  const links = document.getElementsByTagName('link')

  for (var i = 0; i < links.length; i++) {
    if (links[i].rel === 'icon') {
      return links[i].href
    }
  }
  return null
})

【Google Tag Maneger】

common.js

export const getGtm = ClientFunction(() => {
  const script = document.getElementsByTagName('script')

  for (var i = 0; i < script.length; i++) {
    let scriptDom = script[i].src
    if (
      scriptDom.match('googletagmanager')
    ) {
      return true
    }
  }
  return null
})

【JSONへの変換と変更点】

headタグ内にある取得したい情報は以上で大体網羅できたのではないかと思います！
jsonに吐き出したいdataを以下のように記述して

capture.js

const data = {
  page: pageUrlPath,
  lang: pageLang,
  charset: pageCharset,
  viewport: pageViewPort,
  title: [
    {
      text: pageTitle,
      '最大29文字程度': pageTitleLength ? pageTitleLength <= '29' : pageTitleLength >= '29'
    }
  ],
  description: [
    {
      text: pageDesc,
      '最大110字程度': pageDescLength ? pageDescLength <= '110' : pageDescLength >= '110'
    }
  ],
  keyword: [
    {
      text: pageKeyword,
      '5〜6個程度': pageKeywordLength ? pageKeywordLength <= '6' : pageKeywordLength >= '6'
    }
  ],
  'og:title': OgTitle,
  'og:url': OgUrl,
  'og:image': OgImg,
  'og:site_name': OgSiteName,
  'og:description': OgDesc,
  canonical: canonicalUrl,
  'apple-touch-icon': appleTouchIcon,
  favicon: favicon,
  robots: robotsContent,
  gtm: gtm
}

↓でjsonに書き込みます。

capture.js

masterData.push(data)
let str = JSON.stringify({url: pageUrl, meta: masterData}, null, ' ')
fs.writeFileSync('./screenshots/data.json', str);

変更点

前回のE2Eテスト 番外編 -metaとOGPの取得-からJSON.stringifyのvalue部分を少し変えています。
以前はURLパス名だけ取得していましたが、ローカルでテストをしていたつもりが本番URLでテストしていた...なんてことがあったのでホスト名とパス名両方を取得してより分かりやすくしています。

生成されたjsonはこんな感じです。(※valueはサンプル用に変えています)

data.json

{
 "url": "example.com",
 "meta": [
  {
   "page": "/",
   "lang": "ja",
   "charset": "UTF-8",
   "viewport": "width=device-width",
   "title": [
    {
     "text": "株式会社Sample",
     "最大29文字程度": true
    }
   ],
   "description": [
    {
     "text": "descriptionが入ります。",
     "最大110字程度": true
    }
   ],
   "keyword": [
    {
     "text": "株式会社Sample,サンプル,株式会社サンプル",
     "5〜6個程度": true
    }
   ],
   "og:title": "株式会社Sample",
   "og:url": "https://example.com/",
   "og:image": "https://example.com/img/ogp.png?1608513031503",
   "og:site_name": "株式会社Sample",
   "og:description": "descriptionが入ります。",
   "canonical": "",
   "apple-touch-icon": "https://example.com/img/favicon/apple-touch-icon-57x57.png",
   "favicon": "https://example.com/img/favicon/coast-228x228.png",
   "robots": null,
   "gtm": true
  }
 ]
}