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


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


#取得情報一覧
##【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の取得-](https://qiita.com/natsu_mikan/items/fdb60eabfd3adaef19c7)から`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
  }
 ]
}
```