{"id":247,"date":"2022-12-04T19:07:21","date_gmt":"2023-05-10T18:37:31","guid":{"rendered":"https:\/\/www.silicloud.com\/ja\/blog\/index.php\/2023\/11\/30\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/"},"modified":"2025-07-31T21:58:53","modified_gmt":"2025-07-31T12:58:53","slug":"playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/","title":{"rendered":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002"},"content":{"rendered":"<p>\u8457\u8005\u306f\u3001\u5bc4\u4ed8\u306e\u4e00\u74b0\u3068\u3057\u3066\u300eOpen Sourcing Mental Illness\u300f\u3092\u5bc4\u4ed8\u5148\u306b\u9078\u3073\u307e\u3057\u305f\u3002<\/p>\n<h3>\u306f\u3058\u3081\u306b<\/h3>\n<p>Playwright\u306f\u3001Chromium\u3001Firefox\u3001Webkit\u3092\u542b\u3080\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306b\u304a\u3044\u3066\u3001\u512a\u308c\u305f\u30c4\u30fc\u30eb\u3067\u3059\u3002Webkit\u306fSafari\u30d6\u30e9\u30a6\u30b6\u306e\u4e2d\u6838\u3067\u3042\u308b\u305f\u3081\u3001Playwright\u306e\u30af\u30ed\u30b9\u30d6\u30e9\u30a6\u30b6\u306e\u6a5f\u80fd\u306f\u3001\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u306e\u30c6\u30b9\u30c8\u306b\u304a\u3044\u3066\u826f\u3044\u9078\u629e\u80a2\u3068\u306a\u308a\u307e\u3059\u3002Playwright\u306b\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3068\u306e\u81ea\u52d5\u7684\u306a\u5bfe\u8a71\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u6a5f\u80fd\u304c\u3042\u308a\u3001\u30a6\u30a7\u30d6\u30c9\u30e9\u30a4\u30d0\u3092\u624b\u52d5\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u307e\u305f\u3001Java\u3001Python\u3001NodeJS\u306a\u3069\u8907\u6570\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002Playwright\u306e\u67d4\u8edf\u6027\u306f\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u304c\u8981\u4ef6\u3092\u6e80\u305f\u3057\u3066\u3044\u308b\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u30a6\u30a7\u30d6\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\u30c4\u30fc\u30eb\u3084\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306b\u3082\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Playwright\u3092\u5b9f\u884c\u3059\u308b\u306b\u306f\u3001NodeJS\u30e9\u30f3\u30bf\u30a4\u30e0\u3084Playwright\u30b3\u30a2\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3001Playwright\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u306a\u3069\u3001\u9069\u5207\u306a\u74b0\u5883\u304c\u5fc5\u8981\u3067\u3059\u3002\u304a\u4f7f\u3044\u306e\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u306b\u3088\u3063\u3066\u306f\u3001Playwright\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u5fc5\u8981\u306a\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002Docker\u306f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30b3\u30f3\u30c6\u30ca\u5316\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3042\u308a\u3001\u7570\u306a\u308b\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u7528\u306e\u8907\u6570\u306e\u74b0\u5883\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u3001Playwright\u74b0\u5883\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u306bPlaywright\u3068TypeScript\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306e\u74b0\u5883\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3001\u30c6\u30b9\u30c8\u3092\u4f5c\u6210\u3057\u3066\u5b9f\u884c\u3057\u3001\u8907\u6570\u306e\u5f62\u5f0f\u3067\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30c8\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u3001Docker\u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u5c55\u958b\u3057\u307e\u3059\u3002\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6700\u5f8c\u307e\u3067\u306b\u306f\u3001Playwright\u3092\u4f7f\u7528\u3057\u3066\u81ea\u52d5\u5316\u30c6\u30b9\u30c8\u3092\u884c\u3044\u3001Docker\u3067\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u30e9\u30c3\u30d4\u30f3\u30b0\u3057\u3066\u65e2\u5b58\u306eCI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u30c6\u30b9\u30c8\u3092\u7d71\u5408\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u524d\u63d0\u6761\u4ef6<\/h2>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306b\u5f93\u3046\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<ul class=\"post-ul\">\n<li>One Ubuntu 20.04 server with a sudo-enabled account set up by following the Ubuntu 20.04 initial server setup guide. You need a sudo-enabled account to install NodeJS and Docker on your server.<\/li>\n<li>Node.js set up on your server. If you are on Ubuntu 22.04, install the latest version of Node.js in How To Install Node.js on Ubuntu 20.04. For other operating systems, see the How to Install Node.js and Create a Local Development Environment series.<\/li>\n<li>Docker installed on your server, which you can set up by following Steps 1-4 in How To Install and Use Docker on Ubuntu 20.04. In Step 4, you will run docker run hello-world to ensure that Docker is properly installed and ready to use.<\/li>\n<li>Familiarity with end-to-end testing for web applications.<\/li>\n<li>Familiarity with Typescript for writing the test. If you would like to learn more about TypeScript, you can review the How To Code in TypeScript tutorial series.<\/li>\n<li>(Optional) Visual Studio Code, which has robust features support such as code navigation and compiler error warning when working in Typescript. This tutorial uses nano throughout.<\/li>\n<\/ul>\n<h2>\u30b9\u30c6\u30c3\u30d71 &#8211; \u74b0\u5883\u306e\u6e96\u5099<\/h2>\n<p>\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u3092\u5b9f\u88c5\u3059\u308b\u524d\u306b\u3001Playwright\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u74b0\u5883\u3092\u6e96\u5099\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u6700\u521d\u306b\u3001\u3053\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7528\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">mkdir<\/span> playwright-with-docker<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u65b0\u3057\u3044\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token builtin class-name\">cd<\/span> playwright-with-docker<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u65b0\u3057\u3044\u30ce\u30fc\u30c9\u306e\u74b0\u5883\u3092\u521d\u671f\u5316\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> init<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u5165\u529b\u3059\u308b\u3088\u3046\u306b\u4fc3\u3055\u308c\u307e\u3059\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3084\u30d0\u30fc\u30b8\u30e7\u30f3\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u3001\u30c6\u30b9\u30c8\u306e\u30b3\u30de\u30f3\u30c9\u306a\u3069\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<p>\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u95a2\u9023\u3059\u308b\u4ee5\u4e0b\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u306b\u5bfe\u3059\u308b\u56de\u7b54\u3092\u5165\u529b\u3059\u308b\u3088\u3046\u306b\u6c42\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>package name: (playwright-docker) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC)<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3053\u306e\u3088\u3046\u306a\u7d50\u679c\u3092\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install &lt;pkg&gt;` afterward to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (test) playwright-docker version: (1.0.0) description: A project for using playwright for end-to-end testing purpose with docker for deployment entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to \/<mark>your-path<\/mark>\/test\/package.json: { &#8220;name&#8221;: &#8220;playwright-docker&#8221;, &#8220;version&#8221;: &#8220;1.0.0&#8221;, &#8220;description&#8221;: &#8220;A project for using playwright for end-to-end testing purpose with docker for deployment&#8221;, &#8220;main&#8221;: &#8220;index.js&#8221;, &#8220;scripts&#8221;: { &#8220;test&#8221;: &#8220;echo \\&#8221;Error: no test specified\\&#8221; &amp;&amp; exit 1&#8243; }, &#8220;author&#8221;: &#8220;license&#8221;: &#8220;ISC&#8221; } Is this OK? (yes) yes<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u5fc5\u8981\u306a\u60c5\u5831\u3092\u8ffd\u52a0\u3057\u305f\u5f8c\u3001\u306f\u3044\u3068\u5165\u529b\u3059\u308b\u304bEnter\u3092\u62bc\u3057\u3066\u3001package.json\u30d5\u30a1\u30a4\u30eb\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6b21\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002 (Tsugini, purojekuto ni hitsuy\u014d na izonkankei o insut\u014dru shite kudasai.)<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> &#8211;save-dev playwright<\/li>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> &#8211;save-dev typescript<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3053\u308c\u3089\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u30b5\u30f3\u30d7\u30eb\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u306bPlaywright\u3068TypeScript\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002&#8211;save-dev\u30d5\u30e9\u30b0\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u884c\u306b\u5fc5\u9808\u3067\u306f\u306a\u3044\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u3001Node.JS\u306e\u30bf\u30a4\u30d7\u5b9a\u7fa9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> &#8211;save-dev @types\/node<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u6b21\u306b\u3001\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306eTOML\u3092\u6271\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> &#8211;save-dev toml<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>TOML\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u30bf\u30a4\u30d7\u306e\u4e00\u3064\u3067\u3059\u3002.toml\u30d5\u30a1\u30a4\u30eb\u306f\u4eba\u304c\u8aad\u3081\u308b\u5f62\u5f0f\u3067\u3042\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u5185\u5bb9\u3092\u6700\u521d\u306b\u8aad\u307e\u306a\u304f\u3066\u3082\u66f4\u65b0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u3001\u30db\u30b9\u30c8\u30b7\u30b9\u30c6\u30e0\u306e\u305f\u3081\u306bPlaywright\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx playwright install-deps<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u6307\u793a\u304c\u8868\u793a\u3055\u308c\u305f\u3089\u3001sudo\u306e\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"post-conf-note\">\n<p class=\"post-conf-desc\">Note<\/p>\n<div>\u6ce8\u610f\uff1a\u3082\u3057\u3001\u6b21\u306e\u3088\u3046\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u3051\u53d6\u3063\u305f\u5834\u5408\u3001Node.js\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u3088\u308a\u9ad8\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u51fa\u529b\uff1a\u3042\u306a\u305f\u306fNode.js 10.19.0\u3092\u5b9f\u884c\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\nPlaywright\u306fNode.js 12\u4ee5\u4e0a\u3092\u5fc5\u8981\u3068\u3057\u3066\u3044\u307e\u3059\u3002Node.js\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u66f4\u65b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/div>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff1a<br \/>\nsudo npm cache clean -f<br \/>\nsudo npm install -g n<br \/>\nsudo n stable<\/p>\n<p>npm cache clean -f\u306f\u3059\u3079\u3066\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u5f37\u5236\u7684\u306b\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3057\u307e\u3059\u304c\u3001<br \/>\nnpm install -g n\u3068n stable\u306fNode.js\u306e\u5b89\u5b9a\u7248\u3092\u30b5\u30fc\u30d0\u30fc\u5168\u4f53\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u305f\u5f8c\u3001\u30b5\u30fc\u30d0\u30fc\u3092\u518d\u8d77\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div>\n<p>\u3053\u306e\u5f8c\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u624b\u9806\u3067\u4f7f\u7528\u3059\u308b\u305f\u3081\u306b\u3001Playwright\u306e\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> &#8211;save-dev @playwright\/test<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u6700\u5f8c\u306b\u3001Playwright\u306e\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u30d6\u30e9\u30a6\u30b6\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx playwright <span class=\"token function\">install<\/span><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u8907\u6570\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>TypeScript\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u6e96\u5099\u3059\u308b\u305f\u3081\u306b\u3001nano\u3084\u304a\u597d\u307f\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u30fc\u3067tsconfig.json\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">sudo<\/span> <span class=\"token function\">nano<\/span> tsconfig.json<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u73fe\u5728\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u7a7a\u3067\u3059\u3002\u3053\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u66f4\u65b0\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>tsconfig.json\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001\u300ctsconfig.json\u30d5\u30a1\u30a4\u30eb\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/div>\n<pre class=\"post-pre\"><code>{\r\n  \"compilerOptions\": {\r\n    \"strict\": true,\r\n    \"module\": \"commonjs\"\r\n  },\r\n  \"include\": [\"tests\"]\r\n}\r\n<\/code><\/pre>\n<p>tsconfig.json\u30d5\u30a1\u30a4\u30eb\u306f\u3001NodeJS\u30e9\u30f3\u30bf\u30a4\u30e0\u306b\u73fe\u5728\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304cTypescript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3042\u308b\u3053\u3068\u3092\u4f1d\u3048\u307e\u3059\u3002compilerOptions\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u305f\u3081\u306bNodeJS\u304c\u5fc5\u8981\u3068\u3059\u308b\u6761\u4ef6\u306e\u4e00\u89a7\u3067\u3059\u3002module\u306f\u3001\u30d5\u30a1\u30a4\u30eb\u3092Javascript\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u969b\u306b\u30b3\u30f3\u30d1\u30a4\u30e9\u306b\u4f7f\u7528\u3059\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u69cb\u6587\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002strict\u30d5\u30a3\u30fc\u30eb\u30c9\u306f\u3001Typescript\u30b3\u30fc\u30c9\u306e\u578b\u30c1\u30a7\u30c3\u30af\u3092\u6709\u52b9\u306b\u3057\u3001\u5909\u6570\u3084\u30e1\u30bd\u30c3\u30c9\u306e\u30c7\u30fc\u30bf\u5024\u3068\u578b\u304c\u4e00\u81f4\u3059\u308b\u3053\u3068\u3092\u4fdd\u8a3c\u3057\u307e\u3059\u3002include\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u542b\u307e\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u306e\u30ea\u30b9\u30c8\u307e\u305f\u306f\u30d1\u30bf\u30fc\u30f3\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306ftests\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u542b\u3081\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u4f5c\u696d\u304c\u7d42\u308f\u3063\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u74b0\u5883\u304c\u6574\u3063\u305f\u3089\u3001\u30c6\u30b9\u30c8\u306e\u4f5c\u6210\u3092\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d72\uff1a\u30c6\u30b9\u30c8\u306e\u4f5c\u6210<\/h2>\n<p>\u6700\u521d\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u6e96\u5099\u3057\u305fPlaywright\u306e\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u4f7f\u7528\u3057\u3066\u3001Silicon Cloud vServers\u306e\u30da\u30fc\u30b8\u306b\u95a2\u9023\u3059\u308b\uff13\u3064\u306e\u30c6\u30b9\u30c8\u4f8b\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>\u4f5c\u6210\u3059\u308bTypeScript\u306e\u30c6\u30b9\u30c8\u306f\u3001\u4ee5\u4e0b\u306e3\u3064\u306e\u9805\u76ee\u3092\u691c\u8a3c\u3057\u307e\u3059\u3002<\/p>\n<ul class=\"post-ul\">\n<li>Verify three options for signing up for new Silicon Cloud accounts: Sign up with Email, Sign up with Google, Sign up with Github.<\/li>\n<li>Verify that Silicon Cloud supports two types of packages: Basic and Premium.<\/li>\n<li>Verify that there are four basic virtual machine costs: 1 CPU, 2 CPUs, 4 CPUs, 8 CPUs.<\/li>\n<\/ul>\n<p>\u540c\u3058\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306b3\u3064\u306e\u30c6\u30b9\u30c8\u3092\u542b\u3081\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u305d\u308c\u305e\u308c\u306e\u30c6\u30b9\u30c8\u304c\u7570\u306a\u308b\u76ee\u7684\u3092\u679c\u305f\u3059\u305f\u3081\u30013\u3064\u306e\u5225\u3005\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u3059\u3079\u3066\u4fdd\u6301\u3059\u308b\u305f\u3081\u306b\u3001\u65b0\u3057\u3044\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092 &#8220;tests&#8221; \u3068\u3044\u3046\u540d\u524d\u3067\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"token function\">mkdir<\/span> tests\r\n<\/code><\/pre>\n<p>\u30c6\u30b9\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"token builtin class-name\">cd<\/span> tests\r\n<\/code><\/pre>\n<p>\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u7570\u306a\u308b\u76ee\u7684\u306e\u305f\u3081\u306b3\u3064\u306e\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u4e88\u5b9a\u3067\u3059\u306e\u3067\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u306etests\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u305d\u308c\u305e\u308c\u306e\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<ul class=\"post-ul\">\n<li>signUpMethods.spec.ts will implement the test for verifying the number of supported methods for users to sign up.<\/li>\n<li>multiplePackages.spec.ts will implement the test to verify the number of packages customers can choose.<\/li>\n<li>pricingComparison.spec.ts will verify the number of basic virtual machine costs.<\/li>\n<\/ul>\n<div class=\"post-conf-note\">\n<p class=\"post-conf-desc\">Note<\/p>\n<div>\u6ce8\u610f\uff1a\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u5f62\u5f0f\u306f\u3001TypeScript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408\u306f\u300c*.spec.ts\u300d\u3001JavaScript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408\u306f\u300c*.spec.js\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/div>\n<\/div>\n<p>\u30c6\u30b9\u30c8\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306fconfigTypes.ts\u3068\u3044\u3046\u540d\u524d\u3067\u3042\u308a\u3001\u307e\u305f\u30c6\u30b9\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3082\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001\u8907\u6570\u306e\u30d6\u30e9\u30a6\u30b6\u3068\u305d\u306e\u30da\u30fc\u30b8\u3068\u306e\u5bfe\u8a71\u306e\u305f\u3081\u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3084\u3001\u30c6\u30b9\u30c8\u3067\u4f7f\u7528\u3055\u308c\u308b\u3044\u304f\u3064\u304b\u306e\u8a2d\u5b9a\u5024\uff08\u4f8b\uff1a\u30c6\u30b9\u30c8\u5bfe\u8c61\u30a2\u30d7\u30ea\u306eURL\uff09\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30c6\u30b9\u30c8\u5bfe\u8c61\u306eURL\u306bDIGITAL_OCEAN_URL\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>configTypes.ts\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> configTypes.ts<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u73fe\u5728\u7a7a\u306econfigTypes.ts\u30d5\u30a1\u30a4\u30eb\u306b\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u8a2d\u5b9a\u30bf\u30a4\u30d7\u306e.ts\u30d5\u30a1\u30a4\u30eb<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> Browser<span class=\"token punctuation\">,<\/span> Page <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"playwright\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">import<\/span> fs <span class=\"token keyword\">from<\/span> <span class=\"token string\">'fs'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> toml <span class=\"token keyword\">from<\/span> <span class=\"token string\">'toml'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> config <span class=\"token operator\">=<\/span> toml<span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>fs<span class=\"token punctuation\">.<\/span><span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.\/config.toml'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'utf-8'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">declare<\/span> global <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> page<span class=\"token operator\">:<\/span> Page<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">const<\/span> browser<span class=\"token operator\">:<\/span> Browser<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">const<\/span> browserName<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token constant\">DIGITAL_OCEAN_URL<\/span><span class=\"token operator\">:<\/span> config<span class=\"token punctuation\">.<\/span>digital_ocean_url <span class=\"token operator\">??<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u521d\u306b\u3001\u30a4\u30f3\u30dd\u30fc\u30c8\u306e\u6a5f\u80fd\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30db\u30fc\u30e0\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3042\u308b.\/config.toml\u304b\u3089\u8a2d\u5b9a\u5185\u5bb9\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<p>\u6700\u7d42\u7684\u306a\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u306b\u304a\u3044\u3066\u3001\u30da\u30fc\u30b8\u3068\u30d6\u30e9\u30a6\u30b6\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u521d\u671f\u5316\u3059\u308b\u305f\u3081\u306b\u3001\u30da\u30fc\u30b8\u3001\u30d6\u30e9\u30a6\u30b6\u3001\u30d6\u30e9\u30a6\u30b6\u540d\u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3092\u5ba3\u8a00\u3057\u307e\u3059\u3002<\/p>\n<p>\u6700\u7d42\u7684\u306b\u3001config.toml\u304b\u3089digital_ocean_url\u30ad\u30fc\u3067\u8aad\u307f\u8fbc\u3093\u3060\u5024\u3092\u4f7f\u3063\u3066DIGITAL_OCEAN_URL\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u3001\u5f8c\u3067\u30c6\u30b9\u30c8\u3067\u3053\u306eURL\u3092\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u4f5c\u696d\u304c\u7d42\u308f\u3063\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6700\u521d\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001nano\u307e\u305f\u306f\u304a\u597d\u307f\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3092\u4f7f\u7528\u3057\u3066\u3001signUpMethods.spec.ts\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u958b\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> signUpMethods.spec.ts<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u7a7a\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\n<p>\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u8868\u73fe\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u300csignUpMethods.spec.ts\u306e\u5185\u5bb9\u300d<\/p>\n<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">import<\/span> endpoint <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/configTypes\"<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> test<span class=\"token punctuation\">,<\/span> expect <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'@playwright\/test'<\/span>\r\n\r\n<span class=\"token function\">test<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Expect to have 3 options for signing up\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> page <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Go to the vServers product page of Silicon Cloud web page<\/span>\r\n  <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">goto<\/span><span class=\"token punctuation\">(<\/span>endpoint<span class=\"token punctuation\">.<\/span><span class=\"token constant\">DIGITAL_OCEAN_URL<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Wait for the page to load<\/span>\r\n  <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitForLoadState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'networkidle'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Get the number of signUp options<\/span>\r\n  <span class=\"token keyword\">const<\/span> number_subscriptions_allowed <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">locator<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 &gt; a'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">count<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Verify that number equals 3<\/span>\r\n  <span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span>number_subscriptions_allowed<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toBe<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>signUpMethods.spec.ts\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001vServers\u30da\u30fc\u30b8\u306b3\u3064\u306e\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308b\u304b\u3069\u3046\u304b\u3092\u8a55\u4fa1\u3059\u308b\u30c6\u30b9\u30c8\u306e\u30b3\u30fc\u30c9\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\u6700\u521d\u306e2\u884c\u3067\u30c6\u30b9\u30c8\u3068expect\u30e1\u30bd\u30c3\u30c9\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30b9\u30c8\u306f\u975e\u540c\u671f\u307e\u305f\u306f\u540c\u671f\u3067\u66f8\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30c6\u30b9\u30c8\u3092\u975e\u540c\u671f\u306b\u66f8\u304f\u3053\u3068\u306f\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u30c6\u30b9\u30c8\u306e\u5404\u30b9\u30c6\u30c3\u30d7\u306e\u7d42\u4e86\u3092\u5f85\u3064\u5fc5\u8981\u304c\u306a\u3044\u305f\u3081\u3001\u30c6\u30b9\u30c8\u306e\u30b9\u30d4\u30fc\u30c9\u3092\u6700\u9069\u5316\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002\u30b9\u30c6\u30c3\u30d7\u304c\u95a2\u9023\u3059\u308b\u30a6\u30a7\u30d6\u4e0a\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u306b\u95a2\u9023\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u5404\u8981\u7d20\u304c\u5b9f\u884c\u3055\u308c\u308b\u524d\u306b\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306b\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u5404\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u547c\u3073\u51fa\u3055\u308c\u308b\u524d\u306bawait\u30e1\u30bd\u30c3\u30c9\u3092\u542b\u3081\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30b9\u30c8\u306f\u30014\u3064\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u6301\u3064\u30c6\u30b9\u30c8\u30d6\u30ed\u30c3\u30af\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u6700\u521d\u306eawait\u30ad\u30fc\u30ef\u30fc\u30c9\u306f\u3001configTypes.ts\u30d5\u30a1\u30a4\u30eb\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308bDIGITAL_OCEAN_URL\u306b\u30c6\u30b9\u30c8\u304c\u79fb\u52d5\u3059\u308b\u3088\u3046\u306b\u3001page.goto()\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306epage\u3092async\u5ba3\u8a00\u306b\u5165\u308c\u308b\u3053\u3068\u3067\u3001\u30c6\u30b9\u30c8\u5168\u4f53\u3067page\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u521d\u671f\u5316\u3059\u308b\u5fc5\u8981\u306a\u304f\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\uff12\u3064\u76ee\u306eawait\u30ad\u30fc\u30ef\u30fc\u30c9\u306f\u3001\u5f85\u6a5f\u4e2d\u306e\u30c6\u30b9\u30c8\u304cpage.waitForLoadState()\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u3092\u5f85\u3064\u3088\u3046\u306b\u6307\u793a\u3057\u307e\u3059\u3002\u307e\u3060\u5b8c\u4e86\u3057\u3066\u3044\u306a\u3044API\u547c\u3073\u51fa\u3057\u304c\u3042\u308b\u5834\u5408\u3001\u5229\u7528\u3067\u304d\u306a\u3044\u8981\u7d20\u304c\u30da\u30fc\u30b8\u306b\u5b58\u5728\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u3001\u305d\u306e\u8981\u7d20\u304c\u898b\u3064\u304b\u3089\u306a\u3044\u305f\u3081\u306b\u30c6\u30b9\u30c8\u304c\u5931\u6557\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u307e\u3059\u3002\uff11\u3064\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u307f\u5fc5\u8981\u3067\u3059\u3002<br \/>\n\u3042\u306a\u305f\u306f\u3001number_subscriptions_allowed\u3092\u5b9a\u7fa9\u3057\u3001page.locator()\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u6570\u3092\u691c\u7d22\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fCSS\u30bb\u30ec\u30af\u30bf\u30fc\uff08\u3053\u306e\u5834\u5408\u3001\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u30dc\u30bf\u30f3\uff09\u306b\u3088\u3063\u3066\u898b\u3064\u3051\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u305d\u308c\u304c\u542b\u3080\u5b50\u8981\u7d20\u306e\u6570\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001expect\u30e1\u30bd\u30c3\u30c9\u306fpage.locator()\u306b\u3088\u3063\u3066\u898b\u3064\u304b\u3063\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u6570\u3092\u4e88\u60f3\u3055\u308c\u308b\u51fa\u529b\u3067\u3042\u308b3\u3068\u691c\u8a3c\u3057\u307e\u3059\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u308b\u3002<\/p>\n<p>\u6b21\u306b\u30012\u3064\u76ee\u306e\u30c6\u30b9\u30c8\u3092\u66f8\u304d\u307e\u3059\u3002multiplePackages.spec.ts\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u958b\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> multiplePackages.spec.ts<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u7a7a\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u8907\u6570\u306e\u30d1\u30c3\u30b1\u30fc\u30b8.spec.ts<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">import<\/span> endpoint <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/configTypes\"<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> test<span class=\"token punctuation\">,<\/span> expect <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'@playwright\/test'<\/span>\r\n\r\n<span class=\"token function\">test<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Expect to have 3 packages for subscription\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> page <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Go to the vServers product page of Silicon Cloud web page<\/span>\r\n  <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">goto<\/span><span class=\"token punctuation\">(<\/span>endpoint<span class=\"token punctuation\">.<\/span><span class=\"token constant\">DIGITAL_OCEAN_URL<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Wait for the page to load<\/span>\r\n  <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitForLoadState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'networkidle'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Get the number of packages to be 2 (Basic and Premium)<\/span>\r\n  <span class=\"token keyword\">const<\/span> number_subscriptions_allowed <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">locator<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 &gt; div'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">count<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Verify that number equals 2<\/span>\r\n  <span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span>number_subscriptions_allowed<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toBe<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u30d7\u30ec\u30a4\u30e9\u30a4\u30c8\u306e\u4f9d\u5b58\u95a2\u4fc2\u304b\u3089\u3001signUpMethods.spec.ts\u30d5\u30a1\u30a4\u30eb\u3068\u540c\u69d8\u306b\u3001\u30c6\u30b9\u30c8\u306e\u8a2d\u5b9a\u3068\u30c6\u30b9\u30c8\u95a2\u6570\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001page.goto()\u3092\u4f7f\u7528\u3057\u3066\u6700\u521d\u306bDIGITAL_OCEAN_URL\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001page.waitForLoadState()\u3092\u4f7f\u7528\u3057\u3066\u30da\u30fc\u30b8\u304c\u3059\u3079\u3066\u306e\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u547c\u3073\u51fa\u3057\u3092\u5b8c\u4e86\u3059\u308b\u306e\u3092\u5f85\u3061\u307e\u3059\u3002<\/p>\n<p>Web UI\u5185\u306esubscription\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b50\u8981\u7d20\u3092\u898b\u3064\u3051\u3001\u305d\u306e\u60c5\u5831\u3092number_subscriptions_allowed\u5909\u6570\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n<p>\u6700\u7d42\u7684\u306b\u3001number_subscriptions_allowed\u306e\u5024\u30922\u3068\u3044\u3046\u4e88\u60f3\u3055\u308c\u308b\u51fa\u529b\u3068\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n<p>\u4f5c\u696d\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u305d\u306e\u5f8c\u3001pricingComparison.spec.ts\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u958b\u304d\u3001\u7b2c3\u306e\u30c6\u30b9\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> pricingComparison.spec.ts<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u7a7a\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>pricingComparison.spec.ts\u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u81ea\u7136\u306a\u8868\u73fe\u306b\u66f8\u304d\u63db\u3048\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\uff1a<br \/>\npricingComparison.spec.ts\u306e\u6bd4\u8f03\u5185\u5bb9\u3002<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">import<\/span> endpoint <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/configTypes\"<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> test<span class=\"token punctuation\">,<\/span> expect <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'@playwright\/test'<\/span>\r\n\r\n<span class=\"token function\">test<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Expect to have 3 packages for subscription\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> page <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Go to the vServers product page of Silicon Cloud web page<\/span>\r\n  <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">goto<\/span><span class=\"token punctuation\">(<\/span>endpoint<span class=\"token punctuation\">.<\/span><span class=\"token constant\">DIGITAL_OCEAN_URL<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Wait for the page to load<\/span>\r\n  <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">waitForLoadState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'networkidle'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Get the number of basic virtual machine costs (1 CPU, 2 CPU, 4 CPU, 8 CPU)<\/span>\r\n  <span class=\"token keyword\">const<\/span> number_subscriptions_allowed <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">locator<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 &gt; button'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">count<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\r\n\r\n  <span class=\"token comment\">\/\/ Verify that number equals 4<\/span>\r\n  <span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span>number_subscriptions_allowed<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toBe<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u306e\u975e\u540c\u671f\u95a2\u6570\u306f\u3001\u524d\u306e\u30c6\u30b9\u30c8\u3068\u540c\u3058\u30da\u30fc\u30b8.goto()\u306eURL\u3068\u30da\u30fc\u30b8.waitForLoadState()\u306e\u6307\u793a\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30c6\u30b9\u30c8\u306f\u3001vServers\u30da\u30fc\u30b8\u3067\u5229\u7528\u53ef\u80fd\u306a\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u30d1\u30c3\u30b1\u30fc\u30b8\u306b\u95a2\u9023\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u306e\u5f8c\u534a\u90e8\u5206\u3067\u306f\u305d\u306e\u30c6\u30b9\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u4fa1\u683c\u30aa\u30d7\u30b7\u30e7\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b50\u8981\u7d20\u306e\u6570\u3092\u53d6\u5f97\u3057\u3001\u305d\u306e\u5024\u3092number_subscriptions_allowed\u5909\u6570\u306b\u683c\u7d0d\u3057\u307e\u3059\u3002number_subscriptions_allowed\u306e\u5024\u304c4\uff08\u73fe\u5728\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u306e\u6570\uff09\u3068\u7b49\u3057\u3044\u3053\u3068\u3092\u691c\u8a3c\u3057\u307e\u3059\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30c6\u30b9\u30c8\u3067\u306f\u3001configTypes.ts\u304b\u3089DIGITAL_OCEAN_URL\u3092\u4f7f\u7528\u3057\u3001configTypes.ts\u306f.\/config.toml\u30d5\u30a1\u30a4\u30eb\u304b\u3089digital_ocean_url\u306e\u5024\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30db\u30fc\u30e0\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bconfig.toml\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30db\u30fc\u30e0\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token builtin class-name\">cd<\/span> <span class=\"token punctuation\">..<\/span><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u305d\u308c\u304b\u3089\u3001config.toml\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> config.toml<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092config.toml\u30d5\u30a1\u30a4\u30eb\u306b\u30b3\u30d4\u30fc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30b3\u30f3\u30d5\u30a3\u30b0.toml<\/div>\n<pre class=\"post-pre\"><code><span class=\"token key property\">digital_ocean_url<\/span><span class=\"token punctuation\">=<\/span><span class=\"token string\">\"https:\/\/www.digitalocean.com\/products\/droplets\"<\/span>\r\n<\/code><\/pre>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u308b\u3002<\/p>\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u30c4\u30ea\u30fc\u306f\u3001\u73fe\u5728\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656477dadaa94e2bdf7b81b3\/109-0.png\" alt=\"Directory tree showing each of the files in the project, including the three Typescript files created within the folder\" \/><\/div>\n<p>\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u4f7f\u7528\u3059\u308b3\u3064\u306e\u30c6\u30b9\u30c8\u3092\u66f8\u304d\u307e\u3057\u305f\u3002\u307e\u305f\u3001\u30c6\u30b9\u30c8\u306b\u4f9d\u5b58\u3059\u308bconfig.toml\u30d5\u30a1\u30a4\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3057\u305f\u3002\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d73 \u2014 \u30c6\u30b9\u30c8\u306e\u5b9f\u884c<\/h2>\n<p>CLI\u3067Playwright\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306e\u591a\u304f\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308a\u307e\u3059\u3002\u5168\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u305f\u308a\u3001\u4e26\u5217\u5316\u3092\u7121\u52b9\u306b\u3057\u305f\u308a\u3001\u4e00\u9023\u306e\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u5b9f\u884c\u3057\u305f\u308a\u3001\u30c7\u30d0\u30c3\u30b0\u30e2\u30fc\u30c9\u3067\u5b9f\u884c\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u5168\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<p>\u6700\u521d\u306b\u3001\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx playwright <span class=\"token builtin class-name\">test<\/span> <span class=\"token parameter variable\">&#8211;browser<\/span><span class=\"token operator\">=<\/span>all<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30c6\u30b9\u30c8\u306e\u7d50\u679c\u306f\u3053\u3046\u3057\u3066\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>Running 9 tests using 1 worker \u2713 [chromium] \u203a tests\/multiplePackages.spec.ts:4:1 \u203a Expect to have 3 packages for subscription (6s) \u2713 [chromium] \u203a tests\/pricingComparison.spec.ts:4:1 \u203a Expect to have 3 packages for subscription (4s) \u2713 [chromium] \u203a tests\/signUpMethods.spec.ts:4:1 \u203a Expect to have 3 options for signing up (3s) \u2713 [firefox] \u203a tests\/multiplePackages.spec.ts:4:1 \u203a Expect to have 3 packages for subscription (9s) \u2713 [firefox] \u203a tests\/pricingComparison.spec.ts:4:1 \u203a Expect to have 3 packages for subscription (5s) \u2713 [firefox] \u203a tests\/signUpMethods.spec.ts:4:1 \u203a Expect to have 3 options for signing up (7s) \u2713 [webkit] \u203a tests\/multiplePackages.spec.ts:4:1 \u203a Expect to have 3 packages for subscription (7s) \u2713 [webkit] \u203a tests\/pricingComparison.spec.ts:4:1 \u203a Expect to have 3 packages for subscription (6s) \u2713 [webkit] \u203a tests\/signUpMethods.spec.ts:4:1 \u203a Expect to have 3 options for signing up (6s) 9 passed (1m)<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306f\u30013\u3064\u306e\u30d6\u30e9\u30a6\u30b6\uff08Chromium\u3001Firefox\u3001Webkit\uff09\u3067\u306e\u3059\u3079\u3066\u306e\u30c6\u30b9\u30c8\u304c\u5408\u683c\u3057\u305f\u3053\u3068\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u73fe\u5728\u306e\u30b5\u30fc\u30d0\u30fc\u304c\u4f7f\u7528\u3057\u3066\u3044\u308b\u30b3\u30a2\u306e\u6570\u3068\u30c6\u30b9\u30c8\u306e\u73fe\u5728\u306e\u8a2d\u5b9a\u306b\u3088\u3063\u3066\u3001\u52b4\u50cd\u8005\u306e\u6570\u304c\u6c7a\u307e\u308a\u307e\u3059\u3002playwright.config.ts\u30d5\u30a1\u30a4\u30eb\u3067\u3001\u52b4\u50cd\u8005\u306e\u6570\u3092\u5236\u9650\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30c6\u30b9\u30c8\u306e\u8a2d\u5b9a\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001Playwright\u306e\u88fd\u54c1\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30d7\u30ec\u30a4\u30e9\u30a4\u30c8\u306e\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u306f\u3001Jenkins\u3084CircleCI\u306a\u3069\u306eCI\u30c4\u30fc\u30eb\u306b\u7d71\u5408\u53ef\u80fd\u306a\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30c8\u306e\u3044\u304f\u3064\u304b\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30c8\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001\u30d7\u30ec\u30a4\u30e9\u30a4\u30c8\u306e\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30bf\u30fc\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30da\u30fc\u30b8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001CLI\u3067\u30c6\u30b9\u30c8\u3092\u8868\u793a\u3059\u308b\u3088\u308a\u3082\u8aad\u307f\u3084\u3059\u3044HTML\u30ec\u30dd\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<p>HTML\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx playwright <span class=\"token builtin class-name\">test<\/span> <span class=\"token parameter variable\">&#8211;browser<\/span><span class=\"token operator\">=<\/span>all <span class=\"token parameter variable\">&#8211;reporter<\/span><span class=\"token operator\">=<\/span>html<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3053\u3093\u306a\u7d50\u679c\u304c\u898b\u3048\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>Running 9 tests using 2 workers 9 passed (40s) To open last HTML report run: npx playwright show-report<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>HTML\u30ec\u30dd\u30fc\u30c8\u3092\u8868\u793a\u3059\u308b\u306b\u306f\u3001\u6b21\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx playwright show-report<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u6b21\u306e\u3088\u3046\u306a\u51fa\u529b\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>Serving HTML report at http:\/\/<mark>your_ip_address<\/mark>:9323. Press Ctrl+C to quit.<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3042\u306a\u305f\u306f\u4eca\u3001\u30dd\u30fc\u30c89323\u3092\u4ecb\u3057\u3066\u30ec\u30dd\u30fc\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<div class=\"post-conf-note\">\n<p class=\"post-conf-desc\">Note<\/p>\n<div>\u6ce8\u610f\uff1a\u30ea\u30e2\u30fc\u30c8\u3067\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30c8\u3092\u30ed\u30fc\u30ab\u30eb\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u30ea\u30e2\u30fc\u30c8\u30b5\u30fc\u30d0\u30fc\u3092\u73fe\u5728\u306e\u30ed\u30fc\u30ab\u30eb\u30de\u30b7\u30f3\u306b\u516c\u958b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u30ed\u30fc\u30ab\u30eb\u30de\u30b7\u30f3\u3067\u65b0\u3057\u3044\u30bf\u30fc\u30df\u30ca\u30eb\u30bb\u30c3\u30b7\u30e7\u30f3\u3092\u958b\u304d\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\uff1a<br \/>\nssh -L 9323:localhost:9323 \u3042\u306a\u305f\u306e\u975e\u30eb\u30fc\u30c8\u30e6\u30fc\u30b6\u30fc@\u3042\u306a\u305f\u306e\u30b5\u30fc\u30d0\u30fc\u306eIP<\/div>\n<p>SSH\u30dd\u30fc\u30c8\u30d5\u30a9\u30ef\u30fc\u30c7\u30a3\u30f3\u30b0\u306b\u3088\u3063\u3066\u3001\u30b5\u30fc\u30d0\u30fc\u30dd\u30fc\u30c8\u306f\u30ed\u30fc\u30ab\u30eb\u30dd\u30fc\u30c8\u306b\u8ee2\u9001\u3055\u308c\u307e\u3059\u3002-L 9323:localhost:9323 \u306e\u90e8\u5206\u306f\u3001\u30ed\u30fc\u30ab\u30eb\u30de\u30b7\u30f3\u306e\u30dd\u30fc\u30c89323\u304c\u30ea\u30e2\u30fc\u30c8\u30b5\u30fc\u30d0\u30fc\u306e\u540c\u3058\u30dd\u30fc\u30c8\u306b\u8ee2\u9001\u3055\u308c\u308b\u3053\u3068\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u308c\u3067\u3001\u30ed\u30fc\u30ab\u30eb\u30de\u30b7\u30f3\u306e\u30d6\u30e9\u30a6\u30b6\u3067 http:\/\/localhost:9323 \u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u3067\u3001\u30c6\u30b9\u30c8\u30ec\u30dd\u30fc\u30c8\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<\/div>\n<p>\u30d6\u30e9\u30a6\u30b6\u3067\u30ec\u30dd\u30fc\u30c8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u308b\u3068\u3001\u5404\u30c6\u30b9\u30c8\u304cChromium\u3001Firefox\u3001\u304a\u3088\u3073Webkit\u306e3\u3064\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u5b9f\u884c\u3055\u308c\u305f\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002\u5404\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u5404\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u6642\u9593\u3068\u3001\u30c6\u30b9\u30c8\u5168\u4f53\u306e\u5b9f\u884c\u6642\u9593\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656477dadaa94e2bdf7b81b3\/132-0.png\" alt=\"Screencapture of the overall report, which is separated into the three different tests where each test displays the overall time the test took to run, as well as how long each browser's test took to run\" \/><\/div>\n<p>\u8a73\u7d30\u3092\u898b\u308b\u306b\u306f\u3001\u30ec\u30dd\u30fc\u30c8\u540d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656477dadaa94e2bdf7b81b3\/134-0.png\" alt=\"Screencapture of the report details for the test, which displays the length of time that each element of the test took\" \/><\/div>\n<p>\u8a73\u7d30\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u624b\u9806\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067Before Hooks\u3068After Hooks\u306e\u30b9\u30c6\u30c3\u30d7\u3092\u5099\u3048\u3066\u3044\u307e\u3059\u3002Before Hooks\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u3078\u306e\u30ed\u30b0\u30a4\u30f3\u3084\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u53d6\u308a\u306a\u3069\u306e\u521d\u671f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u5f8c\u3001After Hooks\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u30c6\u30b9\u30c8\u74b0\u5883\u5185\u306e\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u3092\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3059\u308b\u3053\u3068\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3002\u30c6\u30b9\u30c8\u306e\u5404\u30b9\u30c6\u30c3\u30d7\u306b\u306f\u3001page.goto\uff08\uff09\u3092\u4f7f\u7528\u3057\u3066URL\u3092\u8a2a\u554f\u3057\u3001page.waitForLoadState\uff08\uff09\u3067\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u3092\u5f85\u6a5f\u3057\u3001locator.count\uff08\uff09\u3067\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u30ab\u30a6\u30f3\u30c8\u3057\u3001expect.toBe\u3068\u4e00\u81f4\u3059\u308b\u5024\u3092\u691c\u8a3c\u3059\u308b\u305f\u3081\u306e\u8a73\u7d30\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u30013\u3064\u306e\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u3001\u5408\u683c\u72b6\u614b\u3092\u78ba\u8a8d\u3057\u3001\u30c6\u30b9\u30c8\u7d50\u679c\u3092CLI\u3068HTML\u5f62\u5f0f\u306e\u4e21\u65b9\u3067\u8868\u793a\u3057\u307e\u3057\u305f\u3002\u6b21\u306b\u3001Docker\u3067\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d74 &#8211; Docker\u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u5c55\u958b\u3059\u308b<\/h2>\n<p>\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u3092\u5b9f\u65bd\u3059\u308b\u969b\u306b\u306f\u3001\u74b0\u5883\u306e\u554f\u984c\u306b\u76f4\u9762\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u30c6\u30b9\u30c8\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u30ed\u30fc\u30ab\u30eb\u30de\u30b7\u30f3\u3067\u306f\u6b63\u5e38\u306b\u30c6\u30b9\u30c8\u304c\u5b9f\u884c\u3055\u308c\u308b\u304c\u3001\u74b0\u5883\u306e\u4e92\u63db\u6027\u306e\u554f\u984c\u306b\u3088\u308aCI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u7d71\u5408\u3059\u308b\u3068\u5931\u6557\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u554f\u984c\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u306b\u3001\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067Docker\u30b3\u30f3\u30c6\u30ca\u3092\u4f7f\u7528\u3057\u3066\u81ea\u52d5\u5316\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Docker\u306e\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3067\u30c6\u30b9\u30c8\u304c\u6b63\u5e38\u306b\u5b9f\u884c\u3055\u308c\u308b\u5834\u5408\u3001CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u306e\u4e92\u63db\u6027\u306e\u554f\u984c\u3092\u56de\u907f\u3059\u308b\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u3067\u3059\u3002<\/p>\n<p>\u6700\u521d\u306b\u3001\u5f8c\u3067Docker\u3067\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u30c6\u30b9\u30c8\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u305f\u3081\u306bpackage.json\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> package.json<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30d1\u30c3\u30b1\u30fc\u30b8\u306ejson\u30d5\u30a1\u30a4\u30eb\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u3001\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30d1\u30c3\u30b1\u30fc\u30b8.json<\/div>\n<pre class=\"post-pre\"><code>...\r\n <span class=\"token property\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <mark><span class=\"token property\">\"test\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"playwright test --browser=all\"<\/span><span class=\"token punctuation\">,<\/span><\/mark>\r\n  <mark><span class=\"token property\">\"test-html-report\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"playwright test --browser=all --reporter=html\"<\/span><span class=\"token punctuation\">,<\/span><\/mark>\r\n  <mark><span class=\"token property\">\"test-json-report\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json\"<\/span><\/mark>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u308c\u3089\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u3001\u5b8c\u5168\u306a\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001\u30ab\u30b9\u30bf\u30e0\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002HTML\u3067\u30ec\u30dd\u30fc\u30bf\u30fc\u8868\u793a\u3092\u542b\u3081\u3066\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> run test-html-report<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u5b8c\u5168\u306a\u30b3\u30de\u30f3\u30c9\u306e\u4ee3\u308f\u308a\u306b<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx playwright <span class=\"token builtin class-name\">test<\/span> <span class=\"token parameter variable\">&#8211;browser<\/span><span class=\"token operator\">=<\/span>all <span class=\"token parameter variable\">&#8211;reporter<\/span><span class=\"token operator\">=<\/span>html<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3042\u306a\u305f\u306e\u73fe\u5728\u306epackage.json\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059\uff1a<\/p>\n<pre class=\"post-pre\"><code><span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"playwright-docker\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"1.0.0\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"description\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"A project for using playwright for end-to-end testing purpose with docker for deployment\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"main\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"index.js\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">\"test\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"playwright test --browser=all\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"test-html-report\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"playwright test --browser=all --reporter=html\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"test-json-report\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json\"<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"author\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"license\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"ISC\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"devDependencies\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">\"@playwright\/test\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"^1.22.2\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"@types\/node\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"^17.0.35\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"playwright\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"^1.22.1\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"toml\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"^3.0.0\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"typescript\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"^4.6.4\"<\/span>\r\n  <span class=\"token punctuation\">}<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<\/code><\/pre>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6b21\u306b\u3001\u73fe\u5728\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bDockerfile\u3092\u4f5c\u6210\u3057\u3001\u958b\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> Dockerfile<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u305d\u308c\u306b\u6b21\u306e\u5185\u5bb9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30c9\u30c3\u30ab\u30fc\u30d5\u30a1\u30a4\u30eb<\/div>\n<pre class=\"post-pre\"><code><span class=\"token comment\"># Get the base image of Node version 16<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">FROM<\/span> node:16<\/span>\r\n\r\n<span class=\"token comment\"># Get the latest version of Playwright<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">FROM<\/span> mcr.microsoft.com\/playwright:focal<\/span>\r\n \r\n<span class=\"token comment\"># Set the work directory for the application<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">WORKDIR<\/span> \/app<\/span>\r\n \r\n<span class=\"token comment\"># Set the environment path to node_modules\/.bin<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">ENV<\/span> PATH \/app\/node_modules\/.bin:<span class=\"token variable\">$PATH<\/span><\/span>\r\n\r\n<span class=\"token comment\"># COPY the needed files to the app folder in Docker image<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">COPY<\/span> package.json \/app\/<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">COPY<\/span> tests\/ \/app\/tests\/<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">COPY<\/span> tsconfig.json \/app\/<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">COPY<\/span> config.toml \/app\/<\/span>\r\n\r\n<span class=\"token comment\"># Get the needed libraries to run Playwright<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">RUN<\/span> apt-get update &amp;&amp; apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev<\/span>\r\n\r\n<span class=\"token comment\"># Install the dependencies in Node environment<\/span>\r\n<span class=\"token instruction\"><span class=\"token keyword\">RUN<\/span> npm install<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u521d\u306b\u3001Docker\u30a4\u30e1\u30fc\u30b8\u306bNode\u30d0\u30fc\u30b8\u30e7\u30f316\u3068Playwright\u30d0\u30fc\u30b8\u30e7\u30f3focal\u306e\u30d9\u30fc\u30b9\u30a4\u30e1\u30fc\u30b8\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002\u30c6\u30b9\u30c8\u5b9f\u884c\u306b\u306fNode\u3068Playwright\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<p>\u305d\u308c\u3067\u306f\u3001\u30b3\u30f3\u30c6\u30ca\u5185\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u540d\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u3001\u305d\u308c\u306fWORKDIR\u3067\u3059\u3002WORKDIR \/app\u3068\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u30d5\u30a1\u30a4\u30eb\u306f\u3059\u3079\u3066\u30b3\u30f3\u30c6\u30ca\u5185\u306e\/app\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>Docker\u30b3\u30f3\u30c6\u30ca\u306e\u74b0\u5883\u30d1\u30b9\u3092ENV PATH\u3067\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u3001node_modules\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u305d\u308c\u3067\u306f\u3001\u5fc5\u8981\u306a\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3092Docker\u30a4\u30e1\u30fc\u30b8\u306e\/app\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3059\u3002<\/p>\n<p>\u30d7\u30ec\u30a4\u30e9\u30a4\u30bf\u30fc\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u5fc5\u8981\u3067\u3059\u306e\u3067\u3001Docker\u30a4\u30e1\u30fc\u30b8\u306b\u3082\u305d\u308c\u3089\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u308b\u3002<\/p>\n<p>\u6b21\u306b\u3001\u81ea\u52d5\u5316\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u305f\u3081\u306e\u30a4\u30e1\u30fc\u30b8\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">docker<\/span> build <span class=\"token parameter variable\">-t<\/span> playwright-docker <span class=\"token builtin class-name\">.<\/span><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>Docker\u306f\u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306eDockerfile\u3092\u898b\u3064\u3051\u3001\u305d\u306e\u4e2d\u306e\u6307\u793a\u306b\u5f93\u3063\u3066\u30a4\u30e1\u30fc\u30b8\u3092\u30d3\u30eb\u30c9\u3057\u307e\u3059\u3002-t\u30d5\u30e9\u30b0\u306fplaywright-docker\u3068\u3044\u3046\u540d\u524d\u3067Docker\u30a4\u30e1\u30fc\u30b8\u306b\u30bf\u30b0\u3092\u4ed8\u3051\u307e\u3059\u3002.\u306fDocker\u306b\u5bfe\u3057\u3066\u73fe\u5728\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306eDockerfile\u3092\u63a2\u3059\u3088\u3046\u6307\u793a\u3057\u307e\u3059\u3002Docker\u30a4\u30e1\u30fc\u30b8\u306e\u30d3\u30eb\u30c9\u306b\u95a2\u3057\u3066\u306f\u3001Docker\u306e\u88fd\u54c1\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30d3\u30eb\u30c9\u306e\u51fa\u529b\uff08\u7c21\u7d20\u5316\u3055\u308c\u305f\u3082\u306e\uff09\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u898b\u3048\u308b\u3060\u308d\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>Sending build context to Docker daemon 76.61MB &#8230; added 6 packages, and audited 7 packages in 6s found 0 vulnerabilities Removing intermediate container 87520d179fd1 &#8212;&gt; 433ae116d06a Successfully built 433ae116d06a Successfully tagged playwright-docker:latest<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30c6\u30b9\u30c8\u304cWindows\u3084MacOS\u4e0a\u3067\u6b63\u3057\u304f\u5b9f\u884c\u3055\u308c\u306a\u3044\u5834\u5408\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u305d\u308c\u306f\u3001\u521d\u671f\u8a2d\u5b9a\u4e2d\u306b\u4f9d\u5b58\u95a2\u4fc2\u306e\u7af6\u5408\u3084\u6b20\u843d\u304c\u539f\u56e0\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306bDocker\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001\u3053\u306e\u3088\u3046\u306a\u74b0\u5883\u8a2d\u5b9a\u306e\u554f\u984c\u3092\u9632\u3050\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Docker\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30d9\u30fc\u30b9\u30a4\u30e1\u30fc\u30b8\u306b\u5fc5\u8981\u306a\u3059\u3079\u3066\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u542b\u307e\u308c\u307e\u3059\u3002Docker\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u9650\u308a\u3001\u30c6\u30b9\u30c8\u306f\u7570\u306a\u308b\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Docker\u30a4\u30e1\u30fc\u30b8\u304c\u6b63\u5e38\u306b\u4f5c\u6210\u3055\u308c\u305f\u304b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002 (Docker\u30a4\u30e1\u30fc\u30b8\u304c\u6b63\u5e38\u306b\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002)<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">docker<\/span> image <span class=\"token function\">ls<\/span><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u7d50\u679c\u304c\u5f97\u3089\u308c\u308b\u3079\u304d\u3067\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>REPOSITORY TAG IMAGE ID CREATED SIZE playwright-docker latest 433ae116d06a 5 minutes ago 1.92GB mcr.microsoft.com\/playwright focal bb9872cfd272 2 days ago 1.76GB node 16 c6b745e900c7 6 days ago 907MB<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30c6\u30b9\u30c8\u30a4\u30e1\u30fc\u30b8\u306eplaywright-docker\u3001Microsoft Playwright\u3001\u304a\u3088\u3073Node\u30a4\u30e1\u30fc\u30b8\u304c\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002\u307e\u305f\u3001Docker\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u8981\u4ef6\u3068\u3057\u3066\u3001Ubuntu\u304a\u3088\u3073hello-world\u306e\u30a4\u30e1\u30fc\u30b8\u3082\u5229\u7528\u3067\u304d\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u30c9\u30c3\u30ab\u30fc\u306e\u30b3\u30f3\u30c6\u30ca\u3067\u30c6\u30b9\u30c8\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u3001docker run\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">docker<\/span> run <span class=\"token parameter variable\">-it<\/span> playwright-docker:latest <span class=\"token function\">npm<\/span> run <span class=\"token builtin class-name\">test<\/span><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>docker run \u30b3\u30de\u30f3\u30c9\u306f\u3001\u6307\u5b9a\u3055\u308c\u305f Docker \u30a4\u30e1\u30fc\u30b8\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u306f\u3001playwright-docker:latest\u3068\u3044\u3046\u30a4\u30e1\u30fc\u30b8\u3092\u4f7f\u7528\u3057\u3001\u30b3\u30de\u30f3\u30c9\u306f npm run test \u3067\u3059\u3002docker run \u306f\u307e\u305a Docker \u30b3\u30f3\u30c6\u30ca\u3092\u8d77\u52d5\u3057\u3001\u305d\u306e\u5f8c\u5fc5\u8981\u306a\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u8a73\u7d30\u306f Docker \u306e\u88fd\u54c1\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u7d50\u679c\u306f\u3053\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&gt; playwright-docker@1.0.0 test &gt; playwright test &#8211;browser=all Running 9 tests using 2 workers \u2713 [chromium] \u203a tests\/pricingComparison.spec.ts:4:1 \u203a Expect to have 4 pricing options (7s) \u2713 [chromium] \u203a tests\/multiplePackages.spec.ts:4:1 \u203a Expect to have 2 packages for subscription (8s) \u2713 [chromium] \u203a tests\/signUpMethods.spec.ts:4:1 \u203a Expect to have 3 options for signing up (8s) \u2713 [firefox] \u203a tests\/multiplePackages.spec.ts:4:1 \u203a Expect to have 2 packages for subscription (9s) \u2713 [firefox] \u203a tests\/pricingComparison.spec.ts:4:1 \u203a Expect to have 4 pricing options (8s) \u2713 [firefox] \u203a tests\/signUpMethods.spec.ts:4:1 \u203a Expect to have 3 options for signing up (5s) \u2713 [webkit] \u203a tests\/multiplePackages.spec.ts:4:1 \u203a Expect to have 2 packages for subscription (8s) \u2713 [webkit] \u203a tests\/pricingComparison.spec.ts:4:1 \u203a Expect to have 4 pricing options (10s) \u2713 [webkit] \u203a tests\/signUpMethods.spec.ts:4:1 \u203a Expect to have 3 options for signing up (7s) 9 passed (41s)<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30c6\u30b9\u30c8\u306f\u73fe\u5728\u3001Docker\u74b0\u5883\u3067\u6b63\u5e38\u306b\u5b9f\u884c\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u30ea\u30e2\u30fc\u30c8\u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u30b3\u30fc\u30c9\u3092\u5b89\u5168\u306b\u66f4\u65b0\u3067\u304d\u307e\u3059\u3057\u3001\u30b7\u30b9\u30c6\u30e0\u7ba1\u7406\u8005\u306f\u81ea\u52d5\u5316\u30c6\u30b9\u30c8\u3092CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u7d71\u5408\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u4f5c\u6210\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3082\u3001\u3053\u306e\u30ea\u30dd\u30b8\u30c8\u30ea\u3067\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u7d50\u8ad6<\/h2>\n<p>\u300cPlaywright\u3092\u4f7f\u7528\u3057\u3066\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u3092\u884c\u3044\u3001\u305d\u306e\u30c6\u30b9\u30c8\u3092Docker\u3067\u30c7\u30d7\u30ed\u30a4\u3057\u307e\u3057\u305f\u3002Playwright\u306b\u3064\u3044\u3066\u306f\u3001Playwright\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u300d<\/p>\n<p>Docker\u306b\u3064\u3044\u3066\u3082\u3063\u3068\u5b66\u3073\u305f\u3044\u5834\u5408\u306f\u3001Docker\u306e\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306b\u3064\u3044\u3066\u8aad\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Docker\u88fd\u54c1\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u306f\u3001Docker\u30d5\u30a1\u30a4\u30eb\u306e\u66f8\u304d\u65b9\u306b\u95a2\u3059\u308b\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3084Docker\u30d5\u30a1\u30a4\u30eb\u306e\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u30ac\u30a4\u30c9\u3082\u3042\u308a\u307e\u3059\u3002Docker\u3092\u4f7f\u7528\u3057\u305f\u4f5c\u696d\u3092\u7d9a\u3051\u308b\u305f\u3081\u306b\u306f\u3001\u4ed6\u306eDocker\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3082\u8a66\u3057\u3066\u307f\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8457\u8005\u306f\u3001\u5bc4\u4ed8\u306e\u4e00\u74b0\u3068\u3057\u3066\u300eOpen Sourcing Mental Illness\u300f\u3092\u5bc4\u4ed8\u5148\u306b\u9078\u3073\u307e\u3057\u305f\u3002 \u306f\u3058\u3081\u306b Playwright\u306f\u3001Chromium\u3001Firefox\u3001Webkit\u3092\u542b\u3080\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u30a8\u30f3 [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26,61],"class_list":["post-247","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-26","tag-61"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002 - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/ja\/blog\/playwright\u3068docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002\" \/>\n<meta property=\"og:description\" content=\"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/ja\/blog\/playwright\u3068docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-10T18:37:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T12:58:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656477dadaa94e2bdf7b81b3\/109-0.png\" \/>\n<meta name=\"author\" content=\"\u512a\u6597, \u671d\u967d\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u512a\u6597, \u671d\u967d\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"49\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/\",\"name\":\"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\"},\"datePublished\":\"2023-05-10T18:37:31+00:00\",\"dateModified\":\"2025-07-31T12:58:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/cab7534c71201607a41f395de14d7d28\"},\"description\":\"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/ja\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/cab7534c71201607a41f395de14d7d28\",\"name\":\"\u512a\u6597, \u671d\u967d\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56ecb1d20648a2ff67709eeaa7b6eddeb4d52aca0d46febc7f12bbef507187d0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56ecb1d20648a2ff67709eeaa7b6eddeb4d52aca0d46febc7f12bbef507187d0?s=96&d=mm&r=g\",\"caption\":\"\u512a\u6597, \u671d\u967d\"},\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/author\/yutoasahi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002 - Blog - Silicon Cloud","description":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/ja\/blog\/playwright\u3068docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\/","og_locale":"ja_JP","og_type":"article","og_title":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002","og_description":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","og_url":"https:\/\/www.silicloud.com\/ja\/blog\/playwright\u3068docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-10T18:37:31+00:00","article_modified_time":"2025-07-31T12:58:53+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656477dadaa94e2bdf7b81b3\/109-0.png"}],"author":"\u512a\u6597, \u671d\u967d","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"\u512a\u6597, \u671d\u967d","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"49\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/","url":"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/","name":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website"},"datePublished":"2023-05-10T18:37:31+00:00","dateModified":"2025-07-31T12:58:53+00:00","author":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/cab7534c71201607a41f395de14d7d28"},"description":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/ja\/blog\/"},{"@type":"ListItem","position":2,"name":"Playwright\u3068Docker\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website","url":"https:\/\/www.silicloud.com\/ja\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/cab7534c71201607a41f395de14d7d28","name":"\u512a\u6597, \u671d\u967d","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56ecb1d20648a2ff67709eeaa7b6eddeb4d52aca0d46febc7f12bbef507187d0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56ecb1d20648a2ff67709eeaa7b6eddeb4d52aca0d46febc7f12bbef507187d0?s=96&d=mm&r=g","caption":"\u512a\u6597, \u671d\u967d"},"url":"https:\/\/www.silicloud.com\/ja\/blog\/author\/yutoasahi\/"},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/playwright%e3%81%a8docker%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e3%82%a8%e3%83%b3%e3%83%89%e3%83%84%e3%83%bc%e3%82%a8%e3%83%b3%e3%83%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e5%ae%9f\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":38197,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions\/38197"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}