Zola
2026-02-15T00:00:00+00:00
https://playwright.itest.info/atom.xml
Playwright 测试最佳实践：Fixtures + Page Object Model 完美结合
2026-02-15T00:00:00+00:00
2026-02-15T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/advance-po-with-fixture-python-version-md/
<p>之前有分享过<a href="/blog/building-scalable-playwright-tests-with-fixtures-and-page-object-model/">typescript的版本</a>，现在分享一下如何 python用 Fixtures 优雅实现 Page Object Model设计模式。</p>
<h2 id="bei-ce-xiang-mu">被测项目</h2>
<p>还是用<a href="https://usememos.com/">memo</a>这个笔记工具，这次我们写2个用例，分别是</p>
<ul>
<li>登录</li>
<li>创建笔记</li>
</ul>
<h2 id="xiang-mu-jie-gou">项目结构</h2>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>根目录/
</span><span>├── conftest.py ← 定义fixtures的地方
</span><span>├── pages/
</span><span>│ └── login_page.py ← 定义page的地方
</span><span>│ └── home_page.py
</span><span>├── tests/
</span><span>│ └── test_xxx.py ← 用例写在这里
</span><span>└── ...
</span></code></pre>
<h2 id="pages">pages</h2>
<h3 id="login-page-zhu-ce-he-deng-lu-ye">login page(注册和登录页)</h3>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#6d6d6d;"># login_page.py
</span><span style="font-style:italic;color:#ff5e5e;">class </span><span style="text-decoration:underline;color:#8cdaff;">LoginPage</span><span>():
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#6699cc;">__init__</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page </span><span style="color:#ff5e5e;">= </span><span>page
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Username</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Password</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_up_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sign up</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sign in</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">navigate</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">sign_up</span><span>: </span><span style="color:#fbe3bf;">bool </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">False</span><span>):
</span><span> url </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">if </span><span>sign_up:
</span><span> url </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth/signup</span><span style="color:#ffffff;">"
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(url, </span><span style="font-style:italic;color:#fc9354;">wait_until</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">sign_up</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">username</span><span>: </span><span style="color:#fbe3bf;">str</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.</span><span style="color:#e9fdac;">navigate</span><span>(</span><span style="font-style:italic;color:#fc9354;">sign_up</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">True</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">fill</span><span>(username)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password.</span><span style="color:#e9fdac;">fill</span><span>(password)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_up_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">sign_in</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">username</span><span>: </span><span style="color:#fbe3bf;">str</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.</span><span style="color:#e9fdac;">navigate</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">fill</span><span>(username)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password.</span><span style="color:#e9fdac;">fill</span><span>(password)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span></code></pre>
<h3 id="home-page-chuang-jian-he-cha-kan-memode-ye-mian">home page(创建和查看memo的页面)</h3>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#6d6d6d;"># home_page.py
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">class </span><span style="text-decoration:underline;color:#8cdaff;">HomePage</span><span>():
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#6699cc;">__init__</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page </span><span style="color:#ff5e5e;">= </span><span>page
</span><span> </span><span style="color:#e9fdac;">self</span><span>.textarea </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.save_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.more_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">"</span><span>).first
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.pin_option </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Pin</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.edit_option </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Edit</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.delete_option </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.unpin_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide-bookmark</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.published_at </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">relative-time</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.smile_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-smile-plus</span><span style="color:#ffffff;">"</span><span>).first
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.delete_btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>).page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.upload </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[type="file"]</span><span style="color:#ffffff;">'</span><span>).first
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">navigate</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">wait_until</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.textarea.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">create_post</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">content</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.</span><span style="color:#e9fdac;">navigate</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.textarea.</span><span style="color:#e9fdac;">fill</span><span>(content)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.save_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">pin_post</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.more_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.pin_option.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.pin_option.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">unpin_post</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>):
</span><span> </span><span style="color:#ff5e5e;">if </span><span style="color:#e9fdac;">self</span><span>.unpin_btn.</span><span style="color:#e9fdac;">count</span><span>() </span><span style="color:#ff5e5e;">> </span><span style="color:#fdb082;">0</span><span>:
</span><span> </span><span style="color:#e9fdac;">self</span><span>.unpin_btn.first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">reaction_btn</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">reaction</span><span>):
</span><span> btn </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">get_by_text</span><span>(reaction)
</span><span> btn.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#ff5e5e;">return </span><span>btn
</span><span>
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">add_reaction</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">reaction</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.published_at.</span><span style="color:#e9fdac;">hover</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.smile_btn.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.smile_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">0.5</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.</span><span style="color:#e9fdac;">reaction_btn</span><span>(reaction).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">edit_post</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">content</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.more_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.edit_option.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.edit_option.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#e9fdac;">fill</span><span>(content)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">delete_post</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.more_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.edit_option.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.delete_option.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> </span><span style="color:#e9fdac;">self</span><span>.delete_btn.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.delete_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">upload_file</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">file_path</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.upload.</span><span style="color:#e9fdac;">set_input_files</span><span>(file_path)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.save_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span></code></pre>
<h2 id="conftest-py">conftest.py</h2>
<p>conftest.py 是 pytest 用来存放“共享 fixture、钩子函数、插件配置”的特殊文件，它能让很多测试相关的设置和准备工作在多个测试文件之间共享，而不需要重复写代码。</p>
<p>它是 pytest 中最重要、最常用的“全局/局部配置与共享机制”之一。</p>
<h3 id="conftest-py-de-wei-zhi-jue-ding-liao-ta-de-zuo-yong-fan-wei-fei-chang-zhong-yao">conftest.py 的位置决定了它的作用范围（非常重要！）</h3>
<p>位置不同，影响的测试范围完全不一样：</p>
<table><thead><tr><th>文件位置</th><th>作用范围</th><th>典型场景</th></tr></thead><tbody>
<tr><td>项目根目录下的 conftest.py</td><td><strong>全局</strong>：影响项目下所有测试</td><td>浏览器 fixture、日志、数据库连接</td></tr>
<tr><td>tests/ 目录下的 conftest.py</td><td>只影响 tests/ 目录及其子目录的所有测试</td><td>整个测试套件的通用 fixture</td></tr>
<tr><td>tests/api/ 下的 conftest.py</td><td>只影响 tests/api/ 及其子目录</td><td>只给 API 测试用的 token、mock server</td></tr>
<tr><td>tests/ui/login/ 下的 conftest.py</td><td>只影响 tests/ui/login/ 目录</td><td>登录相关的页面对象、已登录 fixture</td></tr>
</tbody></table>
<h3 id="xiao-jie-yi-ju-hua-ji-zhu-conftest-py-de-ben-zhi">小结：一句话记住 conftest.py 的本质</h3>
<p><strong>conftest.py = pytest 的“共享配置 + 公共的数据准备 + 全局钩子”文件</strong></p>
<h2 id="ce-shi-yong-li">测试用例</h2>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#6d6d6d;"># test_memo.py
</span><span style="color:#ff5e5e;">from </span><span>playwright.sync_api </span><span style="color:#ff5e5e;">import </span><span>expect
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">test_login</span><span>(</span><span style="font-style:italic;color:#fc9354;">login_page</span><span>):
</span><span> login_page.</span><span style="color:#e9fdac;">navigate</span><span>()
</span><span> login_page.</span><span style="color:#e9fdac;">sign_in</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">demo</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">demo</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># 判断登录成功之后，页面应该跳转到http://localhost:5230/
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(login_page.page).</span><span style="color:#e9fdac;">to_have_url</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">test_create_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">authenticated_page</span><span>, </span><span style="font-style:italic;color:#fc9354;">home_page</span><span>):
</span><span> before_count </span><span style="color:#ff5e5e;">= </span><span>home_page.published_at.</span><span style="color:#e9fdac;">count</span><span>()
</span><span> home_page.</span><span style="color:#e9fdac;">create_post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">hi, there</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span>
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(home_page.published_at).</span><span style="color:#e9fdac;">to_have_count</span><span>(before_count </span><span style="color:#ff5e5e;">+ </span><span style="color:#fdb082;">1</span><span>)
</span></code></pre>
<p><code>test_create_memo</code>的断言有点难理解。</p>
<p>这里的思路是先拿到创建post之前页面上的post数量，创建成功之后，页面上的post数量应该是+1的。</p>
<p>这里其实有个问题，如果页面上存量的post比较多的话，那么哪怕是再创建几个，页面上展示出来的post数量也是不会变化的，大家可以想想这是为什么。</p>
<p>解决思路其实有2个</p>
<ul>
<li>每次跑用例之前清理一下数据库，保证数据库里post小于1页，这样就没有问题了</li>
<li>用api去拿post的数量，但是有可能存在数据写进去了，但是页面上的显示不发生变化的风险</li>
</ul>
<h2 id="kuai-su-shang-shou-checklist">快速上手 checklist</h2>
<ul>
<li><input disabled="" type="checkbox"/>
创建 <code>pages/</code> 目录，放所有 Page 类</li>
<li><input disabled="" type="checkbox"/>
创建 <code>conftest.py</code> 文件，定义 fixture</li>
<li><input disabled="" type="checkbox"/>
把常用前置操作（登录、导航）尽量封装成 fixture</li>
<li><input disabled="" type="checkbox"/>
Page 类里多放组合方法（login、addToCart、checkout 等）</li>
</ul>
<p>祝你写出优雅、可维护的 Playwright 测试！🚀</p>
Playwright 测试进阶：用 Fixtures 优雅实现 Page Object Model
2026-02-14T00:00:00+00:00
2026-02-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/building-scalable-playwright-tests-with-fixtures-and-page-object-model/
<p>在 Playwright 项目中，传统 Page Object Model 很容易导致代码重复和维护困难。</p>
<p>本文手把手教你如何利用 Playwright 的自定义 Fixtures，把 Page 对象自动注入测试，彻底消除每次使用page前都要手动去 <code>new</code> 的烦恼。</p>
<p>让测试代码更简洁、可复用、可扩展。</p>
<p>跟着做完，你的自动化测试框架将提升一个档次！特别适合用在大型的项目里面。</p>
<p>预计耗时：20–40 分钟</p>
<h3 id="1-li-jie-liang-chong-chang-jian-xie-fa-ji-qi-wen-ti">1. 理解两种常见写法及其问题</h3>
<p><strong>传统 POM 写法</strong>（大家最开始都会这么写）</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#6d6d6d;">// pages/LoginPage.ts
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>LoginPage {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="color:#ff5e5e;">private </span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">goto</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">login</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">username</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#login</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#6d6d6d;">// tests/login.spec.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">LoginPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/LoginPage</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">应该能正常登录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>); </span><span style="color:#6d6d6d;">// 每份测试都要 new 一次
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testuser</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/home</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p><strong>痛点</strong>（项目大了之后特别明显）：</p>
<ul>
<li>每份测试都要写 <code>new XXXPage(page)</code></li>
<li>改一次构造函数 → 所有测试文件都要改</li>
<li>想做「已登录状态」的前置条件 → 每个测试重复写登录代码</li>
<li>测试文件看起来很“重”</li>
</ul>
<h3 id="2-playwright-tui-jian-de-xian-dai-xie-fa-ba-page-object-zuo-cheng-fixture">2. Playwright 推荐的现代写法：把 Page Object 做成 Fixture</h3>
<p>核心思路：<br />
<strong>不要在测试里手动 new Page Object，而是让 fixture 帮你创建并注入</strong></p>
<h4 id="bu-zou-1-bao-chi-page-object-lei-bu-bian-huo-shao-zuo-diao-zheng">步骤 1 – 保持 Page Object 类不变（或稍作调整）</h4>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#6d6d6d;">// pages/LoginPage.ts
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>LoginPage {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ffffff;">) </span><span>{} </span><span style="color:#6d6d6d;">// 保持 public 方便 fixture 里访问 page.url() 等
</span><span>
</span><span> </span><span style="color:#e9fdac;">locators </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">"</span><span>,
</span><span> loginBtn: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#login</span><span style="color:#ffffff;">"</span><span>,
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">goto</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">fillCredentials</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">locators</span><span>.</span><span style="color:#e9fdac;">username</span><span>, </span><span style="color:#e9fdac;">username</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">locators</span><span>.</span><span style="color:#e9fdac;">password</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">submit</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">locators</span><span>.</span><span style="color:#e9fdac;">loginBtn</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 常用组合动作（可选）
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">login</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#8cdaff;">fillCredentials</span><span>(</span><span style="color:#e9fdac;">username</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#6699cc;">submit</span><span>();
</span><span> }
</span><span>}
</span></code></pre>
<h4 id="bu-zou-2-chuang-jian-zi-ding-yi-fixture-zui-he-xin-de-yi-bu">步骤 2 – 创建自定义 fixture（最核心的一步）</h4>
<p>新建文件：<code>fixtures/index.ts</code>（或 <code>utils/fixtures.ts</code>）</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#6d6d6d;">// fixtures/index.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">LoginPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/LoginPage</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 可以继续扩展其他 page 对象
</span><span style="font-style:italic;color:#fbdfb5;">type </span><span>MyFixtures </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#e9fdac;">loginPage</span><span style="color:#ff5e5e;">: </span><span>LoginPage;
</span><span> </span><span style="color:#6d6d6d;">// inventoryPage: InventoryPage;
</span><span> </span><span style="color:#6d6d6d;">// cartPage: CartPage;
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span><MyFixtures>({
</span><span> </span><span style="color:#6d6d6d;">// 普通注入（页面刚打开的状态）
</span><span> </span><span style="color:#8cdaff;">loginPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">loginPage</span><span>); </span><span style="color:#6d6d6d;">// 交给测试使用，用完自动清理（如果有 teardown 逻辑）
</span><span> },
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 进阶：自动完成登录的 fixture（非常实用）
</span><span> </span><span style="color:#6d6d6d;">// authenticatedLoginPage: async ({ page }, use) => {
</span><span> </span><span style="color:#6d6d6d;">// const loginPage = new LoginPage(page);
</span><span> </span><span style="color:#6d6d6d;">// await loginPage.login('standard_user', 'secret_sauce');
</span><span> </span><span style="color:#6d6d6d;">// await use(loginPage);
</span><span> </span><span style="color:#6d6d6d;">// },
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span></code></pre>
<h4 id="bu-zou-3-zai-ce-shi-wen-jian-zhong-shi-yong-chao-ji-gan-jing-de-xie-fa">步骤 3 – 在测试文件中使用超级干净的写法</h4>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#6d6d6d;">// tests/login.spec.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../fixtures</span><span style="color:#ffffff;">"</span><span>; </span><span style="color:#6d6d6d;">// 注意路径
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">普通登录流程验证</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">loginPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">fillCredentials</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testuser</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#6699cc;">submit</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">home</span><span style="color:#ff5e5e;">$</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 更推荐的写法：把组合动作放在 Page 类里
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用封装的 login 方法</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">loginPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testuser</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/home</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<h3 id="3-jin-jie-yong-fa-tui-jian-qiang-lie-jian-yi-zhang-wo">3. 进阶用法推荐（强烈建议掌握）</h3>
<h4 id="3-1-zi-dong-deng-lu-fixture-zui-chang-yong-chang-jing">3.1 自动登录 fixture（最常用场景）</h4>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#6d6d6d;">// fixtures/index.ts 继续扩展
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span><MyFixtures>({
</span><span> </span><span style="color:#8cdaff;">loginPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{ </span><span style="color:#ff5e5e;">... </span><span>},
</span><span>
</span><span> </span><span style="color:#8cdaff;">loggedInPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">loginPage </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">standard_user</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 可选：等待页面稳定
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">inventory</span><span style="color:#ffffff;">/</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">page</span><span>); </span><span style="color:#6d6d6d;">// 这里注入 page，也可以注入 loginPage
</span><span> },
</span><span>});
</span></code></pre>
<p>测试里直接用已登录状态：</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">已登录用户能看到商品列表</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">loggedInPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loggedInPage</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.inventory_list</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<h4 id="3-2-duo-ge-page-objects-yi-qi-shi-yong">3.2 多个 Page Objects 一起使用</h4>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="font-style:italic;color:#fbdfb5;">type </span><span>MyFixtures </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#e9fdac;">loginPage</span><span style="color:#ff5e5e;">: </span><span>LoginPage;
</span><span> </span><span style="color:#e9fdac;">inventoryPage</span><span style="color:#ff5e5e;">: </span><span>InventoryPage;
</span><span> </span><span style="color:#e9fdac;">cartPage</span><span style="color:#ff5e5e;">: </span><span>CartPage;
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span><MyFixtures>({
</span><span> </span><span style="color:#8cdaff;">loginPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{ </span><span style="color:#ff5e5e;">... </span><span>},
</span><span> </span><span style="color:#8cdaff;">inventoryPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#ff5e5e;">new </span><span>InventoryPage(</span><span style="color:#e9fdac;">page</span><span>));
</span><span> },
</span><span> </span><span style="color:#6d6d6d;">// 可以依赖其他 fixture
</span><span> </span><span style="color:#8cdaff;">cartPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">inventoryPage </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 假设从 inventory 页加商品后进入 cart
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">inventoryPage</span><span>.</span><span style="color:#8cdaff;">addFirstItemToCart</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">inventoryPage</span><span>.</span><span style="color:#8cdaff;">gotoCart</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#ff5e5e;">new </span><span>CartPage(</span><span style="color:#e9fdac;">inventoryPage</span><span>.</span><span style="color:#e9fdac;">page</span><span>));
</span><span> },
</span><span>});
</span></code></pre>
<h3 id="4-zong-jie-wei-shen-me-tui-jian-zhe-chong-xie-fa">4. 总结：为什么推荐这种写法？</h3>
<table><thead><tr><th>技能点</th><th>传统 new Page() 写法</th><th>使用 Fixture + POM 写法</th></tr></thead><tbody>
<tr><td>重复 new</td><td>每个测试都要写</td><td>只写一次（在 fixture 里）</td></tr>
<tr><td>构造函数修改</td><td>所有测试文件改</td><td>只改 fixture 文件</td></tr>
<tr><td>前置登录</td><td>每个测试重复写登录代码</td><td>做成 loggedInPage fixture，一行搞定</td></tr>
<tr><td>可读性</td><td>中等</td><td>很高（测试里只看到业务动作）</td></tr>
<tr><td>扩展性</td><td>差（文件越来越多越乱）</td><td>很好（fixtures 集中管理）</td></tr>
<tr><td>执行速度</td><td>每次都重新创建对象</td><td>Playwright 缓存复用（同 worker 内）</td></tr>
</tbody></table>
<h3 id="5-kuai-su-shang-shou-checklist">5. 快速上手 checklist</h3>
<ul>
<li><input disabled="" type="checkbox"/>
创建 <code>pages/</code> 目录，放所有 Page 类</li>
<li><input disabled="" type="checkbox"/>
创建 <code>fixtures/index.ts</code>，用 <code>test.extend()</code> 定义 fixture</li>
<li><input disabled="" type="checkbox"/>
测试文件里 <code>import { test, expect } from '../fixtures'</code></li>
<li><input disabled="" type="checkbox"/>
把常用前置操作（登录、导航）尽量做成 fixture</li>
<li><input disabled="" type="checkbox"/>
Page 类里多放组合方法（login、addToCart、checkout 等）</li>
</ul>
<p>祝你写出优雅、可维护的 Playwright 测试！🚀</p>
使用 playwright-smart-reporter 打造智能、带AI分析的测试报告
2026-02-14T00:00:00+00:00
2026-02-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-smart-reporter/
<p>playwright-smart-reporter 是一个专为 Playwright 测试框架打造的智能 HTML 报告工具。</p>
<p>它比 Playwright 自带的 HTML reporter 更现代化、更智能，主要目标是帮助团队更快定位问题、减少调试时间、提升测试稳定性。</p>
<p>仓库地址（持续更新）：<br />
<a href="https://github.com/qa-gary-parker/playwright-smart-reporter">https://github.com/qa-gary-parker/playwright-smart-reporter</a></p>
<p>项目支持python和javascript，我们先拿js版本来体验一下。</p>
<h4 id="di-yi-bu-an-zhuang">第一步：安装</h4>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># Node.js 项目（最常用方式）
</span><span style="color:#e9fdac;">npm</span><span> install</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> playwright-smart-reporter
</span><span>
</span><span style="color:#6d6d6d;"># 如果你使用 Python + pytest-playwright
</span><span style="color:#e9fdac;">pip</span><span> install playwright-smart-reporter-python
</span><span style="color:#6d6d6d;"># （Python 版文档请看仓库 python/README.md，本教程主要讲 JS/TS 版）
</span></code></pre>
<h4 id="di-er-bu-zui-jian-pei-zhi-3fen-zhong-shang-shou">第二步：最简配置（3分钟上手）</h4>
<p>在 <code>playwright.config.ts</code> / <code>.js</code> 中添加 reporter：</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// ... 其他配置 ...
</span><span>
</span><span> reporter: [
</span><span> [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-smart-reporter</span><span style="color:#ffffff;">"</span><span>,
</span><span> {
</span><span> outputFile: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-report/smart-report.html</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#6d6d6d;">// 建议放在报告目录
</span><span> historyFile: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-report/test-history.json</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#6d6d6d;">// 很重要！用于历史趋势、flaky检测
</span><span> maxHistoryRuns: </span><span style="color:#fdb082;">12</span><span>, </span><span style="color:#6d6d6d;">// 保留最近12次运行的历史
</span><span> },
</span><span> ],
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 你可以同时保留官方的html reporter（可选）
</span><span> [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>, { outputFolder: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-report</span><span style="color:#ffffff;">"</span><span>, open: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">never</span><span style="color:#ffffff;">" </span><span>}],
</span><span> ],
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 强烈建议开启 trace（很多高级功能依赖它）
</span><span> use: {
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">retain-on-failure</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#6d6d6d;">// 或 'on' 如果你想每个测试都保留
</span><span> </span><span style="color:#6d6d6d;">// screenshot: 'only-on-failure', // 配合使用效果更好
</span><span> },
</span><span>});
</span></code></pre>
<p>运行测试：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p>结束后打开生成的报告：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright show-report playwright-report/smart-report.html
</span><span style="color:#6d6d6d;"># 或者直接浏览器打开文件
</span></code></pre>
<p>你应该能看到一个带有侧边栏、仪表盘、健康评分、失败聚类、趋势图的现代报告界面。</p>
<h4 id="di-san-bu-tui-jian-de-shi-yong-pei-zhi-ri-chang-tui-jian">第三步：推荐的实用配置（日常推荐）</h4>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span>reporter: [
</span><span> [</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">playwright-smart-reporter</span><span style="color:#ffffff;">'</span><span>, {
</span><span> </span><span style="color:#6d6d6d;">// 核心输出
</span><span> outputFile: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">playwright-report/smart-report.html</span><span style="color:#ffffff;">'</span><span>,
</span><span> historyFile: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">playwright-report/history.json</span><span style="color:#ffffff;">'</span><span>,
</span><span> maxHistoryRuns: </span><span style="color:#fdb082;">15</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// AI 失败分析（强烈推荐）
</span><span> enableAIRecommendations: </span><span style="color:#ff8942;">true</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 稳定性 & 性能相关
</span><span> enableStabilityScore: </span><span style="color:#ff8942;">true</span><span>,
</span><span> enableRetryAnalysis: </span><span style="color:#ff8942;">true</span><span>,
</span><span> performanceThreshold: </span><span style="color:#fdb082;">0.25</span><span>, </span><span style="color:#6d6d6d;">// 比历史平均慢25%报警
</span><span> enableFailureClustering: </span><span style="color:#ff8942;">true</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 界面与体验
</span><span> filterPwApiSteps: </span><span style="color:#ff8942;">true</span><span>, </span><span style="color:#6d6d6d;">// 隐藏大量 page.click() 等底层步骤，只看 test.step()
</span><span> enableTraceViewer: </span><span style="color:#ff8942;">true</span><span>,
</span><span> enableNetworkLogs: </span><span style="color:#ff8942;">true</span><span>,
</span><span> enableGalleryView: </span><span style="color:#ff8942;">true</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// CI 友好
</span><span> runId: process.env.</span><span style="color:#e9fdac;">GITHUB_RUN_ID </span><span style="color:#ff5e5e;">|| </span><span>process.env.</span><span style="color:#e9fdac;">CI_PIPELINE_ID </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">local</span><span style="color:#ffffff;">'</span><span>,
</span><span> projectName: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">e2e-ui</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#6d6d6d;">// 多项目时建议区分
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 通知（可选）
</span><span> </span><span style="color:#6d6d6d;">// slackWebhook: process.env.SLACK_WEBHOOK_URL,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 阈值微调（可选，根据团队实际情况调整）
</span><span> thresholds: {
</span><span> flakinessStable: </span><span style="color:#fdb082;">0.08</span><span>,
</span><span> flakinessUnstable: </span><span style="color:#fdb082;">0.25</span><span>,
</span><span> performanceRegression: </span><span style="color:#fdb082;">0.20</span><span>,
</span><span> stabilityWeightFlakiness: </span><span style="color:#fdb082;">0.40</span><span>,
</span><span> stabilityWeightPerformance: </span><span style="color:#fdb082;">0.30</span><span>,
</span><span> stabilityWeightReliability: </span><span style="color:#fdb082;">0.30</span><span>,
</span><span> },
</span><span> }],
</span><span>],
</span></code></pre>
<h4 id="di-si-bu-kai-qi-ai-shi-bai-fen-xi-zui-you-jia-zhi-de-gong-neng-zhi-yi">第四步：开启 AI 失败分析（最有价值的功能之一）</h4>
<p>设置以下任一环境变量（优先级：Claude > OpenAI > Gemini）</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># 推荐 Claude（分析质量较好）
</span><span style="color:#ff5e5e;">export </span><span style="color:#e9fdac;">ANTHROPIC_API_KEY</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">sk-ant-xxx...
</span><span>
</span><span style="color:#6d6d6d;"># 或者 OpenAI
</span><span style="color:#ff5e5e;">export </span><span style="color:#e9fdac;">OPENAI_API_KEY</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">sk-xxx...
</span><span>
</span><span style="color:#6d6d6d;"># 或者 Google Gemini
</span><span style="color:#ff5e5e;">export </span><span style="color:#e9fdac;">GEMINI_API_KEY</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">xxx...
</span></code></pre>
<p>重新跑测试 → 失败的case下方会出现 AI 给出的可能原因 + 修复建议（批量分析，适合大测试套件）。</p>
<h4 id="di-wu-bu-ci-ji-cheng-rang-li-shi-shu-ju-chi-xu-ji-lei">第五步：CI 集成（让历史数据持续积累）</h4>
<p><strong>GitHub Actions 示例</strong>（最常见场景）</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache history file
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report/history.json
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">test-history-${{ github.ref }}
</span><span> </span><span style="color:#ff5e5e;">restore-keys</span><span>: </span><span style="color:#fbe3bf;">test-history-
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test --reporter=playwright-smart-reporter
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Save history cache (always)
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache/save@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report/history.json
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">test-history-${{ github.ref }}-${{ github.run_id }}
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload smart report
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">smart-test-report
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report/smart-report.html
</span></code></pre>
<p>其他 CI（GitLab、CircleCI、Azure 等）也有类似缓存逻辑，详见官方文档 CI Integration 部分。</p>
<h4 id="di-liu-bu-chang-yong-gao-ji-ji-qiao-su-cha">第六步：常用高级技巧速查</h4>
<table><thead><tr><th>目标</th><th>配置项 / 命令</th><th>备注</th></tr></thead><tbody>
<tr><td>隐藏底层 pw:api 步骤</td><td><code>filterPwApiSteps: true</code></td><td>报告更干净</td></tr>
<tr><td>只看最近10次历史的趋势</td><td><code>maxHistoryRuns: 10</code></td><td>默认10</td></tr>
<tr><td>打开本地带 trace 的报告服务器</td><td><code>npx playwright-smart-reporter-serve smart-report.html</code></td><td>解决 file:// 跨域问题</td></tr>
<tr><td>合并分片运行的历史</td><td><code>npx playwright-smart-reporter-merge-history ...</code></td><td>CI 分片后使用</td></tr>
<tr><td>严格 CSP 环境（公司内网常见）</td><td><code>cspSafe: true</code></td><td>用文件引用而非 base64</td></tr>
<tr><td>查看单个 trace 文件</td><td><code>npx playwright-smart-reporter-view-trace traces/xxx.zip</code></td><td>调试用</td></tr>
<tr><td>性能回归报警阈值调低</td><td><code>performanceThreshold: 0.15</code></td><td>更敏感</td></tr>
<tr><td>只关心 UI 项目历史</td><td><code>projectName: "ui-tests"</code></td><td>避免 api/ui 混在一起统计</td></tr>
</tbody></table>
<h4 id="chang-jian-wen-ti-kuai-su-ding-wei">常见问题快速定位</h4>
<ul>
<li><strong>没有历史数据 / 趋势图为空</strong> → 检查 <code>historyFile</code> 是否正确，CI 是否缓存成功</li>
<li><strong>没有 AI 建议</strong> → 检查是否设置了 API Key，且失败用例存在</li>
<li><strong>报告文件超大、浏览器卡</strong> → 试试 <code>cspSafe: true</code> 或减小 <code>maxHistoryRuns</code></li>
<li><strong>flaky 判断跟官方不一样</strong> → 正常，Smart Reporter 是基于<strong>多轮历史</strong>而非单次重试</li>
<li><strong>网络请求没显示</strong> → 确认 <code>trace: 'retain-on-failure'</code> 或 <code>'on'</code> 已开启</li>
</ul>
<p><img src="https://playwright.itest.info/blog/playwright-smart-reporter/2026-02-14-19-33-57.png" alt="" /></p>
<h4 id="zong-jie-jian-yi-de-qi-bu-lu-jing">总结 — 建议的起步路径</h4>
<ol>
<li>先用最简配置跑一次，感受现代仪表盘和健康评分</li>
<li>加上 AI Key，体验自动失败分析</li>
<li>把 <code>history.json</code> 纳入 CI 缓存 → 几天后趋势图和 flaky 检测开始生效</li>
<li>根据团队痛点逐步打开 network logs、gallery、step timeline 等功能</li>
</ol>
<p>Happy testing! 🚀</p>
新的Agent Skills! Playwright CLI 初体验
2026-02-01T00:00:00+00:00
2026-02-01T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/try-playwright-cli/
<p>Playwright最新推出了<a href="https://github.com/microsoft/playwright-cli">playwright cli</a>工具和相应的skills，可以适配大部分的AI coding agent。</p>
<p>这是1个官方提供的轻量级命令行工具，主要用来在终端直接控制浏览器执行自动化操作，而不需要自己写任何一行代码。</p>
<p>简单来说，它就是把 Playwright 最常用的几十个操作封装成了命令行指令，让AI agent可以用非常简短的命令来操控浏览器。</p>
<p>经过简单的试用，我发现时代真的变了，现在让agent干活基本就是几行像敲命令一样的短句，token省一大堆，调试也不用自己亲自动手。</p>
<p>估计80%简单的日常网页任务都可以直接搞定。</p>
<p>下面来看一下Playwright cli的真正实力吧。</p>
<h2 id="shi-pin-jiao-cheng">视频教程</h2>
<h3 id="bzhan">B站</h3>
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=115994936743793&bvid=BV11t64BJEDZ&cid=35751857376&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
<h3 id="youtube">YouTube</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vska068YCs4?si=n3jgUZ36FEz253QZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h2 id="qian-zhi-tiao-jian">前置条件</h2>
<p>我使用的是<a href="https://github.com/anthropics/claude-code">claude code</a>和 <a href="https://docs.bigmodel.cn/cn/guide/models/text/glm-4.7">GLM4.7</a>模型。</p>
<h2 id="an-zhuang-plawyright-cli">安装plawyright cli</h2>
<p>plawyright cli的安装非常方便，直接用npm就好了。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>npm install -g @playwright/cli@latest
</span><span>playwright-cli --help
</span></code></pre>
<h2 id="an-zhuang-skills">安装skills</h2>
<p>在cluade code里，我们可以直接使用plgin来安装</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>/plugin marketplace add microsoft/playwright-cli
</span><span>/plugin install playwright-cli
</span></code></pre>
<h2 id="shi-yong-playwright-clilai-ce-shi-memo">使用playwright cli来测试memo</h2>
<p>我们的测试对象是memo。</p>
<p>这是1个简单的笔记工具，之前的视频里有介绍过，这里就不展开了，就把它看成是一个自建的微博就好了。</p>
<p><img src="https://playwright.itest.info/blog/try-playwright-cli/2026-02-01-15-58-38.png" alt="" /></p>
<h2 id="ju-ti-guo-cheng">具体过程</h2>
<p>在命令行里运行<code>claude</code>命令，然后输入下面的提示词。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>使用playwright skills 完成 http://localhost:5230/ 的自动化操作。
</span><span>
</span><span>这是memo平台，一个笔记系统。
</span><span>
</span><span>首先进行注册流程的自动化操作。
</span><span>
</span><span>对所有成功和失败的场景进行截图
</span><span>
</span><span>截图的文件放在当前目录，方便我查看。
</span><span>
</span><span>另外用中文进行输出。
</span></code></pre>
<p>运行后claude会自己去读取playwright cli给的skill信息，属于一边运行一边进化了。</p>
<p>我本来是想让claude code完成一个简单的注册操作的，而不是写测试用例。</p>
<p>因为用例写起来场景相对比较多，会比较费token，呃，不对，会比较难一点。</p>
<p>结果claude不忘初心，毕竟playwright是用来测试的，直接给我生成了一连串的用例，让我大开眼界。</p>
<p>接着就是自动生成代码的传统艺能了。</p>
<p>经过了一系列紧张的测试，claude生成了测试报告，并且给出了一些测试发现。</p>
<p>我没去仔细验证啊，不过一眼看上去好像还挺靠谱的。</p>
<p>相当惊艳的探索性测试结论。</p>
<p>因为playwright cli默认是以无头的方式后台运行的，所以需要把测试的结果截图保存一下。</p>
<p>验证一下截图，看上去也没啥问题。</p>
<p>playwright cli的命令是可以重放的，所以我让ai直接把用到的命令都放到1个shell脚本里。这样下一次再进行测试的时候直接执行shell脚本就可以了，高效且准确，还能省token，获得稳定的结果。</p>
<p>ai不仅照做，还给了一些注释和命令行的输出，又一次超出预期了。</p>
<p><img src="https://playwright.itest.info/blog/try-playwright-cli/2026-02-01-15-59-51.png" alt="" /></p>
<p>接着再让ai生成readme文件，方便我们人类和ai以后进行查看和理解。</p>
<p><img src="https://playwright.itest.info/blog/try-playwright-cli/2026-02-01-16-00-26.png" alt="" /></p>
<p>最后再增加输出html格式报告的功能，增强项目的可视化能力。</p>
<p>手动运行一下生成的shell脚本，执行的很顺利，没有问题，最后打开报告。</p>
<p>这个报告的样式还行，比较清爽，不算惊艳，中规中矩吧。</p>
<p><img src="https://playwright.itest.info/blog/try-playwright-cli/2026-02-01-15-59-17.png" alt="" /></p>
<h2 id="zong-jie">总结</h2>
<p>一句话总结：claude code + glm4.7 + playwright cli真的非常强，让人印象相当深刻。</p>
<p>2026年了，用自然语言去编写自动化测试用例这个目标看来真的已经实现了。</p>
<p>当然，这仅限于简单的场景，在复杂场景下的表现我没有测试，所以大家理性看待就好。</p>
playwright 2026 实操教程
2026-01-31T00:00:00+00:00
2026-01-31T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-tutorial-2026/
<p>2026年初，浏览器自动化基本上都是AI工具帮我们代劳了。</p>
<p>Selenium 系方案在面对现代网站的指纹检测、行为分析、WAF 时越来越吃力，而 <strong>Playwright</strong> 凭借原生多内核支持、极致 API 友好度、社区活跃，已经稳坐头把交椅。</p>
<p>今天我们就反其道而行之，从零开始，手写一套<strong>针对真实应用的自动化流程</strong>。</p>
<p>我们的测试对象是开源自托管笔记服务 <strong>Memos</strong>（https://github.com/usememos/memos）。</p>
<h2 id="bzhan-shi-pin">B站视频</h2>
<iframe width="560" height="315" src="//player.bilibili.com/player.html?isOutside=true&aid=115977303887884&bvid=BV1L66FB4EiV&cid=35683306523&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
<h2 id="youtubeshi-pin">YouTube视频</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dorzYojypAA?si=3a_YGIFF72O2r_vV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h2 id="wei-shen-me-xuan-memos-zuo-demo">为什么选 Memos 做 demo？</h2>
<ul>
<li>到2026年1月，它已经有 <strong>56k+ stars</strong>，社区非常活跃（最新稳定版 v0.25.3，2025年11月发布）</li>
<li>极简、隐私优先、自托管、无遥测、无广告、MIT 开源</li>
<li>部署简单（Docker 一行搞定），界面现代、响应式、支持手机</li>
<li>有完备的 <strong>REST API</strong>，但我们这次主要用 Playwright 走<strong>浏览器端</strong>操作，模拟真人用户行为（后续可对比 API 方式）</li>
<li>功能覆盖典型笔记场景：登录、写 memo、加标签、@提及、搜索、公开/私有切换、附件上传等，非常适合拿来练手和展示 Playwright 的各种能力</li>
</ul>
<h3 id="memos-he-xin-gong-neng-kuai-su-guo-yi-bian-wo-men-jiang-zi-dong-hua-qi-zhong-de-yi-xie-cao-zuo">Memos 核心功能快速过一遍（我们将自动化其中的一些操作）</h3>
<ul>
<li>原子化短笔记（memo）：每条像数字便签，支持 Markdown（代码、表格、任务列表、链接预览）</li>
<li>标签（#work #idea）、@提及、内部链接，方便知识联网</li>
<li>可见性控制：公开 / 仅自己 / 保护（密码）</li>
<li>搜索 + 标签过滤 + 日历视图</li>
<li>附件上传（图片、文件）</li>
<li>归档、置顶、删除、恢复</li>
<li>暗黑模式 + 移动端友好</li>
<li>自托管后数据完全本地掌控（SQLite/MySQL/PostgreSQL）</li>
</ul>
<h2 id="an-zhuang-memo">安装memo</h2>
<p><strong>快速自建一个 Memos 测试环境</strong>（推荐 Docker，5 分钟内搞定）：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">docker</span><span> run</span><span style="font-style:italic;color:#fc9354;"> -d </span><span>\
</span><span style="font-style:italic;color:#fc9354;"> --name</span><span> memos-demo \
</span><span style="font-style:italic;color:#fc9354;"> -p</span><span> 5230:5230 \
</span><span style="font-style:italic;color:#fc9354;"> -v </span><span style="color:#e9fdac;">~</span><span>/memos-data:/var/opt/memos \
</span><span style="font-style:italic;color:#fc9354;"> --restart</span><span> unless-stopped \
</span><span> neosmemo/memos:stable
</span></code></pre>
<p>启动后访问 <code>http://localhost:5230</code>，注册第一个账号，就能得到一个干净的实例。我们后续所有自动化代码都针对这个本地 Memos 来写。</p>
<h2 id="an-zhuang-playwright-python-ban-2026nian-tui-jian-fang-shi">安装 Playwright（Python 版，2026年推荐方式）</h2>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># 1. 升级 pip（规避很多隐蔽问题）
</span><span style="color:#e9fdac;">pip</span><span> install</span><span style="font-style:italic;color:#fc9354;"> --upgrade</span><span> pip
</span><span>
</span><span style="color:#6d6d6d;"># 2. 安装核心 + pytest 插件（写测试用很方便）
</span><span style="color:#e9fdac;">pip</span><span> install playwright pytest-playwright
</span><span>
</span><span style="color:#6d6d6d;"># 3. 下载浏览器（约 300–500MB，建议开代理/科学网络）
</span><span style="color:#e9fdac;">playwright</span><span> install
</span><span>
</span><span style="color:#6d6d6d;"># 省空间只装 chromium：
</span><span style="color:#6d6d6d;"># playwright install chromium
</span></code></pre>
<p>快速验证安装成功：</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#ff5e5e;">from </span><span>playwright.sync_api </span><span style="color:#ff5e5e;">import </span><span>sync_playwright
</span><span>
</span><span style="color:#ff5e5e;">with </span><span style="color:#e9fdac;">sync_playwright</span><span>() </span><span style="color:#ff5e5e;">as </span><span>p:
</span><span> browser </span><span style="color:#ff5e5e;">= </span><span>p.chromium.</span><span style="color:#e9fdac;">launch</span><span>(</span><span style="font-style:italic;color:#fc9354;">headless</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">False</span><span>)
</span><span> page </span><span style="color:#ff5e5e;">= </span><span>browser.</span><span style="color:#e9fdac;">new_page</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">"</span><span>) </span><span style="color:#6d6d6d;"># 改成你的 Memos 地址
</span><span> </span><span style="color:#6699cc;">print</span><span>(page.</span><span style="color:#e9fdac;">title</span><span>()) </span><span style="color:#6d6d6d;"># 应该看到 "Memos" 或类似标题
</span><span> browser.</span><span style="color:#e9fdac;">close</span><span>()
</span></code></pre>
<p>浏览器弹出并能访问本地 Memos → 环境就绪。</p>
<h2 id="deng-lu-yu-zhu-ce">登录与注册</h2>
<p>注册和登录用到了几乎相同的元素，所以我们直接用Page Object模式来实现。</p>
<h3 id="jie-mian">界面</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-15-53-08.png" alt="" /></p>
<h3 id="html">html</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-15-53-58.png" alt="" /></p>
<h3 id="shi-xian-dai-ma">实现代码</h3>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#ff5e5e;">import </span><span>re
</span><span style="color:#ff5e5e;">from </span><span>playwright.sync_api </span><span style="color:#ff5e5e;">import </span><span>Playwright, sync_playwright, expect
</span><span style="color:#ff5e5e;">import </span><span>time
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">class </span><span style="text-decoration:underline;color:#8cdaff;">AuthPage</span><span>():
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#6699cc;">__init__</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page </span><span style="color:#ff5e5e;">= </span><span>page
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Username</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Password</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_up_btn </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sign up</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sign in</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">login</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">username</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth/</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">fill</span><span>(username)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password.</span><span style="color:#e9fdac;">fill</span><span>(password)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">signup</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">username</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth/signup</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">fill</span><span>(username)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password.</span><span style="color:#e9fdac;">fill</span><span>(password)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_up_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">run</span><span>(</span><span style="font-style:italic;color:#fc9354;">playwright</span><span>: Playwright) -> </span><span style="color:#ff8942;">None</span><span>:
</span><span> browser </span><span style="color:#ff5e5e;">= </span><span>playwright.chromium.</span><span style="color:#e9fdac;">launch</span><span>(</span><span style="font-style:italic;color:#fc9354;">headless</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">False</span><span>)
</span><span> context </span><span style="color:#ff5e5e;">= </span><span>browser.</span><span style="color:#e9fdac;">new_context</span><span>()
</span><span> page </span><span style="color:#ff5e5e;">= </span><span>context.</span><span style="color:#e9fdac;">new_page</span><span>()
</span><span>
</span><span> username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">sample</span><span style="color:#ffffff;">"
</span><span> password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">demo</span><span style="color:#ffffff;">"
</span><span>
</span><span> auth_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">AuthPage</span><span>(page)
</span><span> auth_page.</span><span style="color:#e9fdac;">signup</span><span>(username, password)
</span><span> </span><span style="color:#6d6d6d;"># auth_page.login(username, password)
</span><span>
</span><span>
</span><span> </span><span style="color:#6699cc;">input</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Press Enter...</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># ---------------------
</span><span> context.</span><span style="color:#e9fdac;">close</span><span>()
</span><span> browser.</span><span style="color:#e9fdac;">close</span><span>()
</span><span>
</span><span>
</span><span style="color:#ff5e5e;">with </span><span style="color:#e9fdac;">sync_playwright</span><span>() </span><span style="color:#ff5e5e;">as </span><span>playwright:
</span><span> </span><span style="color:#e9fdac;">run</span><span>(playwright)
</span><span>
</span></code></pre>
<h3 id="mian-deng-lu">免登录</h3>
<p>免登录的原理是在浏览器里设置一个cookie，下面是示例代码，依然是po模式。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">login_with_session</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">session</span><span>):
</span><span> </span><span style="color:#6699cc;">print</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">login....</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">wait_until</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.context.</span><span style="color:#e9fdac;">add_cookies</span><span>([
</span><span> {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">name</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">user_session</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">value</span><span style="color:#ffffff;">"</span><span>: session,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">url</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">" </span><span style="color:#6d6d6d;"># 必须与页面同源
</span><span> }
</span><span> ])
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">wait_until</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>)
</span></code></pre>
<p>调用方式如下。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">run</span><span>(</span><span style="font-style:italic;color:#fc9354;">playwright</span><span>: Playwright) -> </span><span style="color:#ff8942;">None</span><span>:
</span><span> browser </span><span style="color:#ff5e5e;">= </span><span>playwright.chromium.</span><span style="color:#e9fdac;">launch</span><span>(</span><span style="font-style:italic;color:#fc9354;">headless</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">False</span><span>)
</span><span> context </span><span style="color:#ff5e5e;">= </span><span>browser.</span><span style="color:#e9fdac;">new_context</span><span>()
</span><span> page </span><span style="color:#ff5e5e;">= </span><span>context.</span><span style="color:#e9fdac;">new_page</span><span>()
</span><span>
</span><span> username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">sample</span><span style="color:#ffffff;">"
</span><span> password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">demo</span><span style="color:#ffffff;">"
</span><span>
</span><span> auth_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">AuthPage</span><span>(page)
</span><span> auth_page.</span><span style="color:#e9fdac;">login_with_session</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">在浏览器的Application -> Cookies里面能找到</span><span style="color:#ffffff;">'</span><span>)
</span><span>
</span><span>
</span><span> </span><span style="color:#6699cc;">input</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Press Enter...</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># ---------------------
</span><span> context.</span><span style="color:#e9fdac;">close</span><span>()
</span><span> browser.</span><span style="color:#e9fdac;">close</span><span>()
</span><span>
</span><span>
</span><span style="color:#ff5e5e;">with </span><span style="color:#e9fdac;">sync_playwright</span><span>() </span><span style="color:#ff5e5e;">as </span><span>playwright:
</span><span> </span><span style="color:#e9fdac;">run</span><span>(playwright)
</span><span>
</span></code></pre>
<h2 id="chuang-jian-memo">创建memo</h2>
<h3 id="jie-mian-1">界面</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-16-01-10.png" alt="" /></p>
<p>代码如下。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">create_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">content</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> </span><span style="color:#6d6d6d;"># create memo
</span><span> page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">"</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">fill</span><span>(content)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span></code></pre>
<p>这里要注意的是我们需要等待输入框出现之后再进行操作。</p>
<h2 id="pin-he-unpin-di-1tiao-memo">pin 和 unpin 第1条 memo</h2>
<h3 id="jie-mian-2">界面</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-16-02-44.png" alt="" /></p>
<p>代码如下</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">pin_and_unpin_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> </span><span style="color:#6d6d6d;"># pin
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Pin</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># unpin
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-bookmark</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span></code></pre>
<p>这里如何定位3个小竖点比较困难，我是用的<code>css selector</code>。</p>
<p>也就是这行代码<code>page.locator('.lucide-ellipsis-vertical').first.click()</code>。</p>
<p>另外弹出的menu也要等待，毕竟代码运行的速度比浏览器动画的速度要快。</p>
<h2 id="zeng-jia-reaction">增加 reaction</h2>
<h3 id="jie-mian-3">界面</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-16-05-54.png" alt="" /></p>
<p>代码如下。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">add_reaction</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">reaction</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">relative-time</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">hover</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-smile-plus</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-smile-plus</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">get_by_text</span><span>(reaction).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span></code></pre>
<p>使用的时候是这样的<code>add_reaction(page, "❤️")</code>，可以点击任意的表情。</p>
<p>这里的难点是先要hover到一个元素上，然后再等待弹出框。</p>
<h2 id="bian-ji-di-1tiao-memo">编辑第1条 memo</h2>
<h3 id="jie-mian-4">界面</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-16-08-42.png" alt="" /></p>
<p>代码如下。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">edit_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">content</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Edit</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#e9fdac;">fill</span><span>(content)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span></code></pre>
<p><code>page.get_by_role("textbox", name="Any thoughts...").nth(1)</code>这行代码是定位页面上第2个文本框，也就是编辑的那个多行文本框。</p>
<h2 id="shan-chu">删除</h2>
<h3 id="jie-mian-5">界面</h3>
<p><img src="https://playwright.itest.info/blog/playwright-tutorial-2026/2026-01-31-16-10-17.png" alt="" /></p>
<p>删除是会弹出对话框的，要等待这个对话框出现才能继续操作。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">delete_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Are you sure you want to</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span></code></pre>
<h2 id="shang-chuan-wen-jian">上传文件</h2>
<p>这里的原理是找到页面上隐藏的<code>input[type="file"]</code>的控件，然后直接设置文件的绝对路径。</p>
<p>上传文件的时候会遇到系统对话框，这个处理起来比较麻烦，所以不要跟界面纠缠，直接操作隐藏控件就好。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[type="file"]</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">set_input_files</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pic.jpg</span><span style="color:#ffffff;">"</span><span>)
</span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span></code></pre>
<h2 id="wan-zheng-dai-ma">完整代码</h2>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#ff5e5e;">import </span><span>re
</span><span style="color:#ff5e5e;">from </span><span>playwright.sync_api </span><span style="color:#ff5e5e;">import </span><span>Playwright, sync_playwright, expect
</span><span style="color:#ff5e5e;">import </span><span>time
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">class </span><span style="text-decoration:underline;color:#8cdaff;">AuthPage</span><span>():
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#6699cc;">__init__</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page </span><span style="color:#ff5e5e;">= </span><span>page
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Username</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Password</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_up_btn </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sign up</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sign in</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">login</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">username</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth/</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">fill</span><span>(username)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password.</span><span style="color:#e9fdac;">fill</span><span>(password)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_in_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">signup</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">username</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span>):
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth/signup</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span>
</span><span> </span><span style="color:#e9fdac;">self</span><span>.username.</span><span style="color:#e9fdac;">fill</span><span>(username)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.password.</span><span style="color:#e9fdac;">fill</span><span>(password)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.sign_up_btn.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">login_with_session</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">session</span><span>):
</span><span> </span><span style="color:#6699cc;">print</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">login....</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230/auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">wait_until</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.context.</span><span style="color:#e9fdac;">add_cookies</span><span>([
</span><span> {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">name</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">user_session</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">value</span><span style="color:#ffffff;">"</span><span>: session,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">url</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">" </span><span style="color:#6d6d6d;"># 必须与页面同源
</span><span> }
</span><span> ])
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">wait_until</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">create_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">content</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> </span><span style="color:#6d6d6d;"># create memo
</span><span> page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:5230</span><span style="color:#ffffff;">"</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">fill</span><span>(content)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">pin_and_unpin_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> </span><span style="color:#6d6d6d;"># pin
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Pin</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># unpin
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-bookmark</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">add_reaction</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">reaction</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">relative-time</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">hover</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-smile-plus</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.lucide.lucide-smile-plus</span><span style="color:#ffffff;">"</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">get_by_text</span><span>(reaction).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">edit_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">content</span><span>: </span><span style="color:#fbe3bf;">str</span><span>):
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Edit</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Any thoughts...</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#e9fdac;">fill</span><span>(content)
</span><span> time.</span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">1</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">delete_memo</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.lucide-ellipsis-vertical</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">menuitem</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dialog</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Are you sure you want to</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">wait_for</span><span>(</span><span style="font-style:italic;color:#fc9354;">state</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">2000</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">run</span><span>(</span><span style="font-style:italic;color:#fc9354;">playwright</span><span>: Playwright) -> </span><span style="color:#ff8942;">None</span><span>:
</span><span> browser </span><span style="color:#ff5e5e;">= </span><span>playwright.chromium.</span><span style="color:#e9fdac;">launch</span><span>(</span><span style="font-style:italic;color:#fc9354;">headless</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">False</span><span>)
</span><span> context </span><span style="color:#ff5e5e;">= </span><span>browser.</span><span style="color:#e9fdac;">new_context</span><span>()
</span><span> page </span><span style="color:#ff5e5e;">= </span><span>context.</span><span style="color:#e9fdac;">new_page</span><span>()
</span><span>
</span><span> username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">sample</span><span style="color:#ffffff;">"
</span><span> password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">demo</span><span style="color:#ffffff;">"
</span><span>
</span><span> auth_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">AuthPage</span><span>(page)
</span><span> </span><span style="color:#6d6d6d;"># auth_page.signup(username, password)
</span><span> </span><span style="color:#6d6d6d;"># auth_page.login(username, password)
</span><span> auth_page.</span><span style="color:#e9fdac;">login_with_session</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">7-0baac506-9071-4d9b-ac72-158f83081c43</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># create_memo(page, "my sample")
</span><span> </span><span style="color:#6d6d6d;"># edit_memo(page, "✍️")
</span><span> </span><span style="color:#6d6d6d;"># edit_memo(page)
</span><span> </span><span style="color:#6d6d6d;"># add_reaction(page, "❤️")
</span><span>
</span><span> page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[type="file"]</span><span style="color:#ffffff;">'</span><span>).first.</span><span style="color:#e9fdac;">set_input_files</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pic.jpg</span><span style="color:#ffffff;">"</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">get_by_role</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Save</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="color:#6699cc;">input</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Press Enter...</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># ---------------------
</span><span> context.</span><span style="color:#e9fdac;">close</span><span>()
</span><span> browser.</span><span style="color:#e9fdac;">close</span><span>()
</span><span>
</span><span>
</span><span style="color:#ff5e5e;">with </span><span style="color:#e9fdac;">sync_playwright</span><span>() </span><span style="color:#ff5e5e;">as </span><span>playwright:
</span><span> </span><span style="color:#e9fdac;">run</span><span>(playwright)
</span><span>
</span></code></pre>
Playwright v1.52 和 v1.53 有哪些新功能：AI 自动修复、可描述的定位器等！
2025-06-27T00:00:00+00:00
2025-06-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/whats-new-in-playwright-v152-v153-fix-with-ai-describable-locators-and-more-dl9/
<p>来快速了解一下 Playwright v1.52 和 v1.53 的新特性吧！本次更新带来了一些强大的功能，特别是在调试和报告方面，大大提升了测试体验：</p>
<hr />
<p>🧠 <strong>VS Code 中的 AI 自动修复功能</strong></p>
<p>Playwright 现在可以与 GitHub Copilot 深度集成，帮助你在 VS Code 中直接修复测试失败。当测试失败时，只需点击错误信息旁边的 ✨ 图标，或在测试资源管理器中悬停测试名称时点击图标。Playwright 会将足够的上下文信息提供给 Copilot，Copilot 会生成有针对性的修复建议。你可以查看、接受并重新运行，整个流程快速、高效，而且非常实用。</p>
<p><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg8shs35tp2e33mtmejkm.png" alt="" /></p>
<blockquote>
<p>想尝试这个功能？确保你已经安装并启用了 Playwright 的 VS Code 插件。</p>
</blockquote>
<hr />
<p>🔎 <strong>locator.describe()：增强 Trace 和报告可读性</strong></p>
<p>现在你可以通过 <code>.describe()</code> 为任何定位器添加更具可读性的描述：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newTodo </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">What needs to be done?</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">新待办输入框</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">newTodo</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">买牛奶</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p>这些描述会出现在：</p>
<ul>
<li>Trace Viewer 中</li>
<li>UI 模式下</li>
<li>HTML 测试报告中</li>
</ul>
<p><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzjsqapaixb7b0s7r6jdj.png" alt="" /></p>
<p>这一小改动在调试复杂 UI 或团队协作时可以带来巨大的帮助。</p>
<hr />
<p>📊 <strong>HTML 报告支持自定义标题</strong></p>
<p>你可以为测试报告添加更清晰的标题，配置如下：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>, { title: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">自定义测试运行 #1028</span><span style="color:#ffffff;">" </span><span>}]],
</span><span>});
</span></code></pre>
<p>非常适合用于团队仪表板、CI 输出，或用于区分多个测试运行。</p>
<hr />
<p>✅ <strong>新增断言：<code>toContainClass</code></strong></p>
<p>想验证某个元素是否包含特定 class？现在可以使用：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">listitem</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Ship v1.52</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toContainClass</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">done</span><span style="color:#ffffff;">"
</span><span>);
</span></code></pre>
<p>这种方式语法简洁、表达精准，尤其适用于基于 class 的 UI 状态检查。</p>
<hr />
<p>🧪 <strong>快照增强：支持 <code>children</code> 和 <code>url</code></strong></p>
<p>ARIA 快照（通过 <code>toMatchAriaSnapshot</code>）现在支持：</p>
<ul>
<li><code>/children: equal</code> —— 确保子元素被包含在快照中</li>
<li><code>/url: "https://playwright.dev"</code> —— 匹配特定 URL</li>
</ul>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">locator</span><span>).</span><span style="color:#8cdaff;">toMatchAriaSnapshot</span><span>(</span><span style="color:#ffffff;">`
</span><span style="color:#fbe3bf;"> - list
</span><span style="color:#fbe3bf;"> - /children: equal
</span><span style="color:#fbe3bf;"> - listitem: Feature A
</span><span style="color:#fbe3bf;"> - listitem:
</span><span style="color:#fbe3bf;"> - link "Feature B":
</span><span style="color:#fbe3bf;"> - /url: "https://playwright.dev"
</span><span style="color:#ffffff;">`</span><span>);
</span></code></pre>
<p>这让 UI 快照测试在处理复杂或动态组件时更加可靠。</p>
<hr />
<p>⚙️ <strong>测试运行器更新</strong></p>
<p>新增了以下便捷功能：</p>
<ul>
<li><code>testProject.workers</code> —— 每个测试项目可自定义并发数</li>
<li><code>failOnFlaky</code> —— 一旦检测到测试不稳定，可自动判定为失败</li>
</ul>
<hr />
<p>🆙 <strong>如何升级？</strong></p>
<p>安装最新版本：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> i</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> @playwright/test@latest
</span></code></pre>
<p>同时别忘了将 VS Code 插件更新到最新版本，以便启用 AI 修复等新功能。</p>
为什么 Playwright 的追踪功能比日志更适合调试 UI 测试用例
2025-06-11T00:00:00+00:00
2025-06-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/
<p>当你的 Python UI 测试失败时，日志往往让你一头雾水。而 Playwright 的追踪功能能清晰展示发生了什么——包括截图、DOM 快照和完整上下文。</p>
<p><img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986296.19884591*ZxSXM0L8e9psCO4kUI2FIw.png" alt="图像 2" /></p>
<p><strong>本文内容包括：</strong></p>
<ul>
<li>为什么 Playwright 日志不够用</li>
<li>追踪功能能带来什么</li>
<li>为什么 <code>--tracing=on</code> 不生效</li>
<li>如何在 Python 中手动启用追踪</li>
<li>GitHub Actions 的坑点（.开头的文件夹）</li>
<li>macOS 解压导致的奇怪问题</li>
<li>我的心得体会——以及进阶课程推荐</li>
</ul>
<p>不久前，我在 LinkedIn 上做了一项关于 Web UI 测试工具的投票。</p>
<p>与此同时，我开始使用 Playwright，并很快发现了一个出奇有效的调试方式：<strong>内置追踪功能</strong>。</p>
<p>乍一听可能觉得没什么，但相信我，我记得当年为了能在测试环境中实现基础的实时视频录制，付出了多少努力。直到现在，很多团队依然不使用视频或可追踪记录。最多只是在测试步骤中偶尔截图或输出一些日志。</p>
<p>在那之前，我花了很多时间使用 Selenium，甚至写过一篇关于如何用 Python 描述符清理 PageObject 的文章：</p>
<p>👉 <a href="https://medium.com/@sergey.shukalovich/how-python-descriptors-clean-up-pageobjects-even-in-2025-12faa11b05b0">Python 描述符如何清理 PageObject，即使到了 2025</a></p>
<p>但用了 Playwright 后我很快意识到：<strong>光靠日志已经远远不够了</strong>。</p>
<h2 id="wei-shen-me-playwright-python-zhong-de-biao-zhun-ri-zhi-bu-gou-yong"><strong>为什么 Playwright（Python）中的标准日志不够用？</strong></h2>
<p>我们来看一个简单的 UI 测试：</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>@pytest.mark.</span><span style="color:#e9fdac;">smoke
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">test_get_started_link</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> start_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">StartPage</span><span>(page)
</span><span> start_page.</span><span style="color:#e9fdac;">open</span><span>()
</span><span> start_page.get_started_link.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> api_reference_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">ApiReferencePage</span><span>(page)
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(api_reference_page.heading_label).</span><span style="color:#e9fdac;">to_be_visible</span><span>()
</span></code></pre>
<p>当这段测试运行时，Playwright 默认输出的日志如下：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>2025-06-10T21:36:20.707Z pw:api navigating to "https://playwright.dev/", waiting until "load"
</span><span>...
</span><span>2025-06-10T21:36:21.252Z pw:api locator resolved to <h1>Installation</h1>
</span></code></pre>
<p>看起来很详细？但<strong>你试试看用这个来调试一个不稳定的 UI 测试</strong>：</p>
<ul>
<li><strong>没有上下文</strong>说明哪一步逻辑失败了</li>
<li>信息都非常底层：滚动、DOM 事件、加载状态……</li>
<li>不知道<strong>断言失败点</strong>，也不知道涉及哪个 page object</li>
<li><strong>没有截图、没有 DOM 快照、没有测试名称、没有可追溯性</strong></li>
</ul>
<p>比如你的测试失败在这句：</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#e9fdac;">expect</span><span>(api_reference_page.heading_label).</span><span style="color:#e9fdac;">to_be_visible</span><span>()
</span></code></pre>
<p>日志只会显示：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>LocatorAssertions.to_be_visible with timeout 5000ms
</span></code></pre>
<p>除此之外——<strong>一无所知</strong>。</p>
<p>你完全不知道：</p>
<ul>
<li>页面当时实际长啥样</li>
<li>是否导航完成</li>
<li>page object 是否初始化成功</li>
</ul>
<h2 id="zhui-zong-gong-neng-neng-dai-lai-shen-me"><strong>追踪功能能带来什么？</strong></h2>
<p>我们再运行一次上面的测试——但这次启用 <strong>Playwright Tracing</strong>。</p>
<p>你将获得：</p>
<ul>
<li><strong>测试全过程的可交互时间线</strong></li>
<li>每个操作的截图</li>
<li>每步执行前后的 DOM 快照</li>
<li>控制台输出、网络请求及响应信息</li>
<li>可视化标记<strong>哪一步失败</strong>，并给出完整上下文</li>
</ul>
<p>你可以通过以下命令打开 trace：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">playwright</span><span> show-trace traces/trace.zip
</span></code></pre>
<p>或在线打开：</p>
<p>👉 <a href="https://trace.playwright.dev/">https://trace.playwright.dev</a></p>
<p>效果大致如下：</p>
<p><img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986298.9059061*JhC_uc_KbcCxHVgPi2PwtQ.png" alt="图像 3" />
<img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986301.3168081*_KNtJLmxZ1NTMp8-5WeEMg.png" alt="图像 4" /></p>
<h2 id="shi-bai-shi-de-zhui-zong-chang-zhe-yang"><strong>失败时的追踪长这样</strong></h2>
<p>举个刻意失败的例子：</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>@pytest.mark.</span><span style="color:#e9fdac;">smoke
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">test_get_started_link</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> start_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">StartPage</span><span>(page)
</span><span> start_page.</span><span style="color:#e9fdac;">open</span><span>()
</span><span> start_page.get_started_link.</span><span style="color:#e9fdac;">click</span><span>()
</span><span> api_reference_page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">ApiReferencePage</span><span>(page)
</span><span> </span><span style="color:#e9fdac;">sleep</span><span>(</span><span style="color:#fdb082;">5</span><span>)
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(api_reference_page.heading_label).</span><span style="color:#e9fdac;">not_to_be_visible</span><span>(</span><span style="font-style:italic;color:#fc9354;">timeout</span><span style="color:#ff5e5e;">=</span><span style="color:#fdb082;">10000</span><span>)
</span></code></pre>
<p>输出信息如下：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>E AssertionError: Locator expected not to be visible
</span><span>E Actual value: visible
</span><span>E ...
</span></code></pre>
<p>这还是看不出：</p>
<ul>
<li>浏览器到底展示了什么</li>
<li>当前页面是哪一个</li>
<li>是什么导致了失败</li>
</ul>
<p>而在 Playwright trace viewer 中，同样的失败是这样的：</p>
<p><img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986303.479961*TBcTO9FycGjPWKxAKfBeqw.png" alt="图像 5" />
<img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986305.7333881*PwepsfAGhhcZS-u61E9uig.png" alt="图像 6" />
<img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986307.997021*5sz_Njicm3yCWQMlaX423w.png" alt="图像 7" />
<img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986310.23279791*0Xa3vBTU4Zq-F-B5T-XL5w.png" alt="图像 8" />
<img src="https://playwright.itest.info/blog/why-playwright-tracing-beats-logging-for-debugging-ui-tests-3ebe38d3dd61/img/1750986312.39691111*0ygEVQaJJIKmmozuux44_w.png" alt="图像 9" /></p>
<p>不用再去啃那 20 多行模糊日志，你可以<strong>直观看到浏览器看到的内容，以及何时出现问题</strong>。</p>
<h2 id="wei-shen-me-tracing-on-mei-you-sheng-cheng-trace-yi-ji-ru-he-jie-jue"><strong>为什么 <code>--tracing=on</code> 没有生成 trace（以及如何解决）</strong></h2>
<p>Playwright 支持追踪功能，<code>pytest-playwright</code> 也提供了 CLI 参数：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">pytest</span><span style="font-style:italic;color:#fc9354;"> --tracing</span><span style="color:#ff5e5e;">=</span><span>on
</span></code></pre>
<p>看起来很简单？</p>
<p>但你运行后却发现：</p>
<ul>
<li>没有文件</li>
<li>没有警告</li>
<li>没有 trace</li>
</ul>
<p><strong>发生了什么？</strong></p>
<p>原因是 <code>--tracing=on</code> 只是告诉 Playwright <strong>开始追踪</strong>，却<strong>没有告诉它停止并保存</strong>。</p>
<p>除非你用的是 JavaScript 的测试 runner，<strong>Python 不会自动调用：</strong></p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>context.tracing.</span><span style="color:#e9fdac;">stop</span><span>(</span><span style="font-style:italic;color:#fc9354;">path</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">trace.zip</span><span style="color:#ffffff;">"</span><span>)
</span></code></pre>
<p>所以 trace 根本不会保存到磁盘。</p>
<h2 id="zhen-shi-de-bug-bao-gao"><strong>真实的 bug 报告</strong></h2>
<p>不仅你遇到过这个问题，还有很多其他开发者：</p>
<ul>
<li><a href="https://github.com/actions/upload-artifact/issues/447">actions/upload-artifact#447</a></li>
<li><a href="https://github.com/microsoft/playwright-pytest/issues/179">playwright-pytest#179</a></li>
<li><a href="https://github.com/microsoft/playwright-pytest/issues/129">playwright-pytest#129</a></li>
</ul>
<h2 id="jie-jue-fang-fa-xie-yi-ge-zi-ji-de-fixture"><strong>解决方法：写一个自己的 fixture</strong></h2>
<p>你可以在 <code>conftest.py</code> 中添加如下 fixture：</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#e9fdac;">TRACES_DIR_PATH </span><span style="color:#ff5e5e;">= </span><span>pathlib.Path.</span><span style="color:#e9fdac;">cwd</span><span>().</span><span style="color:#e9fdac;">joinpath</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">artifacts</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#e9fdac;">joinpath</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">traces</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span>@pytest.</span><span style="color:#e9fdac;">fixture</span><span>(</span><span style="font-style:italic;color:#fc9354;">scope</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">function</span><span style="color:#ffffff;">"</span><span>, </span><span style="font-style:italic;color:#fc9354;">autouse</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">True</span><span>)
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">trace_browser_context</span><span>(</span><span style="font-style:italic;color:#fc9354;">config</span><span>, </span><span style="font-style:italic;color:#fc9354;">browser_context</span><span>):
</span><span> ui_config </span><span style="color:#ff5e5e;">= </span><span>config[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui</span><span style="color:#ffffff;">"</span><span>]
</span><span> save_trace </span><span style="color:#ff5e5e;">= </span><span>ui_config.</span><span style="color:#e9fdac;">getboolean</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">save_trace</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>save_trace:
</span><span> browser_context.tracing.</span><span style="color:#e9fdac;">start</span><span>(</span><span style="font-style:italic;color:#fc9354;">screenshots</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">True</span><span>, </span><span style="font-style:italic;color:#fc9354;">snapshots</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">True</span><span>, </span><span style="font-style:italic;color:#fc9354;">sources</span><span style="color:#ff5e5e;">=</span><span style="color:#ff8942;">True</span><span>)
</span><span>
</span><span> </span><span style="color:#ff5e5e;">yield
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>save_trace:
</span><span> browser_context.tracing.</span><span style="color:#e9fdac;">stop</span><span>(</span><span style="font-style:italic;color:#fc9354;">path</span><span style="color:#ff5e5e;">=</span><span>TRACES_DIR_PATH.</span><span style="color:#e9fdac;">joinpath</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">trace-</span><span>{uuid.</span><span style="color:#e9fdac;">uuid4</span><span>()}</span><span style="color:#fbe3bf;">.zip</span><span style="color:#ffffff;">"</span><span>))
</span></code></pre>
<p>确保你有 <code>config.ini</code> 配置，内容包含 <code>[ui] save_trace = true</code>，并且已定义 <code>browser_context</code> fixture。</p>
<p>这个 fixture 会：</p>
<ul>
<li>在每个测试开始时启动追踪</li>
<li>在测试结束后（不论成功或失败）保存为唯一命名的 <code>.zip</code> 文件</li>
<li>可在本地和 CI 环境中使用</li>
</ul>
<h2 id="bonus-ke-yi-jin-yi-bu-zi-ding-yi-trace-ce-lue"><strong>Bonus：可以进一步自定义 trace 策略</strong></h2>
<p>你还可以扩展逻辑，比如：</p>
<ul>
<li>只在失败时保存 trace</li>
<li>按测试场次分文件夹保存</li>
<li>附加到 CI artifacts（见下文）</li>
</ul>
<p>完整代码参考 GitHub 仓库：</p>
<p>👉 <a href="https://github.com/shukal94/pwtracing">shukal94/pwtracing</a></p>
<h2 id="ci-ji-cheng-github-actions-pei-zhi"><strong>CI 集成：GitHub Actions 配置</strong></h2>
<p>你希望 CI 能够：</p>
<ol>
<li>运行测试</li>
<li>收集追踪文件</li>
<li>上传为可下载的 artifacts</li>
</ol>
<p><code>.github/workflows/playwright.yml</code> 示例：</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Playwright Tests
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">push</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>: [</span><span style="color:#fbe3bf;">main</span><span>]
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>: [</span><span style="color:#fbe3bf;">main</span><span>]
</span><span>
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">test</span><span>:
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">60
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span>
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v4
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set up Python
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-python@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">python-version</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">3.11</span><span style="color:#ffffff;">"
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install dependencies
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> python -m pip install --upgrade pip
</span><span style="color:#fbe3bf;"> pip install -r requirements.txt
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Ensure browsers are installed
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">python -m playwright install --with-deps
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">pytest -m smoke tests/
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">${{ !cancelled() }}
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">playwright-traces
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">artifacts/traces
</span></code></pre>
<p>⚠️ 注意：不要使用 <code>.test-results/</code> 这类点开头的目录，否则 GitHub 会悄悄忽略。改用 <code>test-results/</code> 或 <code>artifacts/</code>。</p>
<p>详见：<a href="https://github.com/actions/upload-artifact/issues/447">upload-artifact#447</a></p>
<h2 id="macos-xiao-tie-shi-fang-zhi-trace-wen-jian-bei-zi-dong-jie-ya-po-pi"><strong>macOS 小贴士：防止 trace 文件被自动解压破坏</strong></h2>
<p>macOS 中，Safari 和 Finder 会<strong>自动解压 zip 文件</strong>，这会破坏 trace 文件结构。</p>
<p>🛑 问题：</p>
<ul>
<li>你从 GitHub 下载 trace.zip → Safari 自动解压</li>
<li>解压文件夹中还有 zip → Finder 再次解压</li>
<li>最终文件零散，无法识别</li>
<li>viewer 提示错误：<em>“无法加载 trace. 请上传有效文件”</em></li>
</ul>
<p>✅ 解决：</p>
<ol>
<li>关闭 Safari 的自动解压：Safari → 设置 → 通用 → 取消勾选“下载后打开安全文件”</li>
<li>使用终端手动解压</li>
<li><strong>仅上传原始 <code>.zip</code> 文件至</strong> <a href="https://trace.playwright.dev/">trace.playwright.dev</a></li>
</ol>
<hr />
<h2 id="zong-jie-tracing-logging-er-zhe-shi-jian-hao-shi"><strong>总结：Tracing ≠ Logging，而这是件好事</strong></h2>
<p>调试现代 UI 测试并不容易。</p>
<p>你可以花上几个小时啃日志、截图、反复猜测问题点 —— 或者，你可以<strong>直接打开 trace，看清一切</strong>。</p>
<p>Playwright 的追踪功能带来完整视角：</p>
<ul>
<li>浏览器看到什么</li>
<li>测试代码做了什么</li>
<li>哪一步出了问题</li>
</ul>
<p>前提是你要<strong>正确开启和保存</strong>——现在你知道该怎么做了。</p>
<h3 id="ri-zhi-yi-ran-zhong-yao">日志依然重要</h3>
<p>追踪帮助你理解<strong>行为</strong>，但若你在构建<strong>自定义测试框架</strong>或希望工具更具可观测性，结构化、可读性强的日志仍然不可或缺。</p>
<p>这也是我新课程的主题：</p>
<p>👉 <a href="https://www.udemy.com/course/logging-test-automation/">Python 测试自动化框架日志设计实战</a></p>
<p>适合所有使用 <code>pytest</code>、构建测试平台、或不想再用 print 语句 debug 的同学：</p>
<ul>
<li>学会设计清晰可调试的日志体系</li>
<li>为每条测试加上结构化上下文</li>
<li>将日志集成进框架、CI 与日常开发流程中</li>
</ul>
<p>👉 <a href="https://www.udemy.com/course/logging-test-automation/?referralCode=EC3293CB22BD37543C41">查看课程</a></p>
使用 Grafana Loki 实现 Playwright API 日志集中管理
2025-05-27T00:00:00+00:00
2025-05-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/centralized-playwright-api-logs-with-grafana-loki-368c21a76aba/
<p><strong>Playwright</strong> 是一款强大的端到端和 API 测试工具，但在 CI 流水线中，有时我们写好的场景会出现失败，而搞清楚失败的原因却令人头疼。试想一下，如果你能将每一次请求和响应都记录到像 <strong>Grafana Loki</strong> 这样可搜索的集中系统中，会不会更容易调试？<br />
这篇文章将向你展示如何将 Loki 日志集成进你的 Playwright API 测试中，让你无需延长测试时间也能更快定位问题。</p>
<h2 id="wei-shen-me-yao-ji-lu-api-ce-shi-ri-zhi">为什么要记录 API 测试日志？</h2>
<p>API 测试失败的原因多种多样，比如授权头无效、请求体格式错误，或是后端本身出现波动。在本地单个运行场景时，我们可以很容易地定位问题；但一旦进入流水线并行执行，问题就变得难以排查了。<br />
因此，<strong>记录 API 测试数据显得尤为重要</strong>。</p>
<p>通过记录这些日志，我们可以更快识别错误并解决它，提升调试效率。</p>
<h2 id="da-jian-loki-he-grafana">搭建 Loki 和 Grafana</h2>
<p>Loki 是一个专为日志聚合设计的系统，由 Grafana Labs 开发，因此与 Grafana 的集成非常顺畅。Grafana 负责可视化和查询存储在 Loki 中的日志。<br />
在更新自动化测试中的日志器之前，我们先搭建 Loki 和 Grafana。<br />
我们可以使用 Docker 来启动 Loki 和 Grafana，官方文档中已经提供了 <a href="https://grafana.com/docs/loki/latest/setup/install/docker/">docker-compose</a> 示例。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">version</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">3</span><span style="color:#ffffff;">"
</span><span style="color:#ff5e5e;">services</span><span>:
</span><span> </span><span style="color:#ff5e5e;">loki</span><span>:
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#fbe3bf;">grafana/loki:2.9.4
</span><span> </span><span style="color:#ff5e5e;">ports</span><span>:
</span><span> - </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">3100:3100</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">command</span><span>: </span><span style="color:#fbe3bf;">-config.file=/etc/loki/local-config.yaml
</span><span>
</span><span> </span><span style="color:#ff5e5e;">grafana</span><span>:
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#fbe3bf;">grafana/grafana:10.3.3
</span><span> </span><span style="color:#ff5e5e;">ports</span><span>:
</span><span> - </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">3000:3000</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">environment</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">GF_SECURITY_ADMIN_USER=admin
</span><span> - </span><span style="color:#fbe3bf;">GF_SECURITY_ADMIN_PASSWORD=admin
</span><span> </span><span style="color:#ff5e5e;">depends_on</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">loki
</span></code></pre>
<p>创建 <code>docker-compose.yml</code> 文件后，运行 <code>docker compose up -d</code> 即可以后台模式启动容器。</p>
<p><img src="https://playwright.itest.info/blog/centralized-playwright-api-logs-with-grafana-loki-368c21a76aba/img/1750994862.2839621*G7dZWO2dVunvpaQnZMEGVg.png" alt="Image 2" /></p>
<h3 id="zai-grafana-tian-jia-shu-ju-yuan">在 Grafana 添加数据源</h3>
<p>打开浏览器访问 <em>localhost:3000</em>，使用在 compose 文件中设定的用户名和密码登录。
进入 “Connection → Data Source”，点击“Add New Connection”，选择 <strong>Loki</strong> 作为数据源，URL 填写 <a href="http://loki:3100">http://loki:3100</a>。</p>
<p>请注意，这里的 <code>loki</code> 是 Docker 容器的名称，如果你修改了名字，记得也一起调整。</p>
<h2 id="chuang-jian-ri-zhi-ji-lu-gong-ju">创建日志记录工具</h2>
<p>接下来我们为 Playwright 项目创建日志记录工具，项目示例可以在作者仓库中找到。</p>
<p>我们之前直接使用 Playwright 的 <code>request</code> 进行请求，需要每次手动添加日志逻辑，重复性太高。现在我们将封装成日志工具函数，并结合请求发送逻辑统一管理：</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pendingLogs</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>>[] </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">enqueueLog</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">promise</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>></span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#e9fdac;">pendingLogs</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">promise</span><span>);
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">flushLogs</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#8cdaff;">allSettled</span><span>(</span><span style="color:#e9fdac;">pendingLogs</span><span>);
</span><span> </span><span style="color:#e9fdac;">pendingLogs</span><span>.length </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>;
</span><span>}
</span></code></pre>
<p>日志内容会过滤敏感字段（如 authorization、token、apikey 等），并打上 <code>REDACTED</code> 标记：</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">removeAuthOnHeader</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">headers</span><span style="color:#ff5e5e;">: </span><span>Record<</span><span style="color:#fbe3bf;">string</span><span>, </span><span style="color:#fbe3bf;">string</span><span>>
</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">: </span><span>Record<</span><span style="color:#fbe3bf;">string</span><span>, </span><span style="color:#fbe3bf;">string</span><span>> {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">redactedKeys </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">authorization</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api-key</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">token</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">sanitized</span><span style="color:#ff5e5e;">: </span><span>Record<</span><span style="color:#fbe3bf;">string</span><span>, </span><span style="color:#fbe3bf;">string</span><span>> </span><span style="color:#ff5e5e;">= </span><span>{};
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">key </span><span style="color:#ff5e5e;">in </span><span style="color:#e9fdac;">headers</span><span>) {
</span><span> </span><span style="color:#e9fdac;">sanitized</span><span>[</span><span style="color:#e9fdac;">key</span><span>] </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">redactedKeys</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#e9fdac;">key</span><span>.</span><span style="color:#6699cc;">toLowerCase</span><span>())
</span><span> </span><span style="color:#ff5e5e;">? </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">[REDACTED]</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">: </span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#e9fdac;">key</span><span>];
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">sanitized</span><span>;
</span><span>}
</span></code></pre>
<p>通过 <code>logApiCallToLoki</code> 函数将请求和响应发送到 Loki，并支持添加标签（labels），例如环境变量和 job 名称：</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createLoggedApiContext</span><span style="color:#ffffff;">()</span><span style="color:#ff5e5e;">: </span><span>Promise<APIRequestContext> {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">originalFetch </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#e9fdac;">fetch</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#8cdaff;">fetch </span><span style="color:#ff5e5e;">= async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">url</span><span>, </span><span style="font-style:italic;color:#fc9354;">options</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">reqData </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> method: </span><span style="color:#e9fdac;">options</span><span>?.method </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET</span><span style="color:#ffffff;">"</span><span>,
</span><span> url: </span><span style="color:#e9fdac;">url</span><span>,
</span><span> headers: </span><span style="color:#e9fdac;">options</span><span>?.headers,
</span><span> body: </span><span style="color:#e9fdac;">options</span><span>?.data </span><span style="color:#ff5e5e;">|| </span><span>{},
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">originalFetch</span><span>.</span><span style="color:#6699cc;">call</span><span>(</span><span style="color:#d699ff;">this</span><span>, </span><span style="color:#e9fdac;">url</span><span>, </span><span style="color:#e9fdac;">options</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">responseData </span><span style="color:#ff5e5e;">= </span><span>{ status: </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>() };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#e9fdac;">responseData</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">body</span><span style="color:#ffffff;">"</span><span>] </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>{
</span><span> </span><span style="color:#e9fdac;">responseData</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">body</span><span style="color:#ffffff;">"</span><span>] </span><span style="color:#ff5e5e;">= </span><span>{};
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">logging </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">logApiCallToLoki</span><span>(</span><span style="color:#e9fdac;">reqData</span><span>, </span><span style="color:#e9fdac;">responseData</span><span>, {
</span><span> environment: process.env.</span><span style="color:#e9fdac;">ENV </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">local</span><span style="color:#ffffff;">"</span><span>,
</span><span> }).</span><span style="color:#6699cc;">catch</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">e</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">warn</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Loki failed to log the error:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">e</span><span>.</span><span style="color:#e9fdac;">message</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">enqueueLog</span><span>(</span><span style="color:#e9fdac;">logging</span><span>);
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">response</span><span>;
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">apiContext</span><span>;
</span><span>}
</span></code></pre>
<h2 id="tian-jia-quan-ju-teardown-que-bao-ri-zhi-fa-song-wan-cheng">添加全局 Teardown 确保日志发送完成</h2>
<p>在测试结束时，我们需要确保所有日志已发送完毕，因此设置 <code>globalTeardown</code>：</p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">flushLogs </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../utils/logQueue</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">globalTeardown</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Make sure all logs were sent to Loki</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">flushLogs</span><span>();
</span><span>}
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">globalTeardown</span><span>;
</span></code></pre>
<p>别忘了在 <code>playwright.config.ts</code> 中设置该 teardown。</p>
<h2 id="zai-ce-shi-zhong-shi-yong-ri-zhi-ji-lu-gong-ju">在测试中使用日志记录工具</h2>
<p>现在我们在测试中引入 <code>createLoggedApiContext</code> 替代原始 <code>request</code>：</p>
<p><strong>旧版代码：</strong></p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">创建用户</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createUser</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">valid</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/public/v2/users</span><span style="color:#ffffff;">`</span><span>, { headers: </span><span style="color:#e9fdac;">header</span><span>, data: </span><span style="color:#e9fdac;">body </span><span>});
</span><span> </span><span style="color:#ff5e5e;">...
</span><span>});
</span></code></pre>
<p><strong>新版代码：</strong></p>
<pre data-lang="ts" style="background-color:#191919;color:#f8f8f2;" class="language-ts "><code class="language-ts" data-lang="ts"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">创建用户</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ }</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createUser</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">valid</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">request </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createLoggedApiContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/public/v2/users</span><span style="color:#ffffff;">`</span><span>, { headers: </span><span style="color:#e9fdac;">header</span><span>, data: </span><span style="color:#e9fdac;">body </span><span>});
</span><span> </span><span style="color:#ff5e5e;">...
</span><span>});
</span></code></pre>
<p>通过引入 helper，测试请求在发送后会自动构造日志并推送到 Loki，无需手动干预。</p>
<h2 id="zai-grafana-zhong-ke-shi-hua-ri-zhi">在 Grafana 中可视化日志</h2>
<p>一旦测试执行完成，即可在 Grafana 的 <em>Explore</em> 或 <em>Dashboard</em> 页面查看日志：</p>
<p><img src="https://playwright.itest.info/blog/centralized-playwright-api-logs-with-grafana-loki-368c21a76aba/img/1750994864.8593591*9wg4j-5c53BI-6Kw3hKb_g.png" alt="Image 3" /></p>
<p>日志中包含完整的请求与响应信息，有助于排查错误。</p>
<p>目前示例只添加了 job 和环境名标签，你可以根据需要扩展更多元数据，比如测试用例 ID、构建号、版本等。</p>
<h2 id="zong-jie">总结</h2>
<p><strong>调试缺乏可见性是非常痛苦的。</strong></p>
<p>通过将 <strong>Grafana Loki</strong> 集成进 <strong>Playwright API 测试</strong>，你可以实现集中、结构化、可搜索的日志系统，而不会影响测试性能或执行时间。</p>
<p>无论你在本地还是 CI 中运行测试，这种方式都能帮助你更快定位问题、分析失败原因，并构建更具可观测性的测试流程。</p>
<p>测试，不再只是通过或失败，而是变得可视、可查、可控。</p>
<p>感谢阅读，祝测试顺利！</p>
playwright1.50.0新特性介绍
2025-02-15T00:00:00+00:00
2025-02-15T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/whats-new-in-playwright-v1-50-0-7026fac00401/
<p>Playwright v1.50.0 引入了多项值得关注的功能和改进，旨在提升测试体验。以下是这些新增功能的详细概述，并附有示例以说明其使用方法。</p>
<h2 id="runner-zeng-qiang">Runner 增强</h2>
<h3 id="1-bu-zou-chao-shi-pei-zhi">1. 步骤超时配置</h3>
<p>现在可以通过 timeout 选项为单个测试步骤指定最大运行时间。如果某个步骤的运行时间超过此限制，测试将失败。</p>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">example test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">step with timeout</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 此步骤必须在 1000 毫秒内完成
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#some-button</span><span style="color:#ffffff;">"</span><span>);
</span><span> },
</span><span> { timeout: </span><span style="color:#fdb082;">1000 </span><span>}
</span><span> );
</span><span>});
</span></code></pre>
<h3 id="2-tiao-guo-ce-shi-bu-zou">2. 跳过测试步骤</h3>
<p>新增的<code>test.step.skip()</code>方法允许跳过特定的测试步骤，这在某些条件未满足或功能尚未实现的情况下非常有用。</p>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">some test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">before running step</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 正常步骤
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#e9fdac;">step</span><span>.</span><span style="color:#8cdaff;">skip</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">not yet ready</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 此步骤将被跳过
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">after running step</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 即使上一步被跳过，此步骤仍会运行
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="3-aria-kuai-zhao-cun-chu-yu-dan-du-wen-jian">3. ARIA 快照存储于单独文件</h3>
<p><code>expect(locator).toMatchAriaSnapshot()</code>方法已扩展，允许将 ARIA 快照存储在单独的 YAML 文件中，便于更好地组织和版本控制。</p>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ARIA snapshot test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">body</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toMatchAriaSnapshot</span><span>();
</span><span>});
</span></code></pre>
<p>在此示例中，ARIA 快照将存储在对应的 YAML 文件中。</p>
<h3 id="4-ke-fang-wen-xing-cuo-wu-xiao-xi-duan-yan">4. 可访问性错误消息断言</h3>
<p>新增方法<code>expect(locator).toHaveAccessibleErrorMessage()</code>，可用于断言某个定位器指向的元素具有特定的 ARIA 错误消息。</p>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">accessible error message test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/form</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#submit-button</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">input </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">input</span><span>).</span><span style="color:#8cdaff;">toHaveAccessibleErrorMessage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Username is required</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<h3 id="5-kuai-zhao-geng-xin-pei-zhi">5. 快照更新配置</h3>
<p><code>testConfig.updateSnapshots</code>选项现在包含一个新的枚举值。将此选项设置为<code>changed</code>时，仅更新已更改的快照；设置为<code>all</code>时，无论是否有差异，都会更新所有快照。</p>
<p>命令行示例：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>npx playwright test --update-snapshots=changed
</span><span>
</span></code></pre>
<h3 id="6-yuan-dai-ma-geng-xin-fang-fa-pei-zhi">6. 源代码更新方法配置</h3>
<p>新增选项<code>testConfig.updateSourceMethod</code>，定义在配置<code>testConfig.updateSnapshots</code>时如何更新源代码。可用模式包括 overwrite、3-way 和 patch。</p>
<p>命令行示例：</p>
<pre data-lang="text" style="background-color:#191919;color:#f8f8f2;" class="language-text "><code class="language-text" data-lang="text"><span>npx playwright test --update-snapshots=changed --update-source-method=3way
</span></code></pre>
<h3 id="7-web-fu-wu-qi-de-you-ya-guan-bi">7. Web 服务器的优雅关闭</h3>
<p><code>testConfig.webServer</code>选项现在包含一个<code>gracefulShutdown</code>字段，允许你指定一个进程终止信号，而不是默认的<code>SIGKILL</code>。</p>
<p>配置示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.js
</span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> webServer: {
</span><span> command: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npm run start</span><span style="color:#ffffff;">"</span><span>,
</span><span> port: </span><span style="color:#fdb082;">3000</span><span>,
</span><span> gracefulShutdown: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">SIGTERM</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>};
</span></code></pre>
<h3 id="8-fang-wen-ce-shi-bu-zou-fu-jian">8. 访问测试步骤附件</h3>
<p>现在在报告器 API 中公开了<code>testStep.attachments</code>属性，允许检索特定测试步骤创建的所有附件。</p>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">class </span><span>CustomReporter {
</span><span> </span><span style="color:#8cdaff;">onStepEnd</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">test</span><span>, </span><span style="font-style:italic;color:#fc9354;">result</span><span>, </span><span style="font-style:italic;color:#fc9354;">step</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">attachments </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">step</span><span>.</span><span style="color:#e9fdac;">attachments</span><span>;
</span><span> </span><span style="color:#6d6d6d;">// 按需处理附件
</span><span> }
</span><span>}
</span></code></pre>
<h2 id="yong-hu-jie-mian-geng-xin">用户界面更新</h2>
<h3 id="1-zeng-qiang-de-html-bao-gao-qi">1. 增强的 HTML 报告器</h3>
<p>默认的 HTML 报告器已更新，改进了附件的显示方式，提供更直观和信息丰富的布局。</p>
<h3 id="2-aria-kuai-zhao-yuan-su-xuan-ze-qi">2. ARIA 快照元素选择器</h3>
<p>UI 中新增了一个按钮，用于选择生成 ARIA 快照的元素，简化了创建无障碍性测试的流程。</p>
<h3 id="3-xiang-xi-de-xing-dong-xin-xi">3. 详细的行动信息</h3>
<p>现在在追踪中会显示额外的细节，例如在行动中按下的按键，这些信息会与 API 调用一起显示，为测试执行提供更深入的洞察。</p>
<h3 id="4-mo-ren-jin-yong-canvas-nei-rong-xian-shi">4. 默认禁用 Canvas 内容显示</h3>
<p>由于可能引发错误，现在默认禁用在追踪中显示<code><canvas></code>内容。可以通过 UI 中的“显示 Canvas 内容”设置启用。</p>
<h3 id="5-zeng-qiang-de-ji-shi-xin-xi">5. 增强的计时信息</h3>
<p>“调用”和“网络”面板现在显示额外的计时信息，有助于性能分析和调试。</p>
<h2 id="po-pi-xing-bian-geng">破坏性变更</h2>
<h3 id="1-ke-bian-ji-yuan-su-duan-yan">1. 可编辑元素断言</h3>
<p>如果目标元素不是<code><input></code>、<code><select></code>或其他已识别的可编辑元素，<code>expect(locator).toBeEditable()</code>和<code>locator.isEditable()</code>方法现在会抛出错误。</p>
<p>示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">element </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#non-editable-element</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">element</span><span>).</span><span style="color:#8cdaff;">toBeEditable</span><span>(); </span><span style="color:#6d6d6d;">// 抛出错误
</span></code></pre>
<ol start="2">
<li>快照更新行为</li>
</ol>
<p>将<code>testConfig.updateSnapshots</code>设置为<code>all</code>时，现在会更新所有快照，而不仅仅是失败或已更改的快照。要保留之前仅更新已更改快照的行为，请使用新的<code>changed</code>枚举值。</p>
<p>命令行示例：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>npx playwright test --update-snapshots=changed
</span><span>
</span></code></pre>
<h2 id="liu-lan-qi-ban-ben-geng-xin">浏览器版本更新</h2>
<p>Playwright v1.50.0 包含以下浏览器版本：</p>
<p>• Chromium 133.0.6943.16</p>
<p>• Mozilla Firefox 134.0</p>
<p>• WebKit 18.2</p>
<h2 id="jie-lun">结论</h2>
<p>Playwright v1.50.0 带来了显著的改进，提升了测试效率、无障碍性验证和调试能力。新的步骤超时配置、步骤跳过和 ARIA 快照增强功能提高了测试执行的健壮性。Web 服务器的优雅关闭和追踪中详细的行动信息为开发者提供了更友好的测试体验。此外，诸如更严格的可编辑元素断言等破坏性变更，进一步增强了测试的可靠性。</p>
告别不稳定的测试：每个测试自动化工程师必须掌握的Playwright最佳实践
2025-01-28T00:00:00+00:00
2025-01-28T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/say-goodbye-to-flaky-tests-playwright-best-practices-every-test-automation-engineer-must-know-9dfeb9bb5017/
<p>测试用例集就像降落伞——只有在每次都能正常工作时，你才会信任它。如果你的测试今天通过了，但明天却莫名其妙地失败了，那么它们带来的坏处比好处更多。稳定性是测试价值的关键。在本文中，我们将探讨 Playwright 创建稳定、可靠测试的顶级策略，让你能够自信地发布代码，而不用担心测试的不稳定性。</p>
<h3 id="playwright-ce-shi-zui-jia-shi-jian">Playwright 测试最佳实践</h3>
<ol>
<li>
<p><strong>使用可靠的定位器</strong></p>
<ul>
<li><strong>目标</strong>：确保测试对频繁的 UI 变化具有弹性。</li>
<li><strong>优先使用数据或基于角色的定位器</strong>：使用<code>data-testid</code>或<code>getByRole</code>，而不是脆弱的 CSS 类或自动生成的 ID。这种方法关注的是很少变化的稳定属性。</li>
<li><strong>避免动态属性</strong>：不要依赖包含时间戳、会话令牌或随机字符串的定位器。这些内容可能会在每次构建或测试运行时发生变化。</li>
<li><strong>处理复杂的 DOM 结构</strong>：对于 Shadow DOM 或 iframe，使用<code>page.frame(...)</code>或嵌套的<code>locator(...)</code>。始终确保你指向正确的文档上下文。</li>
<li><strong>强制执行命名标准</strong>：保持测试特定属性的一致性。例如，始终使用<code>data-testid="submit-button"</code>或类似的命名模式，以减少混淆。</li>
</ul>
</li>
<li>
<p><strong>利用自动等待和显式条件</strong></p>
<ul>
<li><strong>目标</strong>：让 Playwright 智能处理时间问题，消除由于延迟导致的不稳定性。</li>
<li><strong>使用定位器自动等待</strong>：使用<code>page.locator('selector')</code>并链接操作，如<code>.click()</code>。Playwright 会自动重试，直到元素准备就绪。</li>
<li><strong>使用基于断言的等待</strong>：避免使用<code>waitForTimeout</code>，优先使用<code>expect(locator).toBeVisible()</code>、<code>expect(locator).toHaveText()</code>等。每个断言都包含在默认或配置的超时内的重试机制。</li>
<li><strong>最小化手动暂停</strong>：只有在外部服务引入实际延迟时，才使用显式的<code>page.waitForTimeout()</code>。</li>
<li><strong>期望轮询</strong>：对于更复杂的条件（如验证列表计数），使用<code>expect.poll(...)</code>。这减少了自定义循环或重复检查的需要。</li>
</ul>
</li>
<li>
<p><strong>隔离测试并避免共享状态</strong></p>
<ul>
<li><strong>目标</strong>：使每个测试自包含，确保一个测试的失败或残留数据不会影响下一个测试。</li>
<li><strong>独立的设置和清理</strong>：无论是通过 Playwright 的 fixture 还是<code>beforeEach/afterEach</code>钩子，只为每个测试重新创建所需的内容。不要依赖前一个测试的状态。</li>
<li><strong>使用 Playwright 的 fixture 模型</strong>：利用内置的 fixture 来初始化页面、上下文或用户状态，确保并行运行的一致性。</li>
<li><strong>参考专用的数据策略</strong>：如果你需要临时环境或容器化的数据库，请参阅<a href="https://medium.com/@samuel.sperling/say-goodbye-to-flaky-tests-playwright-best-practices-every-test-automation-engineer-must-know-9dfeb9bb5017#"><strong>管理测试数据和数据库</strong></a>文档，了解更深入的策略。</li>
</ul>
</li>
<li>
<p><strong>保持测试的原子性和专注性</strong></p>
<ul>
<li><strong>目标</strong>：减少调试复杂性和部分失败的风险。</li>
<li><strong>每个测试只测试一个功能</strong>：只测试一个主要场景（例如，“用户可以提交有效表单”）。大型端到端流程更容易出现间歇性中断。</li>
<li><strong>可重用性</strong>：对于重复的步骤（如登录），使用辅助函数或 fixture。不要在每个测试中重复复杂的登录流程。</li>
<li><strong>步骤注释</strong>：使用<code>test.step(...)</code>来清晰地描述每个阶段的操作。这有助于准确识别测试失败的位置。</li>
</ul>
</li>
<li>
<p><strong>正确处理异步操作</strong></p>
<ul>
<li><strong>目标</strong>：消除与网络响应或异步进程相关的竞态条件和时间问题。</li>
<li><strong>等待网络响应</strong>：当操作触发 API 调用时，确认 UI 状态或使用<code>page.waitForResponse(...)</code>等待相关响应。</li>
<li><strong>模拟外部服务</strong>：使用 Playwright 的请求拦截功能来控制或模拟外部依赖。这避免了由于第三方服务中断或速率限制导致的不稳定性。</li>
<li><strong>超时配置</strong>：在<code>playwright.config.ts</code>中设置标准超时。确保它们足够长以适应实际条件，但不要太长以至于失败无法被检测到。</li>
</ul>
</li>
<li>
<p><strong>控制测试环境</strong></p>
<ul>
<li><strong>目标</strong>：确保测试在一致的条件下运行，以减少变异性。</li>
<li><strong>容器化/CI</strong>：将你的设置容器化（Docker）或标准化你的 CI 环境。不匹配的操作系统或浏览器版本可能会引入难以调试的错误。</li>
<li><strong>稳定的构建</strong>：始终在通过 linting、单元测试和集成测试的代码上运行端到端测试。在进入端到端测试之前，尽早发现小问题。</li>
<li><strong>重置快照/日志</strong>：在每次运行前清除旧的快照或日志，以避免过时的工件生成误报或混淆。</li>
</ul>
</li>
<li>
<p><strong>实施健壮的断言</strong></p>
<ul>
<li><strong>目标</strong>：确保成功条件清晰，并可靠地检测正面和负面条件。</li>
<li><strong>内置匹配器</strong>：使用<code>toHaveText</code>、<code>toBeVisible</code>、<code>toHaveCount</code>等。这些断言包含重试机制，有助于减少手动休眠。</li>
<li><strong>负面断言</strong>：当期望没有结果时，使用<code>toBeHidden()</code>或<code>toHaveCount(0)</code>。这些断言也包含基于时间的重试，以处理缓慢的 UI 更新。</li>
<li><strong>细粒度检查</strong>：如果一个测试检查多个子功能，将它们分解为单独的<code>expect</code>调用。更细粒度的断言会产生更清晰的错误报告。</li>
</ul>
</li>
<li>
<p><strong>使用跟踪和调试功能</strong></p>
<ul>
<li><strong>目标</strong>：快速诊断根本原因，尤其是在 CI 或并行化环境中。</li>
<li><strong>Playwright 跟踪</strong>：对失败的测试使用<code>--trace on</code>或<code>--trace retain-on-failure</code>。在 Trace Viewer 中重放跟踪，查看逐步的截图、日志和网络调用。</li>
<li><strong>截图和视频</strong>：在失败时捕获截图或完整视频。这在无头 CI 运行中非常有用，因为你无法实时查看浏览器。</li>
<li><strong>控制台/网络日志</strong>：监听<code>page.on('console', ...)</code>或网络事件。了解控制台错误或请求状态可以快速定位不稳定性。</li>
</ul>
</li>
<li>
<p><strong>编写清晰且可维护的代码</strong></p>
<ul>
<li><strong>目标</strong>：保持测试代码易于长期演进和调试。</li>
<li><strong>使用页面对象/抽象</strong>：将常见的定位器和操作集中在页面对象或辅助模块中。单个更改可以更新所有引用该组件的测试。</li>
<li><strong>避免硬编码字符串</strong>：将重复的 URL、凭据或文本存储在配置或常量中。这减少了重复和拼写错误的风险。</li>
<li><strong>描述性命名</strong>：为测试命名时明确结果（例如，<code>test('提交有效表单显示成功消息', ...)</code>），以便在报告中清晰可见。</li>
</ul>
</li>
<li>
<p><strong>优化并行执行（和性能）</strong></p>
<ul>
<li><strong>目标</strong>：在不引入跨测试干扰的情况下加速测试运行。</li>
<li><strong>独立的浏览器上下文</strong>：在每个测试中启动自己的上下文（或页面）。跨测试的共享状态是导致不稳定的常见原因。</li>
<li><strong>明智地设置并发性</strong>：在<code>playwright.config.ts</code>中，根据可用的 CPU 和内存调整<code>workers</code>。过载环境可能会减慢或破坏运行。</li>
<li><strong>平衡性能</strong>：并行运行数十个测试是快速的，但要注意系统限制。如果测试突然变慢或失败，降低并发性或优化环境资源。</li>
</ul>
</li>
<li>
<p><strong>快速监控和分类不稳定的测试</strong></p>
<ul>
<li><strong>目标</strong>：通过解决不稳定的根源，保持对测试用例集的信任。</li>
<li><strong>即时可见性</strong>：在 CI 仪表板上及时显示测试结果。不要将不稳定的失败隐藏在静默重试背后。</li>
<li><strong>隔离策略</strong>：如果已知不稳定的测试阻塞了构建，暂时将它们移到隔离套件中。但请将此视为短期措施。</li>
<li><strong>根本原因分析</strong>：调查并修复根本问题——通常是异步竞态或环境不匹配——而不是仅仅重新运行以获得通过的结果。</li>
</ul>
</li>
<li>
<p><strong>其他注意事项</strong></p>
<ul>
<li><strong>使用 Playwright 测试运行器</strong>：依赖 Playwright 的原生运行器，以实现简化的并行化、fixture 和调试工具。</li>
<li><strong>认证流程</strong>：如果你的网站需要登录，考虑存储已登录的<code>storageState</code>，以跳过多个测试中的缓慢登录步骤。</li>
<li><strong>测试组织</strong>：按功能分组测试（例如，<code>login</code>、<code>profile</code>、<code>checkout</code>）。这使得运行或维护测试子集变得容易。</li>
</ul>
</li>
</ol>
<h3 id="zong-jie">总结</h3>
<p>Playwright 提供了强大的功能来<strong>最小化不稳定性</strong>并<strong>最大化可靠性</strong>，但成功取决于：</p>
<ul>
<li><strong>坚实的基础</strong>——使用稳定的定位器、利用自动等待和隔离测试。</li>
<li><strong>良好的工程实践</strong>——页面对象、健壮的断言和正确的并行化。</li>
<li><strong>主动调试</strong>——跟踪、日志和即时分类不稳定的测试。</li>
</ul>
<p><img src="https://playwright.itest.info/blog/say-goodbye-to-flaky-tests-playwright-best-practices-every-test-automation-engineer-must-know-9dfeb9bb5017/img/1739583563.2712410*XGF50YwM7DLkWmAE" alt="Image 13" /></p>
<h3 id="guan-li-duan-dao-duan-ce-shi-de-ce-shi-shu-ju-he-shu-ju-ku">管理端到端测试的测试数据和数据库</h3>
<p>稳定的测试只有在它们所依赖的数据一致时才有价值。即使是最健壮的测试，如果底层数据或数据库设置不一致或不可靠，也可能失败。这就是为什么管理测试数据和数据库至关重要——它确保你的测试有一个一致的环境，以提供准确的结果。让我们探讨如何有效地做到这一点。</p>
<ol>
<li>
<p><strong>使用专用（且可丢弃的）测试数据库</strong></p>
<ul>
<li><strong>切勿使用生产或共享数据库</strong>：避免污染真实环境或冒数据损坏的风险。专用的测试数据库（例如，<code>myapp_test</code>）确保数据完全在测试控制之下。</li>
<li><strong>启动新环境</strong>：使用 Docker 或其他基于容器的解决方案来启动测试数据库。测试后将其拆除。这种方法保证了每次运行都有一个干净的状态。</li>
<li><strong>数据库快照</strong>：如果你的模式很大，可以在每次运行前从已知的“干净”快照恢复，以避免从头开始重建。</li>
</ul>
</li>
<li>
<p><strong>用脚本创建已知的良好数据</strong></p>
<ul>
<li><strong>最小化所需的种子数据</strong>：只包含绝对必要的记录（用户、产品参考等）。过大的数据集会减慢测试速度并使调试复杂化。</li>
<li><strong>自动化种子脚本</strong>：将种子逻辑保存在版本控制中（SQL 文件或 Node 脚本）。这确保了本地和 CI 环境的一致性。</li>
<li><strong>环境特定的种子数据</strong>：如果你有多个测试环境（例如，QA、staging），为每个环境维护种子数据，以确保清晰性和可维护性。</li>
</ul>
</li>
<li>
<p><strong>隔离并清理每个测试的数据（在可行的情况下）</strong></p>
<ul>
<li><strong>每个测试的设置/清理</strong>：创建每个测试所需的数据，然后删除或回滚。这确保没有残留数据污染后续测试。</li>
<li><strong>事务回滚</strong>：一些框架允许你在数据库事务中运行测试，并在完成后回滚。这在端到端设置中可能很棘手，但对于集成级测试非常有效。</li>
<li><strong>唯一标识符</strong>：如果你不能完全隔离数据，生成唯一的测试用户信息（例如，<code>test-user-{timestamp}@example.com</code>）以避免冲突。</li>
</ul>
</li>
<li>
<p><strong>与并行或 CI 环境协调</strong></p>
<ul>
<li><strong>多个数据库实例</strong>：如果你并行运行测试，每个工作线程可以指向不同的测试数据库（例如，<code>myapp_test_1</code>、<code>myapp_test_2</code>），以防止覆盖。</li>
<li><strong>每个工作线程的专用容器</strong>：为了完全隔离，为每个并行工作线程启动一个完整的数据库容器。这可能会消耗大量资源，但几乎消除了跨测试污染。</li>
<li><strong>性能与并发性</strong>：监控 CI 资源使用情况。如果你看到巨大的减速或不稳定性，减少并行工作线程或优化数据访问模式。</li>
</ul>
</li>
<li>
<p><strong>模拟或存档数据库调用</strong></p>
<ul>
<li><strong>何时模拟</strong>：如果你的测试关注的是 UI 流程而不是实际的数据库验证，模拟数据库层可以减少复杂性和测试时间。</li>
<li><strong>关键端到端测试使用真实数据库</strong>：对于真正的端到端覆盖（例如，验证模式约束、索引或复杂的数据库逻辑），避免模拟。真实数据会暴露真实问题。</li>
</ul>
</li>
<li>
<p><strong>持续监控数据库健康</strong></p>
<ul>
<li><strong>迁移</strong>：在运行测试之前，始终将测试数据库迁移到最新的模式版本。模式版本不匹配是导致不稳定的主要原因。</li>
<li><strong>定期清理</strong>：如果无法使用临时容器，安排定期清理（截断表或删除旧数据），以防止测试环境随着时间的推移膨胀。</li>
<li><strong>性能跟踪</strong>：密切关注测试运行时间。如果你注意到逐渐变慢，调查数据膨胀或缺失的索引。</li>
</ul>
</li>
</ol>
<h3 id="zui-hou-si-kao">最后思考</h3>
<p><strong>测试数据管理</strong>和数据库设置的健壮方法可以放大你对<strong>Playwright</strong>的投资。结合本文涵盖的通用最佳实践（定位器、自动等待、并行执行），你的团队可以实现：</p>
<ul>
<li><strong>最小化不稳定性</strong>：即使面对复杂的有状态数据，测试也是可重复且稳定的。</li>
<li><strong>增加信心</strong>：真实的端到端覆盖确保应用程序从 UI 到数据库都能正常工作。</li>
<li><strong>更大的业务价值</strong>：更快的反馈循环和更可靠的构建转化为更高的生产力和更少的生产错误。</li>
</ul>
<h3 id="yuan-wen-di-zhi"><a href="https://medium.com/@samuel.sperling/say-goodbye-to-flaky-tests-playwright-best-practices-every-test-automation-engineer-must-know-9dfeb9bb5017">原文地址</a></h3>
Playwright自动化中的动态页面对象类加载
2025-01-22T00:00:00+00:00
2025-01-22T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/optimizing-playwright-tests-with-dynamic-page-object-loading-dfda67be81e4/
<h3 id="dong-tai-lei-jia-zai">动态类加载</h3>
<p>页面对象模型（<strong>POM</strong>）是 UI 测试自动化中最常用的设计模式之一。它在组织测试脚本、增强可维护性和促进可重用性方面非常有效。在深入探讨这个话题之前，我们先讨论一个实际用例，以了解其优势。</p>
<h4 id="chang-jing-dian-zi-shang-wu-wang-zhan-ce-shi">场景：电子商务网站测试</h4>
<p>假设你正在为一个电子商务网站项目工作。客户有一个独特的需求：同一套测试脚本应该在多个本地化站点上执行。乍一看，这似乎很简单且易于实现。但等等……真的是这样吗？</p>
<p>让我们探讨一些可能的方法来满足这一需求：</p>
<ul>
<li><strong>维护独立分支</strong><br />
为每个本地化站点编写独立的脚本，并在 Git 中为每个地区维护不同的分支。</li>
<li><strong>在页面对象类中使用条件方法</strong><br />
在页面对象类中定义方法，通过条件逻辑处理本地化，例如：</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">localization </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">en</span><span style="color:#ffffff;">'</span><span>) {
</span><span> </span><span style="color:#6d6d6d;">// 英文代码 }
</span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 其他语言代码
</span><span>}
</span></code></pre>
<p><strong>使用 OR 条件的动态定位器</strong></p>
<p>创建支持多种本地化需求的 Playwright 定位器，使用<a href="https://playwright.dev/docs/api/class-locator#locator-or">OR</a>条件匹配多个元素。</p>
<p>这些方法中的每一种都可能满足当前的需求。然而，当你退一步考虑更大的图景时——考虑到添加更多测试场景、支持更多本地化、维护代码库以及与其他服务集成等参数——你可能会注意到显著的缺点。</p>
<ul>
<li><strong>代码重复</strong>：每个本地化的独立分支导致代码重复。</li>
<li><strong>复杂性</strong>：随着应用程序的扩展，条件逻辑变得难以管理。</li>
<li><strong>可维护性差</strong>：添加新的本地化或更新现有脚本需要大量工作，使框架变得笨重。</li>
</ul>
<p>为了解决这些挑战，你可以利用<strong>装饰器</strong>、<strong>反射</strong>或<strong>动态类加载</strong>等高级概念。这些技术允许你的测试框架根据本地化设置动态引用不同的页面对象类，从而减少重复并增强灵活性。</p>
<p>在本演示中，我们将重点介绍<strong>动态类加载</strong>，展示相同的测试脚本如何在多个本地化站点上无缝工作。</p>
<h3 id="dong-tai-lei-jia-zai-ben-di-hua-zhan-dian-de-jie-jue-fang-an">动态类加载：本地化站点的解决方案</h3>
<p>动态类加载允许你根据本地化语言在运行时加载适当的页面对象类。</p>
<p><strong><em>注意</em></strong>：为了简单起见，我将保持示例代码简洁并专注于概念。在实际项目中实现时，请确保遵循所有 POM 最佳实践，并避免在页面对象方法中硬编码数据。</p>
<p>首先，我们需要通过在控制台中执行 JavaScript 代码来识别网页的本地化设置。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pageLanguage </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>document.documentElement.lang </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Not set</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">pageLanguage</span><span>)
</span><span># </span><span style="color:#e9fdac;">输出 </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">en</span><span style="color:#ffffff;">' </span><span style="color:#e9fdac;">或 </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">de</span><span style="color:#ffffff;">'
</span></code></pre>
<p>其次，为每个站点创建独立的页面对象类。我们创建一个接口类来定义方法，这将帮助你在代码补全和类型检查时使用。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export default </span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>PomTemplate {
</span><span> </span><span style="color:#8cdaff;">searchAnItem</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">item</span><span style="color:#ff5e5e;">:</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">:</span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>>
</span><span> </span><span style="color:#8cdaff;">waitToOpenInNewTab</span><span style="color:#ffffff;">()</span><span style="color:#ff5e5e;">:</span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>>
</span><span> </span><span style="color:#8cdaff;">buyItNow</span><span style="color:#ffffff;">()</span><span style="color:#ff5e5e;">:</span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>>
</span><span> </span><span style="color:#8cdaff;">enterShippingAddressAndSubmit</span><span style="color:#ffffff;">(</span><span>{}</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">:</span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>>
</span><span>}
</span></code></pre>
<p>为英文本地化区域创建一个页面对象类。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export default </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>EnLocalisedRegion </span><span style="color:#ff5e5e;">implements </span><span style="text-decoration:underline;font-style:italic;color:#8cdaff;">PomTemplate </span><span>{
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">:</span><span>Page
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">newPage</span><span style="color:#ff5e5e;">: </span><span>Page
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">:</span><span>Page</span><span style="color:#ffffff;">)</span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">searchAnItem</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">item</span><span style="color:#ff5e5e;">:</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">)</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Search for anything</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">item</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Search for anything</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Enter</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">heading</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">+ results for </span><span style="color:#ffffff;">'</span><span style="color:#ff5e5e;">+</span><span style="color:#e9fdac;">item </span><span>})).</span><span style="color:#8cdaff;">toBeVisible</span><span>()
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">clickAnyItem</span><span style="color:#ffffff;">()</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">New Listing Pair of Vintage</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">waitToOpenInNewTab</span><span style="color:#ffffff;">()</span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span>[ </span><span style="color:#e9fdac;">page1 </span><span>] </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">all</span><span>([
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForEvent</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">popup</span><span style="color:#ffffff;">'</span><span>),
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Mattel JAL Uniform Barbie doll Japan Airlines Stewardess Flight Attendant Opens</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>()
</span><span> ])
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page1
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">bringToFront</span><span>()
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">buyItNow</span><span style="color:#ffffff;">()</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Buy It Now</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Check out as guest</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">enterShippingAddressAndSubmit</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">data</span><span style="color:#ff5e5e;">:</span><span>{}</span><span style="color:#ffffff;">)</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">First name</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Thanan</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Last name</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Rahase</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Street address</span><span style="color:#ffffff;">'</span><span>, { exact: </span><span style="color:#ff8942;">true </span><span>}).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Kamraj road perumal perr</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">City</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Chennai</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">State/Province/Region</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">selectOption</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">TN</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Email</span><span style="color:#ffffff;">'</span><span>, { exact: </span><span style="color:#ff8942;">true </span><span>}).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test@gmail.com</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Confirm email</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test@gmail.com</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Phone number (required)</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">8765423891</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test-id="ADD_ADDRESS_SUBMIT"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> }
</span><span>}
</span></code></pre>
<p>为德文本地化区域创建一个页面对象类。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export default </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>DeLocalisedRegion </span><span style="color:#ff5e5e;">implements </span><span style="text-decoration:underline;font-style:italic;color:#8cdaff;">PomTemplate</span><span>{
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">:</span><span>Page
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">newPage</span><span style="color:#ff5e5e;">: </span><span>Page
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">:</span><span>Page</span><span style="color:#ffffff;">)</span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">searchAnItem</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">item</span><span style="color:#ff5e5e;">:</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">)</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Bei eBay finden</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">item</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Bei eBay finden</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Enter</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">+ Ergebnisse für ${</span><span style="color:#e9fdac;">item</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>()
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">waitToOpenInNewTab</span><span style="color:#ffffff;">()</span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span>[ </span><span style="color:#e9fdac;">page1 </span><span>] </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">all</span><span>([
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">context</span><span>().</span><span style="color:#8cdaff;">waitForEvent</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">page</span><span style="color:#ffffff;">'</span><span>),
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Sparkle Beach Barbie Puppe</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>()
</span><span> ])
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page1
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">bringToFront</span><span>()
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">buyItNow</span><span style="color:#ffffff;">()</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Sofort-Kaufen</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Als Gast kaufen</span><span style="color:#ffffff;">' </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">enterShippingAddressAndSubmit</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">data</span><span style="color:#ff5e5e;">:</span><span>{}</span><span style="color:#ffffff;">)</span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Vorname</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Thanan</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Nachname</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Rahase</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Straße und Hausnummer</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">pressSequentially</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">2812</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">addrDisplay </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.auto-address-cntr</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">addrDisplay</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>()
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">addrDisplay</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">div</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">first</span><span>().</span><span style="color:#6699cc;">click</span><span>()
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">E-Mail</span><span style="color:#ffffff;">'</span><span>, { exact: </span><span style="color:#ff8942;">true </span><span>}).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test@gmail.com</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">E-Mail bestätigen</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test@gmail.com</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Telefon (erforderlich)</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">09852 34578</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test-id="ADD_ADDRESS_SUBMIT"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> }
</span><span>}
</span></code></pre>
<p>在我的 Playwright 测试中，我使用 fixture 来处理所有页面对象类实例的创建。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">PageFixture</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">PomTemplate </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">../pages/pomTemplate</span><span style="color:#ffffff;">'
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">type </span><span>Pages </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> [</span><span style="font-style:italic;color:#fc9354;">key</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>]</span><span style="color:#ff5e5e;">: </span><span>PomTemplate
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">PageFixture</span><span>.</span><span style="color:#8cdaff;">extend</span><span>< Pages >({
</span><span>
</span><span> dynamicPage: [ </span><span style="color:#ff5e5e;">async</span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">baseURL </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">)</span><span style="font-style:italic;color:#fbdfb5;">=></span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#e9fdac;">baseURL </span><span style="color:#ff5e5e;">as </span><span style="color:#fbe3bf;">string</span><span>)
</span><span> </span><span style="color:#6d6d6d;">//获取网站语言信息
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pageLanguage </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>document.documentElement.lang </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Not set</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">flowPage </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">loadclass</span><span>( </span><span style="color:#e9fdac;">pageLanguage</span><span>, [</span><span style="color:#e9fdac;">page</span><span>])
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">flowPage</span><span>)
</span><span> }, { scope: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">'</span><span>}],
</span><span>})
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">loadclass </span><span style="color:#ff5e5e;">=async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">lang</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">args</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>[]</span><span style="color:#ffffff;">)</span><span style="font-style:italic;color:#fbdfb5;">=></span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">module </span><span style="color:#ff5e5e;">= await import</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./../pages/${</span><span style="color:#e9fdac;">lang</span><span style="color:#fbe3bf;">}_flow.page</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newClass</span><span style="color:#ff5e5e;">:</span><span>{ </span><span style="color:#ff5e5e;">new </span><span style="color:#ffffff;">(</span><span style="color:#ff5e5e;">...</span><span style="font-style:italic;color:#fc9354;">args</span><span style="color:#ff5e5e;">:</span><span style="color:#fbe3bf;">any</span><span>[]</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">:</span><span>PomTemplate} </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#e9fdac;">default</span><span>;
</span><span> </span><span style="color:#ff5e5e;">return new </span><span>newClass(</span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">args</span><span>);
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>}
</span></code></pre>
<p>代码非常简单且易于理解，我将这些页面对象类保存在一个单独的<code>pages</code>文件夹中。在运行时，这些类模块会以懒加载的方式加载，并实例化相应的对象以供测试方法使用。现在看看你的测试方法。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">./../init/pageFixture</span><span style="color:#ffffff;">'
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Dynamic loading of class files</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">eBay - Add address flow</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">dynamicPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dynamicPage</span><span>.</span><span style="color:#8cdaff;">searchAnItem</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Barbie Doll</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dynamicPage</span><span>.</span><span style="color:#8cdaff;">waitToOpenInNewTab</span><span>()
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dynamicPage</span><span>.</span><span style="color:#8cdaff;">buyItNow</span><span>()
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dynamicPage</span><span>.</span><span style="color:#8cdaff;">enterShippingAddressAndSubmit</span><span>({})
</span><span> })
</span><span>}
</span></code></pre>
<p>现在将<code>baseURL</code>设置为<code>https://ebay.com</code>或<code>https://ebay.de</code>，在执行时你可以清楚地看到正确的类被加载，脚本成功执行。</p>
<p>但请注意，动态加载需要仔细设计以确保正确的类型推断或显式类型转换。确保在运行时抛出任何错误时进行健壮的错误处理。</p>
<p>所有源代码可以在这里找到。</p>
<h3 id="jie-lun">结论</h3>
<p>动态类加载适用于需要灵活性和运行时适应性的场景。我们可以轻松地封装和解耦代码，以实现更好的设计和维护目的。</p>
<h3 id="yuan-wen-di-zhi"><a href="https://medium.com/@thananjayan1988/optimizing-playwright-tests-with-dynamic-page-object-loading-dfda67be81e4">原文地址</a></h3>
使用 Playwright JavaScript 进行 API 测试
2025-01-18T00:00:00+00:00
2025-01-18T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/master-api-testing-with-playwright-javascript-27337dd44c4d/
<p>首先，让我们从 API 测试的基础知识开始。我们将探讨 API 测试中使用的基本方法，然后深入探讨设计有效 API 测试用例的最佳实践。</p>
<p><img src="https://playwright.itest.info/blog/master-api-testing-with-playwright-javascript-27337dd44c4d/img/1739584247.688651*2qh9ovPGLW8RvcDrrqUcMQ.jpeg" alt="Image 14" /></p>
<h2 id="shi-yong-http-fang-fa-jin-xing-api-ce-shi">使用 HTTP 方法进行 API 测试</h2>
<ol>
<li><strong>GET</strong>: 用于获取数据。<br />
示例：获取 ID 为 <code>'1'</code> 的书籍的价格、作者姓名和书籍类别。</li>
<li><strong>POST</strong>: 用于创建新资源。<br />
示例：通过提供书籍名称和 ID 等详细信息来创建一本新书。</li>
<li><strong>PUT</strong>: 用于通过完全替换数据来更新现有资源的所有字段。<br />
示例：更新 ID 为 <code>'1'</code> 的书籍的价格、作者姓名和书籍类别。</li>
<li><strong>PATCH</strong>: 用于更新现有资源的特定字段，而不替换整个数据。<br />
示例：仅更新 ID 为 <code>'1'</code> 的书籍的价格。</li>
<li><strong>DELETE</strong>: 用于删除特定资源。<br />
示例：删除 ID 为 <code>'1'</code> 的书籍的所有详细信息。</li>
</ol>
<blockquote>
<p>现在，激动人心的部分来了！！Playwright JavaScript 如何发起请求。</p>
</blockquote>
<p><strong>项目设置：</strong><br />
假设您已经在本地环境中安装了 Node.js，您可以通过以下命令安装 Playwright。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> init @playwright/test
</span></code></pre>
<p><strong>如何在 Playwright 中发起 API 请求：</strong></p>
<p>使用 <code>直接使用 HTTP 方法的请求</code>：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 使用不同 HTTP 方法的示例
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">不同的 HTTP 方法</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// GET 请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#e9fdac;">url</span><span>, {
</span><span> params: { id: </span><span style="color:#fdb082;">123 </span><span>}, </span><span style="color:#6d6d6d;">// 这些会成为查询参数
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// POST 请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">postResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url</span><span>, {
</span><span> data: { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">" </span><span>}, </span><span style="color:#6d6d6d;">// 请求体
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// PUT 请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">putResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#e9fdac;">url</span><span>, {
</span><span> data: { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">updated</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// PATCH 请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">patchResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">patch</span><span>(</span><span style="color:#e9fdac;">url</span><span>, {
</span><span> data: { status: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">active</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// DELETE 请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">deleteResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">delete</span><span>(</span><span style="color:#e9fdac;">url</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// HEAD 请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">head</span><span>(</span><span style="color:#e9fdac;">url</span><span>);
</span><span>});
</span></code></pre>
<p>使用 <code>newContext</code>：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 创建一个具有共享设置的上下文
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> baseURL: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> extraHTTPHeaders: {
</span><span> Authorization: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bearer token123</span><span style="color:#ffffff;">"</span><span>,
</span><span> Accept: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 使用该上下文进行多个请求
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">usersResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/users</span><span style="color:#ffffff;">"</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">postsResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/posts</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p><strong>使用 <code>newContext</code> 的主要好处：</strong></p>
<ol>
<li><strong>可重用的配置：</strong></li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 一次性设置，随处使用
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> baseURL: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> extraHTTPHeaders: {
</span><span> Authorization: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bearer token123</span><span style="color:#ffffff;">"</span><span>,
</span><span> Accept: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> timeout: </span><span style="color:#fdb082;">30000</span><span>,
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 所有这些请求都使用相同的配置
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/users</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/orders</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/profile</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<ol start="2">
<li><strong>灵活性</strong>：当您在同一测试中需要不同的配置时</li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试多个 API</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">playwright </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 用于 API 版本 1 的上下文
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">v1Context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">playwright</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> baseURL: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.v1.example.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> extraHTTPHeaders: { </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">API-Version</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">1.0</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 用于 API 版本 2 的上下文
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">v2Context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">playwright</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> baseURL: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.v2.example.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> extraHTTPHeaders: { </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">API-Version</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2.0</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 在同一测试中使用两个上下文
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">v1Response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">v1Context</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/data</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">v2Response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">v2Context</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/data</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 清理
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">v1Context</span><span>.</span><span style="color:#8cdaff;">dispose</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">v2Context</span><span>.</span><span style="color:#8cdaff;">dispose</span><span>();
</span><span>});
</span></code></pre>
<ol start="3">
<li><strong>会话管理：</strong></li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">详细的会话处理示例</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 1. 初始尝试访问受保护的路由（应该失败）
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">initialResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/protected-data</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">initialResponse</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">401</span><span>); </span><span style="color:#6d6d6d;">// 未授权
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 2. 发起登录请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testuser</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testpass</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 3. 服务器通常会返回类似的内容：
</span><span> </span><span style="color:#6d6d6d;">// Set-Cookie: sessionId=abc123; Path=/; HttpOnly
</span><span> </span><span style="color:#6d6d6d;">// apiContext 会自动捕获这些内容
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 如果需要，您可以检查 cookies
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">响应头:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">loginResponse</span><span>.</span><span style="color:#8cdaff;">headers</span><span>());
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 4. 下一个请求会自动包含 cookie
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">protectedResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/protected-data</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">protectedResponse</span><span>.</span><span style="color:#8cdaff;">ok</span><span>()).</span><span style="color:#8cdaff;">toBeTruthy</span><span>(); </span><span style="color:#6d6d6d;">// 现在它可以工作了！
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 5. 您可以发起多个请求，所有请求共享同一个会话
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">profileResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/profile</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">ordersResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/orders</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">settingsResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/settings</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 所有这些请求都自动包含了会话 cookie
</span><span>});
</span></code></pre>
<p>何时使用直接请求和 <code>newContext</code>：</p>
<p><img src="https://playwright.itest.info/blog/master-api-testing-with-playwright-javascript-27337dd44c4d/img/1739584249.870321*rmls6FOBXBgfoV0lHg0zpQ.png" alt="Image 15" /></p>
<blockquote>
<p>然而，如果您不需要在测试用例之间共享会话，并且更倾向于为每个测试使用全新的会话，我建议使用 <code>test.use()</code> 进行全局设置的直接请求 API，例如配置 API 头信息。<code>test.use()</code> 方法会自动处理清理工作，默认情况下确保测试隔离，并通过一致的配置使测试更易于维护。然而，当使用 <code>request.newContext</code> 时，它会跨测试维护会话状态（例如 cookies 和 localStorage），直到您显式调用 <code>dispose()</code> 函数。</p>
</blockquote>
<p><strong>使用 <code>test.use()</code> 的示例代码：</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 test.use 进行测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({
</span><span> extraHTTPHeaders: {
</span><span> Authorization: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bearer token</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第一次登录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/api/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">user1</span><span style="color:#ffffff;">"</span><span>, password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pass1</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span> </span><span style="color:#6d6d6d;">// 这会创建一个 cookie 会话
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">profileResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/api/profile</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 此请求使用登录后的 cookie
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第二次登录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 此测试完全重新开始！
</span><span> </span><span style="color:#6d6d6d;">// 前一个测试的 cookies 不会被携带过来
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">profileResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/api/profile</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 这会失败，因为我们没有会话
</span><span> });
</span><span>});
</span></code></pre>
<p><strong>使用 <code>newContext</code> 的示例代码：</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 request.newContext 进行测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">context</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> extraHTTPHeaders: {
</span><span> Authorization: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bearer token</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第一次登录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/api/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">user1</span><span style="color:#ffffff;">"</span><span>, password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pass1</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span> </span><span style="color:#6d6d6d;">// 这会创建一个 cookie 会话
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">profileResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/api/profile</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 此请求使用登录后的 cookie
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第二次登录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 此测试将能够访问前一个测试的 cookies！
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">profileResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/api/profile</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 这会成功，因为会话仍然有效
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">dispose</span><span>(); </span><span style="color:#6d6d6d;">// 清理资源
</span><span> });
</span><span>});
</span></code></pre>
<p><strong>让我们看看 Playwright 请求选项的完整结构：</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">演示所有请求选项</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/endpoint</span><span style="color:#ffffff;">"</span><span>, {
</span><span> </span><span style="color:#6d6d6d;">// 1. 头信息
</span><span> headers: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Content-Type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>,
</span><span> Authorization: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bearer token123</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Custom-Header</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">value</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 2. 请求体 - 可以作为 'data' 发送
</span><span> data: {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Test User</span><span style="color:#ffffff;">"</span><span>,
</span><span> email: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test@example.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 3. 查询参数
</span><span> params: {
</span><span> page: </span><span style="color:#fdb082;">1</span><span>,
</span><span> limit: </span><span style="color:#fdb082;">10</span><span>,
</span><span> },
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 4. 超时设置
</span><span> timeout: </span><span style="color:#fdb082;">30000</span><span>, </span><span style="color:#6d6d6d;">// 30 秒
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 5. 表单数据 (multipart/form-data)
</span><span> multipart: {
</span><span> file: {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test.txt</span><span style="color:#ffffff;">"</span><span>,
</span><span> mimeType: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text/plain</span><span style="color:#ffffff;">"</span><span>,
</span><span> buffer: </span><span style="color:#fbe3bf;">Buffer</span><span>.</span><span style="color:#8cdaff;">from</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">content</span><span style="color:#ffffff;">"</span><span>),
</span><span> },
</span><span> field: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">value</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 6. 忽略 HTTPS 错误
</span><span> ignoreHTTPSErrors: </span><span style="color:#ff8942;">true</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 7. 最大重定向次数
</span><span> maxRedirects: </span><span style="color:#fdb082;">5</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 8. 在非 200 状态码时失败
</span><span> failOnStatusCode: </span><span style="color:#ff8942;">true</span><span>,
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 9. 重试失败的请求
</span><span> maxRetries: </span><span style="color:#fdb082;">3</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<p><strong>关于 Playwright 请求 API 的关键知识点：</strong></p>
<p>常见选项：</p>
<ul>
<li><code>data</code>: 请求体（自动为 JSON 字符串化）</li>
<li><code>headers</code>: 请求头</li>
<li><code>params</code>: 查询参数</li>
<li><code>timeout</code>: 请求超时时间（毫秒）</li>
<li><code>failOnStatusCode</code>: 是否在非 200 响应时抛出错误</li>
<li><code>ignoreHTTPSErrors</code>: 是否忽略 HTTPS 错误</li>
<li><code>form</code>: 用于表单提交</li>
<li><code>multipart</code>: 用于文件上传</li>
</ul>
<p>此外，如果您想对与重定向端点相关的 API 进行安全测试，可以使用 <code>followRedirects: false</code> 选项。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">未认证访问时应重定向到登录页面</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 创建一个没有任何默认头信息的新上下文
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">cleanContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 仅使用重定向头信息发起请求，并确保这是一个全新的请求
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">cleanContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">BASE_URL</span><span style="color:#fbe3bf;">}/admin/inventory</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: {
</span><span> Accept: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">X-Handle-Redirect</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> followRedirects: </span><span style="color:#ff8942;">false</span><span>,
</span><span> maxRedirects: </span><span style="color:#fdb082;">0</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">responseHeaders </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">responseStatus </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 验证重定向
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">responseStatus</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">302</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">responseHeaders</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">location</span><span style="color:#ffffff;">"</span><span>]).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/login</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 手动跟随重定向
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">responseHeaders</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">location</span><span style="color:#ffffff;">"</span><span>]) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">cleanContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">BASE_URL</span><span style="color:#fbe3bf;">}${</span><span style="color:#e9fdac;">responseHeaders</span><span style="color:#fbe3bf;">[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">location</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">]}</span><span style="color:#ffffff;">`</span><span>,
</span><span> {
</span><span> headers: { Accept: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">" </span><span>},
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginResponse</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginData </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">loginResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginData</span><span>.</span><span style="color:#e9fdac;">message</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">请登录以继续</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginData</span><span>.</span><span style="color:#e9fdac;">redirected</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> }
</span><span> } </span><span style="color:#ff5e5e;">finally </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">cleanContext</span><span>.</span><span style="color:#8cdaff;">dispose</span><span>();
</span><span> }
</span><span>});
</span></code></pre>
<p>如果没有 <code>followRedirects: false</code>，如果服务器返回 302 重定向，Playwright 会自动跟随重定向到 <code>/auth/login</code>，并且 <code>response</code> 将来自登录页面（状态码 200）。我们将无法验证是否发生了重定向。</p>
<p><strong>API 响应中的常见检查：</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 使用此上下文发起请求
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/users</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 重要的响应检查：
</span><span>
</span><span style="color:#6d6d6d;">// 1. 状态码检查
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 2. Content-Type 头信息检查
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">content-type</span><span style="color:#ffffff;">"</span><span>]).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cache-control</span><span style="color:#ffffff;">"</span><span>]).</span><span style="color:#8cdaff;">toBeDefined</span><span>();
</span><span>
</span><span style="color:#6d6d6d;">// 3. 响应结构检查
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">data</span><span>).</span><span style="color:#8cdaff;">toHaveProperty</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">users</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 模式验证
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toMatchObject</span><span>({
</span><span> id: </span><span style="color:#e9fdac;">expect</span><span>.</span><span style="color:#8cdaff;">any</span><span>(</span><span style="color:#fbe3bf;">Number</span><span>),
</span><span> name: </span><span style="color:#e9fdac;">expect</span><span>.</span><span style="color:#8cdaff;">any</span><span>(</span><span style="color:#fbe3bf;">String</span><span>),
</span><span> createdAt: </span><span style="color:#e9fdac;">expect</span><span>.</span><span style="color:#8cdaff;">any</span><span>(</span><span style="color:#fbe3bf;">String</span><span>),
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 4. 响应时间检查（性能）
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">timing </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">timing</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">timing</span><span>.</span><span style="color:#e9fdac;">responseEnd</span><span>).</span><span style="color:#8cdaff;">toBeLessThan</span><span>(</span><span style="color:#fdb082;">2000</span><span>); </span><span style="color:#6d6d6d;">// 2 秒
</span><span>
</span><span style="color:#6d6d6d;">// 5. 错误处理
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errorResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/non-existent</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">errorResponse</span><span>.</span><span style="color:#8cdaff;">ok</span><span>()) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errorBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">errorResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errorBody</span><span>).</span><span style="color:#8cdaff;">toHaveProperty</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errorBody</span><span>.</span><span style="color:#e9fdac;">error</span><span>).</span><span style="color:#8cdaff;">toHaveProperty</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">message</span><span style="color:#ffffff;">"</span><span>);
</span><span>}
</span></code></pre>
<p>要在 Playwright 中发起 API 请求，重要的是要理解 JavaScript 概念，如 <code>async/await</code>、<code>Promise.all()</code>、<code>Promise.race()</code>、<code>Promise.allSettled()</code> 和 Promise 链式调用。以下是每种类型在 API 请求中的使用示例：</p>
<ol>
<li><code>Promise.all()</code> - 当您需要并行发起多个请求并且所有请求都必须成功时使用：</li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Promise.all 示例</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 当您需要所有请求都成功时使用
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span>[</span><span style="color:#e9fdac;">usersResponse</span><span>, </span><span style="color:#e9fdac;">postsResponse</span><span>, </span><span style="color:#e9fdac;">commentsResponse</span><span>] </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">all</span><span>([
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/users</span><span style="color:#ffffff;">"</span><span>),
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/posts</span><span style="color:#ffffff;">"</span><span>),
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/comments</span><span style="color:#ffffff;">"</span><span>),
</span><span> ]);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 如果任何一个请求失败，整个 Promise.all 都会失败
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">users </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">usersResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">posts </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">postsResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">comments </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">commentsResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 现在您可以处理所有数据
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">users</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">posts</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">comments</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">error</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">其中一个请求失败:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">error</span><span>);
</span><span> }
</span><span>});
</span></code></pre>
<ol start="2">
<li><code>Promise.race()</code> - 当您想要获取最先完成的请求的结果时使用：</li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Promise.race 示例</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 用于测试故障转移场景或实现超时
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">timeoutPromise </span><span style="color:#ff5e5e;">= new </span><span>Promise(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">_</span><span>, </span><span style="font-style:italic;color:#fc9354;">reject</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">reject</span><span>(</span><span style="color:#ff5e5e;">new </span><span>Error(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">请求超时</span><span style="color:#ffffff;">"</span><span>)), </span><span style="color:#fdb082;">5000</span><span>)
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 在实际请求和超时之间进行竞争
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">race</span><span>([
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/data</span><span style="color:#ffffff;">"</span><span>),
</span><span> </span><span style="color:#e9fdac;">timeoutPromise</span><span>,
</span><span> ]);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">data</span><span>).</span><span style="color:#8cdaff;">toBeDefined</span><span>();
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">error</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">请求超时或失败:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">error</span><span>);
</span><span> }
</span><span>});
</span></code></pre>
<ol start="3">
<li><code>Promise.allSettled()</code> - 当您想知道所有请求的结果，无论成功还是失败时使用：</li>
</ol>
<p>当您发起普通请求时，如果任何请求失败，它会立即抛出错误。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">普通请求 vs Promise.allSettled</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 普通请求方法
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 如果其中任何一个失败，代码将在该点停止执行
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response1 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/orders</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { id: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">001</span><span style="color:#ffffff;">"</span><span>, item: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">有效项目</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/orders</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { id: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">002</span><span style="color:#ffffff;">"</span><span>, item: </span><span style="color:#ffffff;">"" </span><span>}, </span><span style="color:#6d6d6d;">// 无效 - 项目为空
</span><span> });
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response3 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/orders</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { id: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">003</span><span style="color:#ffffff;">"</span><span>, item: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">另一个有效项目</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 如果 response2 失败，此代码不会运行
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">所有订单已创建</span><span style="color:#ffffff;">"</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">error</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">发生错误，停止所有操作</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Promise.allSettled 方法
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">orderRequests </span><span style="color:#ff5e5e;">= </span><span>[
</span><span> { id: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">001</span><span style="color:#ffffff;">"</span><span>, item: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">有效项目</span><span style="color:#ffffff;">" </span><span>},
</span><span> { id: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">002</span><span style="color:#ffffff;">"</span><span>, item: </span><span style="color:#ffffff;">"" </span><span>}, </span><span style="color:#6d6d6d;">// 无效 - 项目为空
</span><span> { id: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">003</span><span style="color:#ffffff;">"</span><span>, item: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">另一个有效项目</span><span style="color:#ffffff;">" </span><span>},
</span><span> ];
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">results </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#8cdaff;">allSettled</span><span>(
</span><span> </span><span style="color:#e9fdac;">orderRequests</span><span>.</span><span style="color:#8cdaff;">map</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">order</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/orders</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: </span><span style="color:#e9fdac;">order</span><span>,
</span><span> })
</span><span> )
</span><span> );
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 无论是否有失败，此代码都会运行
</span><span> </span><span style="color:#6d6d6d;">// 您可以看到哪些订单成功，哪些失败
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">summary </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> successful: [],
</span><span> failed: [],
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>; </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">results</span><span>.length; </span><span style="color:#e9fdac;">i</span><span style="color:#ff5e5e;">++</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">result </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">results</span><span>[</span><span style="color:#e9fdac;">i</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">order </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">orderRequests</span><span>[</span><span style="color:#e9fdac;">i</span><span>];
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">result</span><span>.status </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fulfilled</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">&& </span><span style="color:#e9fdac;">result</span><span>.value.</span><span style="color:#8cdaff;">ok</span><span>()) {
</span><span> </span><span style="color:#e9fdac;">summary</span><span>.</span><span style="color:#e9fdac;">successful</span><span>.</span><span style="color:#6699cc;">push</span><span>({
</span><span> id: </span><span style="color:#e9fdac;">order</span><span>.id,
</span><span> response: </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">result</span><span>.value.</span><span style="color:#8cdaff;">json</span><span>(),
</span><span> });
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#e9fdac;">summary</span><span>.</span><span style="color:#e9fdac;">failed</span><span>.</span><span style="color:#6699cc;">push</span><span>({
</span><span> id: </span><span style="color:#e9fdac;">order</span><span>.id,
</span><span> error:
</span><span> </span><span style="color:#e9fdac;">result</span><span>.status </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">rejected</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">? </span><span style="color:#e9fdac;">result</span><span>.</span><span style="color:#e9fdac;">reason
</span><span> </span><span style="color:#ff5e5e;">: await </span><span style="color:#e9fdac;">result</span><span>.value.</span><span style="color:#8cdaff;">json</span><span>(),
</span><span> });
</span><span> }
</span><span> }
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">总结:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">summary</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 这可能会显示：
</span><span> </span><span style="color:#6d6d6d;">// 总结: {
</span><span> </span><span style="color:#6d6d6d;">// successful: [
</span><span> </span><span style="color:#6d6d6d;">// { id: '001', response: {...} },
</span><span> </span><span style="color:#6d6d6d;">// { id: '003', response: {...} }
</span><span> </span><span style="color:#6d6d6d;">// ],
</span><span> </span><span style="color:#6d6d6d;">// failed: [
</span><span> </span><span style="color:#6d6d6d;">// { id: '002', error: '项目不能为空' }
</span><span> </span><span style="color:#6d6d6d;">// ]
</span><span> </span><span style="color:#6d6d6d;">// }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 您仍然可以处理成功的订单
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">summary</span><span>.</span><span style="color:#e9fdac;">successful</span><span>.length).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">2</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">summary</span><span>.</span><span style="color:#e9fdac;">failed</span><span>.length).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>});
</span></code></pre>
<p>关键区别：</p>
<p><img src="https://playwright.itest.info/blog/master-api-testing-with-playwright-javascript-27337dd44c4d/img/1739584251.81127291*D44l8F8bOHJTDp9Gb5qtHQ.png" alt="Image 16" /></p>
<ol start="4">
<li><strong>Promise 链式调用</strong> - 当操作需要按顺序进行并且依赖于先前的结果时使用：</li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Promise 链式调用示例</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 第一种方法 - 使用 .then()
</span><span> </span><span style="color:#e9fdac;">request
</span><span> .</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/users</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">John</span><span style="color:#ffffff;">" </span><span>},
</span><span> })
</span><span> .</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">response</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>())
</span><span> .</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">user</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">https://api.example.com/users/${</span><span style="color:#e9fdac;">user</span><span style="color:#fbe3bf;">.id}/orders</span><span style="color:#ffffff;">`</span><span>, {
</span><span> data: { product: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">item1</span><span style="color:#ffffff;">" </span><span>},
</span><span> })
</span><span> )
</span><span> .</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">response</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>())
</span><span> .</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">order</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">order</span><span>.status).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">created</span><span style="color:#ffffff;">"</span><span>);
</span><span> })
</span><span> .</span><span style="color:#6699cc;">catch</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">error</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">错误:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">error</span><span>));
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 第二种方法 - 使用 async/await（更易读）
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">userResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.example.com/users</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">John</span><span style="color:#ffffff;">" </span><span>},
</span><span> });
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">user </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">userResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">orderResponse </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">https://api.example.com/users/${</span><span style="color:#e9fdac;">user</span><span style="color:#fbe3bf;">.id}/orders</span><span style="color:#ffffff;">`</span><span>,
</span><span> {
</span><span> data: { product: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">item1</span><span style="color:#ffffff;">" </span><span>},
</span><span> }
</span><span> );
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">order </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">orderResponse</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">order</span><span>.status).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">created</span><span style="color:#ffffff;">"</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">error</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">错误:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">error</span><span>);
</span><span> }
</span><span>});
</span></code></pre>
<p>感谢阅读，希望您觉得这篇文章有帮助。</p>
<p>如果您想了解更多关于使用 Playwright 进行 API 测试的最佳实践，我建议您阅读这篇博客。</p>
<h3 id="yuan-wen-di-zhi"><a href="https://wisdomgoody.medium.com/master-api-testing-with-playwright-javascript-27337dd44c4d">原文地址</a></h3>
《playwright自动化测试精剪全套视频》-拿走不谢！
2024-11-08T00:00:00+00:00
2024-11-08T00:00:00+00:00
虫师
https://playwright.itest.info/blog/new-video-2024/
<h2 id="2024-zui-xin-lu-zhi">2024 最新录制</h2>
<p>今年 B 站直播的录制的，基于最新的 playwright 录制，内容非常丰富，除了官方 API 讲解，还提供大量的练习示例，还有 Playwright 的各种实用配置细节。</p>
<h2 id="wu-fei-hua-jin-cou-ban">无废话紧凑版</h2>
<p>我们平时在脱稿讲话的时候，会有重复，停顿，废话、错误排查、程序运行等待等。紧凑版就是把这些全部剪掉，只保留精华的部分。录制一个小时的视频，最终剪辑完可能不到 30 分钟。这套视频我剪了整整一周，手都快废了。</p>
<h2 id="ji-yu-node-js-ban">基于 node.js 版</h2>
<p>首先，Python 版的我之前已经录制过了,B 站可以找到。</p>
<p>其次，node.js 版的 Playwright 的才能真正体现出 Playwright 的真正实力。其他版本都是残血版，即便如此，也能打 selenium。然而，Node.js 版更是提升一个维度。</p>
<p>最后，我可以负责任的说，如果你会 Python，那么这套 Node.js 版对你来说基本无门槛。作为一个多年 Pythonista ，如果要使用 Playwright，在没有特殊的要求，那么我优先会选 Node.js 版，因为确实太高效了。</p>
<h2 id="huo-de-wan-zheng-shi-pin">获得完整视频</h2>
<p>B 站地址：<a href="https://www.bilibili.com/video/BV1hNDMYgEU6">https://www.bilibili.com/video/BV1hNDMYgEU6</a></p>
<p>最后，完整视频总共 25 节，视频还有 10 节内容没有上传 B 站，想要的加 wx: zhiheng20170501。</p>
<p><img src="https://playwright.itest.info/blog/new-video-2024/wx.webp" alt="微信" /></p>
<p><img src="https://playwright.itest.info/blog/new-video-2024/course_list.webp" alt="课程列表" /></p>
Playwright 使用技巧与诀窍 #4
2024-10-20T00:00:00+00:00
2024-10-20T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-tips-and-trick-4/
<p>继续我们的提示与技巧系列，在<a href="https://playwright.itest.info/blog/playwright-tips-and-trick-4/img/1730512646.597784">#1</a>、<a href="https://playwright.itest.info/blog/playwright-tips-and-trick-4/img/1730512648.933496">#2</a>和<a href="https://playwright.itest.info/blog/playwright-tips-and-trick-4/img/1730512644.012545">#3</a>取得成功后，我们推出了最新的<a href="#">#4</a>。希望你喜欢，并且别忘了阅读代码片段中的注释。</p>
<h2 id="1-ru-he-lan-jie-duo-ge-xiang-tong-lu-you-de-qing-qiu">1. 如何拦截多个相同路由的请求？</h2>
<p>我记得在 Cypress 中，这个功能非常容易实现，但在 Playwright 中，找到这种特定场景的细节却并不简单。想象一下，你在网页应用中导航，并希望验证多个具有相同路由的请求。比如，当你打开某个产品页面时，API 会在<code>api/id/1</code>发起请求以获取数据，然后你需要再次拦截同样的请求。如何拦截这两个请求？并且验证它们的数据？</p>
<p>你可以使用<a href="https://playwright.dev/docs/api/class-page?ref=blog.martioli.com#page-wait-for-request">waitForRequest()</a>来尝试，但还有一种更灵活的方法，这将为你打开更多的可能性。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证多个相同路由的调用</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">requests</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[] </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 使用路由来区分你的网络调用
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/api/**</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 使用url().includes来过滤所需的确切调用
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">request</span><span>().</span><span style="color:#8cdaff;">url</span><span>().</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id/1</span><span style="color:#ffffff;">"</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">request</span><span>().</span><span style="color:#8cdaff;">response</span><span>())?.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#e9fdac;">requests</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">response</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> }
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 上面的代码像是一个你设置的监听器。将其放在触发网络调用之前
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">www.yourapp.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 想象这一步触发了第一个id/1调用
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">product</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 这一步触发了第二个id/1调用
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">productExtraDetails</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 现在你等待它们并执行任何所需的断言
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">requests</span><span>.length).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">2</span><span>);
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>({
</span><span> intervals: [</span><span style="color:#fdb082;">1_000</span><span>, </span><span style="color:#fdb082;">2_000</span><span>, </span><span style="color:#fdb082;">5_000</span><span>],
</span><span> timeout: </span><span style="color:#fdb082;">15_000</span><span>,
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 下面是你需要的额外步骤
</span><span style="color:#6d6d6d;">// 因为有时你的测试完成得比应用响应要快，你需要取消路由。
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">取消所有路由</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">unrouteAll</span><span>({ behavior: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">wait</span><span style="color:#ffffff;">" </span><span>});
</span><span>});
</span></code></pre>
<p>我见过这个场景的最常见用例是验证 trackers。</p>
<hr />
<h2 id="2-zai-wei-duan-yan-yuan-su-shu-liang-zhi-qian-bu-yao-shi-yong-all">2. 在未断言元素数量之前不要使用.all()</h2>
<p>假设你有一个选择器会返回多个元素，而你想遍历这些元素以断言某些值。如果你没有先断言数量，你的测试可能会出现假阳性。这就是原因。</p>
<p>如果你有 3 个元素，并执行以下代码：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">在.all()上假阳性</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expectedValues </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">a</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">b</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">c</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="color:#6d6d6d;">// 其他操作
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">allElements </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#e9fdac;">locator</span><span>).</span><span style="color:#6699cc;">all</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">item </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">allElements</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">item</span><span>).</span><span style="color:#8cdaff;">toHaveAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">any-attribute</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">expectedValues</span><span>);
</span><span> }
</span><span>});
</span></code></pre>
<p>测试将如预期工作。然而，如果由于某种原因你的选择器在页面上找不到任何元素，测试将<strong>仍然通过</strong>。因为<code>.all()</code>在数量为零时不会报错，如果没有元素，forEach 将不会运行。</p>
<p>要正确处理此情况，你必须在遍历元素之前断言元素的数量。记得使用自动重试的<a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#auto-retrying-assertions">toHaveCount</a>，而不是像(allElements.length).toBe(3)这样的语句。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">正确使用.all()</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expectedValues </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">a</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">b</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">c</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="color:#6d6d6d;">// 其他操作
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#e9fdac;">locator</span><span>)).</span><span style="color:#8cdaff;">toHaveCount</span><span>(</span><span style="color:#fdb082;">5</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">allElements </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#e9fdac;">locator</span><span>).</span><span style="color:#6699cc;">all</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">item </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">allElements</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">item</span><span>).</span><span style="color:#8cdaff;">toHaveAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">any-attribute</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">expectedValues</span><span>);
</span><span> }
</span><span>});
</span></code></pre>
<p>即使是<a href="https://playwright.dev/docs/api/class-locator?ref=blog.martioli.com#locator-all">Playwright 官方文档</a>也警告你关于<code>.all()</code>的使用，但现在你知道在未断言数量的情况下，这将不会正常工作。</p>
<blockquote>
<p>专业提示：在 Playwright 的 async/await 风格中，不建议使用 forEach。你需要使用 for...of 来避免问题。</p>
</blockquote>
<hr />
<h2 id="3-dian-ji-zhi-qian-wu-xu-duan-yan-ke-jian-xing">3. 点击之前无需断言可见性</h2>
<p>我觉得有必要提到这一点，因为我看到这种情况太频繁了。人们习惯在与元素交互之前断言其可见性，这是在任何教程或课堂上学到的行为，过去每个人都被迫学习的关键步骤。然而在 Playwright 中，有一种特定情况你不需要这样做。这种情况是对<code>click()</code>操作。以下是 Playwright 在点击元素之前所做的事情：</p>
<p><img src="https://playwright.itest.info/blog/playwright-tips-and-trick-4/img/1730512642.314689clickme.png" alt="Image 1" /></p>
<p>这些被称为<a href="https://playwright.dev/docs/actionability?ref=blog.martioli.com">可操作性检查</a>，而且不仅限于<code>click()</code>。</p>
<blockquote>
<p>一个关键点是，不要将其与 toHaveText 的断言混淆。当你使用最常见的断言方法之一<a href="https://playwright.dev/docs/api/class-locatorassertions?ref=blog.martioli.com#locator-assertions-to-have-text">toHaveText</a>时要小心，因为 toHaveText 不会在元素可见之前等待。</p>
</blockquote>
<hr />
<h2 id="4-ru-he-zhi-yun-xing-wo-zheng-zai-chu-li-de-ce-shi">4. 如何只运行我正在处理的测试？</h2>
<p>对于大多数关注<a href="https://playwright.dev/docs/release-notes?ref=blog.martioli.com">Playwright 发布说明</a>的你来说，这可能已经很熟悉，但有些人可能不知道，你可以使用一个特殊的 CLI 命令，只运行那些已更改的测试。</p>
<p>想象一下你执行了<code>git pull</code>，然后创建自己的分支开始处理某些测试，但你修复了多个测试中的一些错误或甚至创建了新的多个测试。那么你可以这样运行测试：</p>
<p><code>npx playwright test path/to/test1.spec.ts path/to/test2.spec.ts path/to/test3.spec.ts path/to/test4.spec.ts path/to/test5.spec.ts path/to/test6.spec.ts path/to/test7.spec.ts</code></p>
<p>你可以简化为：</p>
<p><code>npx playwright test --only-changed=main</code></p>
<p>这将比较你的分支与主分支，并运行所有在你的分支中被修改的测试。</p>
<hr />
<h2 id="5-ru-he-zai-playwright-zhong-yan-zheng-biao-ge-shu-ju">5. 如何在 Playwright 中验证表格数据？</h2>
<p>假设你有一个表格，需要验证渲染的值。我不是在这里验证某个单元格中是否存在某个文本，而是要验证一个确切的值是否在特定的单元格中，该单元格对应确切的列和行。</p>
<p>你可以通过创建一个辅助函数来实现。为了方便你自己运行下面的代码并轻松测试，我将所有内容放在同一个文件中，当然，你可以根据自己的方式存储工具/辅助函数。</p>
<p>那么这个辅助方法是如何工作的呢？你给它三个参数，第一个是标题（列）的文本，第二个是你要验证的行，第三个是你希望在该单元格中看到的期望文本。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">class </span><span>WebTableHelper {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">validateCellValueReferenceToHeader</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">headerText</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">rowToValidate</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">expectedValue
</span><span> </span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">elementsOfHeader </span><span style="color:#ff5e5e;">= await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">table</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">first</span><span>()
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cell</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#6699cc;">all</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">elementsOfNRow </span><span style="color:#ff5e5e;">= await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">table</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">nth</span><span>(</span><span style="color:#e9fdac;">rowToValidate</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cell</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#6699cc;">all</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>; </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">elementsOfHeader</span><span>.length; </span><span style="color:#e9fdac;">i</span><span style="color:#ff5e5e;">++</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headerValueFound </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">elementsOfHeader</span><span>[</span><span style="color:#e9fdac;">i</span><span>].</span><span style="color:#8cdaff;">innerText</span><span>();
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">headerValueFound</span><span>.</span><span style="color:#6699cc;">toLowerCase</span><span>() </span><span style="color:#ff5e5e;">=== </span><span style="color:#e9fdac;">headerText</span><span>.</span><span style="color:#8cdaff;">trim</span><span>().</span><span style="color:#6699cc;">toLowerCase</span><span>()) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">cellValue </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">elementsOfNRow</span><span>[</span><span style="color:#e9fdac;">i</span><span>].</span><span style="color:#8cdaff;">innerText</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">cellValue</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">expectedValue</span><span>);
</span><span> </span><span style="color:#ff5e5e;">return</span><span>;
</span><span> }
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">throw new </span><span>Error(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">未找到文本为 "${</span><span style="color:#e9fdac;">headerText</span><span style="color:#fbe3bf;">}" 的标题</span><span style="color:#ffffff;">`</span><span>);
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试表格</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://cosmocode.io/automation-practice-webtable</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">helper </span><span style="color:#ff5e5e;">= new </span><span>WebTableHelper(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">table</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toHaveCount</span><span>(</span><span style="color:#fdb082;">197</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">helper</span><span>.</span><span style="color:#8cdaff;">validateCellValueReferenceToHeader</span><span>(</span><span style="color:#ffffff;">"
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;">Name</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#fdb082;">3</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Ben</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>你也可以像这样扩展它以验证更多的行，但你现在知道这段代码是如何运行的。</p>
<hr />
<p>希望你喜欢这个小技巧和提示系列。每当你遇到复杂的场景或需要执行的特定操作时，记得看看 Playwright 的文档，因为它总是提供你需要的信息。也许你会找到一些你不知道的非常实用的功能。</p>
<p>关注我们的下一篇文章，看看我们会分享哪些内容！</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://blog.martioli.com/playwright-tips-and-trick-4/">https://blog.martioli.com/playwright-tips-and-trick-4/</a></p>
playwright自动化的一些最佳实践
2024-09-27T00:00:00+00:00
2024-09-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-get-best-from-playwright-in-automation/
<p>Playwright 是一个强大的网页自动化和测试工具，支持多种浏览器和平台。为了充分发挥 Playwright 的优势，你需要遵循一些最佳实践，以确保测试代码易于管理、可靠且具备可扩展性。以下是一些提升 Playwright 测试自动化的关键建议。</p>
<ol>
<li><strong>使用页面对象模型（POM）</strong></li>
</ol>
<p>页面对象模型（POM）是一种设计模式，通过将页面交互与测试逻辑分离来组织测试代码。采用 POM 可以集中管理与页面的交互逻辑，若界面发生变化，只需更新一次页面对象，而无需修改多个测试。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">class </span><span>LoginPage {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="color:#ff5e5e;">private </span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{}
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">login</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#e9fdac;">username</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#login-button</span><span style="color:#ffffff;">'</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<ol start="2">
<li><strong>避免硬编码值</strong></li>
</ol>
<p>尽量避免在测试中硬编码敏感信息或网址。使用环境变量或配置文件可以使测试更加灵活，并便于在不同环境中运行。这种做法提高了测试的可移植性，并使其能够适应环境的变化。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">config </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> use: {
</span><span> baseURL: process.env.</span><span style="color:#e9fdac;">BASE_URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;"><your app URL></span><span style="color:#ffffff;">'</span><span>,
</span><span> }
</span><span>};
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">config</span><span>;
</span></code></pre>
<ol start="3">
<li><strong>利用fixture</strong></li>
</ol>
<p>Fixture允许你设置一些公共状态，例如已登录用户或浏览器配置，这些状态可以在多个测试中重用。这样可以减少代码重复，提高测试的整洁性和执行速度。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">loggedInPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">/login</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">demo</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test123</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#login-button</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> }
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">带有登录用户的测试</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">loggedInPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 在这里编写你的登录代码
</span><span>});
</span></code></pre>
<ol start="4">
<li><strong>并行运行测试</strong></li>
</ol>
<p>并行运行测试可以节省时间，尤其是当测试用例较多时。可以通过 <code>workers</code> 设置来配置同时运行的测试数量。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">config </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> workers: </span><span style="color:#fdb082;">4</span><span>, </span><span style="color:#6d6d6d;">// 将同时运行 4 个测试用例
</span><span>};
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">config</span><span>;
</span></code></pre>
<ol start="5">
<li><strong>处理不稳定测试的重试机制</strong></li>
</ol>
<p>有时测试会因为网络问题或时间问题而失败。你可以配置测试在失败时自动重试，这样可以避免虚假失败并减少不稳定测试的数量。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">config </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> retries: </span><span style="color:#fdb082;">2</span><span>, </span><span style="color:#6d6d6d;">// 这将在失败时重试两次
</span><span>};
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">config</span><span>;
</span></code></pre>
<ol start="6">
<li><strong>使用内置断言</strong></li>
</ol>
<p>Playwright 提供内置断言，帮助你验证条件，例如文本内容或元素的可见性。利用 Playwright 的断言可以提高测试性能，并提供更好的错误报告。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">https://google.com</span><span style="color:#ffffff;">'</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#header</span><span style="color:#ffffff;">'</span><span>)).</span><span style="color:#8cdaff;">toHaveText</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Google!</span><span style="color:#ffffff;">'</span><span>);
</span></code></pre>
<ol start="7">
<li><strong>跨浏览器测试</strong></li>
</ol>
<p>Playwright 支持在不同浏览器（如 Chromium、Firefox 和 WebKit）中运行测试。确保配置测试套件在所有支持的浏览器中运行，以捕捉特定浏览器的问题。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">config </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> projects: [
</span><span> { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">chromium</span><span style="color:#ffffff;">'</span><span>, use: { browserName: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">chromium</span><span style="color:#ffffff;">' </span><span>} },
</span><span> { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">firefox</span><span style="color:#ffffff;">'</span><span>, use: { browserName: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">firefox</span><span style="color:#ffffff;">' </span><span>} },
</span><span> { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">webkit</span><span style="color:#ffffff;">'</span><span>, use: { browserName: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">webkit</span><span style="color:#ffffff;">' </span><span>} },
</span><span> ],
</span><span>};
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">config</span><span>;
</span></code></pre>
<ol start="8">
<li><strong>避免测试间的依赖</strong></li>
</ol>
<p>测试应该是独立的，能够任意顺序执行。避免编写依赖于其他测试结果或状态的测试。独立的测试更容易维护，也更可靠。</p>
<ol start="9">
<li><strong>使用显式等待而非硬等待</strong></li>
</ol>
<p>与其使用固定延迟（<code>page.waitForTimeout()</code>），不如使用显式等待，例如 <code>page.waitForSelector()</code> 或 Playwright 的内置断言。显式等待确保在满足条件时立即继续执行测试，从而提高速度和可靠性。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForSelector</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#element</span><span style="color:#ffffff;">'</span><span>, { state: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">' </span><span>});
</span></code></pre>
<ol start="10">
<li><strong>利用浏览器上下文进行测试隔离</strong></li>
</ol>
<p>浏览器上下文允许你在同一浏览器内的隔离环境中运行测试，这样可以确保测试之间不会相互干扰，例如共享 cookies 或会话，从而提高可靠性和效率。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span></code></pre>
<ol start="11">
<li><strong>优化定位器</strong></li>
</ol>
<p>使用稳定且唯一的定位器与网页元素进行交互。避免使用容易失效的定位器，如类名或索引，应该选择更可靠的选项，例如文本或 <code>data-testid</code> 属性。稳定的定位器减少了用户界面变化时需要更新测试的频率。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button:has-text("Submit")</span><span style="color:#ffffff;">'</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-testid="login-button"]</span><span style="color:#ffffff;">'</span><span>);
</span></code></pre>
<ol start="12">
<li><strong>合理配置超时</strong></li>
</ol>
<p>根据应用程序的性能调整全局或单个测试的超时设置。这可以避免由于超时而导致的测试失败，并确保测试能够灵活应对较慢的环境，例如 CI 流水线。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">config </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> timeout: </span><span style="color:#fdb082;">30000</span><span>, </span><span style="color:#6d6d6d;">// 超时设置为 30 * 1000 秒
</span><span>};
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">config</span><span>;
</span></code></pre>
<p>遵循这些最佳实践可以帮助你构建一个强大且可扩展的 Playwright 测试自动化套件。通过编写清晰、可靠且易于维护的测试，你将提升测试的速度和质量，使应用程序更加稳定，并让开发过程更为高效。</p>
Timeouts Against Flaky Tests: True Cases with Playwright
2024-09-04T00:00:00+00:00
2024-09-04T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/timeouts-against-flaky-tests-true-cases-with-playwright-9f4f28d2c391/
<h2 id="playwright-is-a-highly-reliable-tool-for-ui-testing-but-there-are-cases-when-some-tests-can-be-flaky-and-the-timeout-anti-pattern-fixes-this">Playwright is a highly reliable tool for UI testing, but there are cases when some tests can be flaky, and the timeout anti-pattern fixes this!</h2>
<p><a href="https://playwright.itest.info/blog/timeouts-against-flaky-tests-true-cases-with-playwright-9f4f28d2c391/img/1727601491.753761"><img src="https://miro.medium.com/v2/resize:fill:88:88/2*bQ4xmdoPtrdMchCQCia7iQ.png" alt="Image 1: Andrey Enin" /></a></p>
<p>Flaky tests are unreliable tests that occasionally fail, but the reason for the failures is unclear. These problems may be in the application, the environment, the testing tools used, or all of them together. Due to their complexity when interacting with the browser, UI testing tools have long been considered quite unreliable instruments among QA engineers.</p>
<p>However, when comparing tools based on <a href="https://www.selenium.dev/documentation/webdriver/">Selenium WebDriver</a> and those based on <a href="https://chromedevtools.github.io/devtools-protocol/">Crome DevTools Protocol</a> (<a href="https://pptr.dev/">Puppeteer</a> and <a href="https://playwright.dev/">Playwright</a>), the last one turns out to be more accurate.</p>
<p>Automation engineers can write bad and good tests with both tools depending on their grades. But no matter how good the tool is, the application itself and the test environment significantly impact autotests.</p>
<p>Even adhering to <a href="https://adequatica.medium.com/principles-of-writing-automated-tests-a2b72218264c">the best practices in writing autotests</a> <strong>to prevent false falls, unreliable results, and unwanted errors</strong> sometimes requires breaking established principles and setting exceptions in the code.</p>
<p>Below are a few cases that I encountered during the automation of several production services with Playwright (actually, these cases can be attributed to any other tool, too):</p>
<ol>
<li><a href="https://adequatica.medium.com/timeouts-against-flaky-tests-true-cases-with-playwright-9f4f28d2c391#d65c">UI Animations</a>;</li>
<li><a href="https://adequatica.medium.com/timeouts-against-flaky-tests-true-cases-with-playwright-9f4f28d2c391#41b5">Drawing on Canvas</a>;</li>
<li><a href="https://adequatica.medium.com/timeouts-against-flaky-tests-true-cases-with-playwright-9f4f28d2c391#851d">Sleep Timeouts in CI in the Cloud</a>.</li>
</ol>
<blockquote>
<p><strong>Disclaimer:</strong> The following may be very controversial. If you want to adopt the suggestions in the text, you should be aware of what you are doing.</p>
</blockquote>
<h2 id="1-ui-animations">1. UI Animations</h2>
<p>To prevent flakiness, Playwright has built-in auto-witing machinery inside appropriate actions/commands — it «<a href="https://playwright.dev/docs/actionability">performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected</a>».</p>
<p>But sometimes, <strong>very rarely,</strong> the Playwright may not click (or misclick) on truly visible and accessible elements.</p>
<p>The Playwright’s auto-waiting for actions is great and makes developing autotests easy. In 99%, it is absolutely accurate, but for the remaining percentages for highly customized interfaces, it may make a mistake — not because it is slow or unreliable but because it is fast and too precise.</p>
<p>This may suddenly appear during some animations of menus, <a href="https://m2.material.io/components/navigation-drawer">drawers</a>, popovers, overlays, and other pop-up elements with transitions and appearance animations. When the element is already on the screen, it is already interactable, but the animation is not over yet, and the click on the element has to go to another place. The difference in a few milliseconds/pixels makes the test flaky.</p>
<p><em>The dropdown menu is already interactable, but clicking on the menu item may lead to a misclick</em></p>
<p><strong>Solution:</strong> Add unconditional timeout before or after (depending on a test scenario) flaky click.</p>
<p>Yes, this is an anti-pattern, and <a href="https://adequatica.medium.com/principles-of-writing-automated-tests-a2b72218264c#b9cd">you should avoid pauses inside tests</a>, but sometimes, you have to sacrifice a clear code in favor of reliability, especially in CI.</p>
<h2 id="2-drawing-on-canvas">2. Drawing on Canvas</h2>
<p>Interaction with <code><[canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)></code> element can also be tricky, especially if it is interactive and contains logic. In my example, I have a map (of course, as a canvas) from a third-party vendor and need to draw an object on it by making a certain number of clicks.</p>
<p>The problem is that the element is actionable for Playwright from the moment it appears on the page, but the actual actionable state of the element is indefinable by its locator.</p>
<p>That is a timeline for loading the element on a page:</p>
<ol>
<li>Canvas element is attached and visible on the page (the element is actionable for Playwright), but nothing is rendered inside:</li>
</ol>
<p><code><canvas class="map-canvas" tabindex="0" aria-label="Map" role="region" width="1470" height="956" style="width: 1470px; height: 956px; cursor: crosshair;"></canvas></code></p>
<p>2. Canvas element has rendered content but is not yet actionable for internal logic:</p>
<p><code><canvas class="map-canvas" tabindex="0" aria-label="Map" role="region" width="1470" height="956" style="width: 1470px; height: 956px; cursor: crosshair;"></canvas></code></p>
<p>3. Canvas element is ready for action:</p>
<p><code><canvas class="map-canvas" tabindex="0" aria-label="Map" role="region" width="1470" height="956" style="width: 1470px; height: 956px; cursor: crosshair;"></canvas></code></p>
<p>As you can notice, <strong>the HTML element is the same for all states</strong>, but when Playwright is already getting ready to perform clicks, the element itself is not. The final state varies depending on the environment (local or CI run), machine (CI runner) performance, and network bandwidth.</p>
<p><strong>Solution:</strong> Add unconditional timeout before the first click.</p>
<p>However, this test case does not imply having any mocks, and it is much easier to add a single timeout rather than develop a highly complicated (and potentially fragile) solution for determining a single element’s state. Here, a few seconds in one test is sacrificed in favor of <em>relative</em> reliability.</p>
<h2 id="3-sleep-timeouts-in-ci-in-the-cloud">3. Sleep Timeouts in CI in the Cloud</h2>
<p>If your frontend application has its own timeouts (actual business logic may require freaky periods of «sleep»), then your tests may be affected by it.</p>
<p>If you test UI with a logic that contains <code>[setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)</code> in the code like this:</p>
<p>async function sleep(customTimeout: number): Promise<void> {<br />
return new Promise(resolve => setTimeout(resolve, customTimeout));<br />
}</p>
<p>Then, you may encounter the problem that <code>setTimeout()</code> can be executed longer than the specified time. It sounds crazy, but this behavior is most pronounced in CI runners (from GitHub Actions to custom runners on dedicated servers) during testing and does not reproduce in production!</p>
<p><strong>Solution:</strong> Add unconditional timeout that is at least three times longer than the logic under test.</p>
<p>If it waits for a timeout, it waits</p>
<p>Unfortunately, that is not a bug. I even consulted with DevOps and CI’s tech support, who confirmed this behavior:</p>
<blockquote>
<p>JavaScript does not guarantee that the setTimeout will work on time. Therefore, there may be many reasons…</p>
<p>This may be due to the different virtualization technologies. If GitHub has virtual machines, then processor time is distributed more justifiably than bare metal ones…</p>
<p>Perhaps the JavaScript runtime detects virtualization technology and cuts the minimum timeout to prevent exploits like [Spectre](https://en.wikipedia.org/wiki/Spectre_/(security_vulnerability) and <a href="https://en.wikipedia.org/wiki/Meltdown_/(security_vulnerability/)">Meltdown</a>…</p>
</blockquote>
<h2 id="timeout-tips">Timeout Tips</h2>
<p>Here are a few principles of organizing timeouts inside test infrastructure:</p>
<ul>
<li><strong>Make timeout’s value as constant.</strong> In my experience, 300 ms is the optimal time waiting for something on the UI.</li>
</ul>
<p>export const UNCONDITIONAL_TIMEOUT = 300;</p>
<p>Eventually, you can divide or multiply the constant depending on the test’s context.</p>
<ul>
<li><strong>Add a comment for each case of using timeout.</strong> This shows for all developers that using such a method is an exception to the «autotesting rules» and names the reason.</li>
</ul>
<p>// Wait for input to be applied in the select<br />
await page.waitForTimeout(UNCONDITIONAL_TIMEOUT);</p>
<p>Official Playwright’s documentation recommends you «<a href="https://playwright.dev/docs/api/class-page#page-wait-for-timeout">never wait for timeout in production</a>» and use it only for debugging because tests that wait for time are inherently flaky. But here, I use <code>waitForTimeout()</code> exactly for the opposite, despite the fact that <strong>tests with unconditional waits are truthfully flaky.</strong></p>
<blockquote>
<p>But how often have I been allowed to do this in production? In a recent project, I had 50 tests with more than 200 test steps and more than 120 clicks. Two tests had seven waits for timeouts, and three page objects had six timeouts. Not so much, although, of course, I would like to have zero.</p>
</blockquote>
<p>Read more:</p>
<ul>
<li><a href="https://www.browserstack.com/test-observability/features/test-reporting/what-is-flaky-test">What is Flaky Test</a>?</li>
<li><a href="https://semaphoreci.com/blog/flaky-tests-playwright">How to Avoid Flaky Tests in Playwright</a>.</li>
</ul>
如何使用Playwright的用户优先选择器提升端到端测试的稳定性
2024-08-20T00:00:00+00:00
2024-08-20T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-user-first-selectors/
<p>在使用Playwright进行网站端到端测试和监控时,选择恰当的定位器至关重要。优秀的定位器能帮助我们创建更稳定、更可靠的测试。本文将深入探讨用户优先定位器,并介绍如何通过筛选定位器来打造更健壮的测试。</p>
<h2 id="chang-jing-shi-li">场景示例</h2>
<p>让我们从一个简单的网页开始,它包含一个标题、一个按钮和一个状态更新框。当用户点击按钮时,状态会更新并伴随彩纸效果。下面我们来看看如何测试这个页面。</p>
<p><img src="https://playwright.itest.info/blog/playwright-user-first-selectors/img/1727600229.247249ZsVShkaF0TcGJItT_ScreenShot2024-08-20at7.22.22PM.png" alt="图1:简单的演示页面" /></p>
<h3 id="wei-shen-me-wo-men-yao-bi-mian-shi-yong-cssxuan-ze-qi-ding-wei-ye-mian-yuan-su">为什么我们要避免使用CSS选择器定位页面元素</h3>
<p>如果你习惯于使用jQuery等传统的自动化和页面操作工具,你可能会倾向于使用CSS选择器。确实,如果我们检查这个页面,会发现按钮上有一个可以用于选择的class。</p>
<p><img src="https://playwright.itest.info/blog/playwright-user-first-selectors/img/1727600231.109538ZsVUOEaF0TcGJIvU_ScreenShot2024-08-20at7.32.25PM.png" alt="图2:打开检查器的演示页面" /></p>
<p>我们可以用<code>await page.locator("button.button-frontpage-style").click()</code>这样的代码来点击按钮,这种方法虽然可行,但并不推荐。</p>
<p>那么,这种方法有什么问题呢?</p>
<ul>
<li>用户看页面是为了找按钮,而不是CSS类。使用CSS选择器的测试无法真实模拟用户行为。</li>
<li>如果前端开发者出于样式考虑将类名改为<code>button-hero-panel-style</code>,我们的测试就会出现假阳性,在实际没有问题的情况下报错。</li>
<li>如果按钮文本来自CMS且出现问题,变成了"HEROBUTTON_TXT",我们的测试仍会通过,尽管用户界面已经损坏,这就是假阴性。</li>
<li>基于以上原因,Playwright项目建议避免使用CSS定位器。遵循项目设定的标准是明智之选!</li>
</ul>
<h2 id="pao-qi-cssxuan-ze-qi-yong-bao-yong-hu-you-xian-ding-wei-qi">抛弃CSS选择器,拥抱用户优先定位器</h2>
<p>Playwright提供了一系列基于页面角色的<a href="https://playwright.dev/docs/locators">定位器</a>,这比基于CSS或HTML的查找方式更贴近实际功能。使用内置的<code>getByRole</code>、<code>getByText</code>和<code>getByLabel</code>等定位器,它们在测试中的表现与用户实际操作一致,无论用户使用的是小众浏览器、移动设备,还是屏幕阅读器。</p>
<h2 id="yong-hu-you-xian-ding-wei-qi-shi-zhan">用户优先定位器实战</h2>
<p>让我们用<code>getByRole</code>替换<code>page.locator</code>,通过按钮的角色和可访问名称来定位:</p>
<p><code>await page.getByRole('button', { name: 'click me' }).click();</code></p>
<p>你可以使用Chrome开发者工具来检查元素,找出它们的可访问性角色和名称。</p>
<p><img src="https://playwright.itest.info/blog/playwright-user-first-selectors/img/1727600232.792445ZsVaWEaF0TcGJI3E_ScreenShot2024-08-20at8.08.53PM.png" alt="图3:Chrome开发者工具的可访问性区域" /></p>
<p>这种方法确保了即使类名或HTML结构发生变化,测试仍然稳定可靠。</p>
<p>值得一提的是,Playwright的名称匹配不区分大小写,并支持子字符串匹配。这意味着你可以将选择器简化为<code>{ name: 'click' }</code>,即使营销团队将按钮文本改为"Click me now!",测试也能通过。</p>
<p>这种改进使得当按钮文本变成"HEROBUTTON_TXT"这样的无意义内容时,测试会如预期那样失败。</p>
<h3 id="dang-getbyrolehe-getbylabelshi-xiao-shi-gai-zen-me-ban">当<code>getByRole</code>和<code>getByLabel</code>失效时该怎么办</h3>
<p>我之所以推荐用户优先定位器,部分原因在于当你发现这些选择器在页面上不起作用时会发生什么。如果页面上的许多元素没有设置角色和标签,或者所有元素都使用相同的标签和角色,这表明你的页面存在严重的可访问性问题。没有唯一标识的元素意味着屏幕阅读器和键盘导航工具将无法正常工作,导致很多用户无法顺利浏览你的网站。这应该成为开发团队和质量保证团队讨论如何改善页面结构的契机,不仅能解决测试问题,还能提升所有用户的使用体验。</p>
<p>短期内,你可以查看Playwright提供的所有定位器,肯定能找到合适的方法定位任何元素。但我建议你将此作为未来讨论技术债务的起点。</p>
<h2 id="ru-he-chu-li-duo-zhong-pi-pei-yuan-su">如何处理多重匹配元素</h2>
<p>当一个定位器匹配到多个元素时,Playwright的严格模式会触发失败。例如,使用<code>getByRole('button')</code>可能会匹配到多个按钮。你可能会看到这样的错误信息:</p>
<p><code>Error: locator.click: Error: strict mode violation: getByRole('button', { name: 'click' }) resolved to 2 elements:</code></p>
<p>注意,在严格模式下,即使第一个结果或所有结果都能通过测试的其他部分,这个测试也会失败。解决方法是指定位置或筛选元素。</p>
<h3 id="ji-yu-wei-zhi-de-xuan-ze">基于位置的选择</h3>
<p>当首次遇到这个错误时,最简单的解决方案是指定列表中的位置。最常见的做法是选择第一个结果:</p>
<p><code>await page.getByRole('button').first().click();</code></p>
<p>我经常遇到上述错误,以至于养成了习惯,几乎每次写定位器时都会添加<code>first()</code>。😅</p>
<p>如果你想更精确地指定列表位置,可以使用:</p>
<p><code>await page.getByRole('button').nth(3).click();</code></p>
<p><code>.nth()</code>函数是从0开始索引的,所以<code>.nth(3)</code>会选择结果中的第四个项目。位置选择器虽然有效,但可能不够稳定。如果页面内容是动态的,选择第一个以外的结果可能会导致假阳性。为了确保在动态列表中准确定位到正确的元素,我们需要进行更细致的元素筛选。</p>
<h2 id="playwrightzhong-de-yuan-su-shai-xuan-ji-qiao">Playwright中的元素筛选技巧</h2>
<p>想象一个电商网站界面,展示了多个商品,但只有部分可购买。在这种情况下,仅依赖位置选择器进行测试显然不够可靠。</p>
<p><img src="https://playwright.itest.info/blog/playwright-user-first-selectors/img/1727600234.549546ZsViYUaF0TcGJI6m_ScreenShot2024-08-20at8.42.30PM.png" alt="图4:只有一个商品标记为"可购买"的电商页面" /></p>
<p>检查页面后,我们发现这些是列表项。以下是一个更智能的选择器,它首先确保商品可购买,然后再定位到"购买"按钮:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">listitem</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">filter</span><span>({ hasText: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">available</span><span style="color:#ffffff;">' </span><span>})
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">buy</span><span style="color:#ffffff;">' </span><span>});
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">button</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span></code></pre>
<p>这个测试现在能够在用户预期的情况下失败:当所有商品都显示为售罄时。</p>
<h2 id="ding-wei-qi-ce-lue-zui-jia-shi-jian">定位器策略最佳实践</h2>
<p>对于定位器,没有放之四海而皆准的解决方案。以下是一些实用建议:</p>
<ul>
<li><strong>避免依赖实现细节</strong>: 使用反映用户行为而非HTML结构的定位器。</li>
<li><strong>善用内置定位器</strong>: <code>getByRole</code>、<code>getByText</code>等定位器能显著提高测试的稳定性和可维护性。</li>
<li><strong>合理使用数据测试ID</strong>: 在复杂场景中,使用数据测试ID可以简化定位器并提高测试可靠性。但要注意,仅用于调试的页面内容应该谨慎使用。</li>
</ul>
如何在k8s上跑playwright
2024-07-28T00:00:00+00:00
2024-07-28T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/
<p>在DevOps实践中，代码通常部署在多个环境中，如开发、QA、预发布等。当使用Kubernetes在不同命名空间管理这些环境时，复杂度会迅速增加。为解决这个问题，可扩展的全面测试方案变得至关重要。本文将探讨Playwright和Kubernetes的强大组合，它将容器化浏览器测试带到现代DevOps实践的前沿。让我们一起来实践一下。</p>
<h2 id="she-zhi">设置</h2>
<p>要在Kubernetes中启动容器化的Playwright测试，请按以下步骤操作。本演示使用了一个简单的Playwright UI脚本，可参考<a href="https://github.com/thananauto/playwright-ui-typescript">这个仓库</a>。</p>
<h3 id="chuang-jian-dockerfile">创建Dockerfile</h3>
<p>让我们创建一个包含所有浏览器和Playwright依赖的Dockerfile：</p>
<pre data-lang="dockerfile" style="background-color:#191919;color:#f8f8f2;" class="language-dockerfile "><code class="language-dockerfile" data-lang="dockerfile"><span style="color:#6d6d6d;"># 使用任意Node基础镜像
</span><span style="color:#ff5e5e;">FROM</span><span> node:20-bookworm
</span><span>
</span><span style="color:#6d6d6d;"># 复制当前工作目录，请添加.dockerignore以忽略不必要的文件
</span><span style="color:#ff5e5e;">WORKDIR </span><span>/app
</span><span style="color:#ff5e5e;">COPY</span><span> . /app
</span><span>
</span><span style="color:#ff5e5e;">RUN </span><span>npm cache clean --force
</span><span style="color:#6d6d6d;"># 仅安装Chromium浏览器及其依赖
</span><span style="color:#ff5e5e;">RUN </span><span>npm install
</span><span style="color:#ff5e5e;">RUN </span><span>npx -y playwright install --with-deps chromium
</span><span style="color:#ff5e5e;">ENTRYPOINT </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/bin/sh</span><span style="color:#ffffff;">"</span><span>]
</span></code></pre>
<p>这里我们只添加了Chromium浏览器的依赖。</p>
<h3 id="gou-jian-bing-tui-song-jing-xiang-dao-docker-hub">构建并推送镜像到Docker Hub</h3>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;">#登录Docker Hub
</span><span style="color:#e9fdac;">docker</span><span> login</span><span style="font-style:italic;color:#fc9354;"> -u</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"$</span><span style="color:#fbe3bf;">{</span><span style="color:#e9fdac;">DOCKER_USERNAME</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">"</span><span style="font-style:italic;color:#fc9354;"> -p</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"$</span><span style="color:#fbe3bf;">{</span><span style="color:#e9fdac;">DOCKER_PASSWORD</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">"
</span><span>
</span><span style="color:#6d6d6d;"># 构建Docker镜像
</span><span style="color:#e9fdac;">docker</span><span> build</span><span style="font-style:italic;color:#fc9354;"> -t</span><span> playwright-ui-typescript .
</span><span>
</span><span style="color:#6d6d6d;"># 为容器仓库标记镜像
</span><span style="color:#e9fdac;">docker</span><span> tag playwright-ui-typescript </span><span style="color:#ffffff;">$</span><span>{</span><span style="color:#e9fdac;">DOCKER_USERNAME</span><span>}/playwright-ui-typescript:latest
</span><span>
</span><span style="color:#6d6d6d;"># 推送镜像到容器仓库
</span><span style="color:#e9fdac;">docker</span><span> push </span><span style="color:#ffffff;">$</span><span>{</span><span style="color:#e9fdac;">DOCKER_USERNAME</span><span>}/playwright-ui-typescript:latest
</span></code></pre>
<p>镜像推送到Docker Hub后，请在<a href="https://hub.docker.com/">hub</a>上检查。</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010955.41450121*ATbWSCLxF-NxyLhpXJ40Cw.png" alt="Image 3" /></p>
<h3 id="chuang-jian-kubernetesqing-dan-wen-jian">创建Kubernetes清单文件</h3>
<p>为了在Pod内执行测试，我们需要一个存储空间来获取和收集测试结果，即使节点或Pod不可用。为此，我们需要设置持久卷（PV）和持久卷声明（PVC）。</p>
<h4 id="1-chi-jiu-juan-pv">1. 持久卷（PV）</h4>
<p>持久卷清单支持多种卷映射选项，包括CSI、iSCSI、HostPath、NFS、FC和基于主机的存储。让我们看一个例子：</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">apiVersion</span><span>: </span><span style="color:#fbe3bf;">v1
</span><span style="color:#ff5e5e;">kind</span><span>: </span><span style="color:#fbe3bf;">PersistentVolume
</span><span style="color:#ff5e5e;">metadata</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">logs-persistent-vol
</span><span> </span><span style="color:#ff5e5e;">labels</span><span>:
</span><span> </span><span style="color:#ff5e5e;">type</span><span>: </span><span style="color:#fbe3bf;">local
</span><span style="color:#ff5e5e;">spec</span><span>:
</span><span> </span><span style="color:#ff5e5e;">storageClassName</span><span>: </span><span style="color:#fbe3bf;">manual
</span><span> </span><span style="color:#ff5e5e;">capacity</span><span>:
</span><span> </span><span style="color:#ff5e5e;">storage</span><span>: </span><span style="color:#fbe3bf;">256Mi
</span><span> </span><span style="color:#ff5e5e;">volumeMode</span><span>: </span><span style="color:#fbe3bf;">Filesystem
</span><span> </span><span style="color:#ff5e5e;">accessModes</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">ReadWriteMany
</span><span> </span><span style="color:#ff5e5e;">persistentVolumeReclaimPolicy</span><span>: </span><span style="color:#fbe3bf;">Retain
</span><span> </span><span style="color:#ff5e5e;">hostPath</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/test/output/result</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#6d6d6d;"># 如果主机上不存在此路径，将自动生成
</span></code></pre>
<p>注意：持久卷不属于集群中的任何命名空间。</p>
<h4 id="2-chi-jiu-juan-sheng-ming-pvc">2. 持久卷声明（PVC）</h4>
<p>这个持久卷声明（PVC）从主机请求存储资源，并将分配的卷映射到Pod，实现数据持久化和容器内访问。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">apiVersion</span><span>: </span><span style="color:#fbe3bf;">v1
</span><span style="color:#ff5e5e;">kind</span><span>: </span><span style="color:#fbe3bf;">PersistentVolumeClaim
</span><span style="color:#ff5e5e;">metadata</span><span>:
</span><span> </span><span style="color:#ff5e5e;">namespace</span><span>: </span><span style="color:#fbe3bf;">ui-test-job
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">logs-persistent-vol-claim
</span><span style="color:#ff5e5e;">spec</span><span>:
</span><span> </span><span style="color:#ff5e5e;">storageClassName</span><span>: </span><span style="color:#fbe3bf;">manual
</span><span> </span><span style="color:#ff5e5e;">resources</span><span>:
</span><span> </span><span style="color:#ff5e5e;">requests</span><span>:
</span><span> </span><span style="color:#ff5e5e;">storage</span><span>: </span><span style="color:#fbe3bf;">256Mi
</span><span> </span><span style="color:#ff5e5e;">volumeMode</span><span>: </span><span style="color:#fbe3bf;">Filesystem
</span><span> </span><span style="color:#ff5e5e;">accessModes</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">ReadWriteMany
</span></code></pre>
<p>注意：请检查集群的存储类名称。</p>
<h4 id="3-job">3. Job</h4>
<p>Kubernetes中的Job类似于Pod，但有特定用途。与可能失败并重启的Pod不同，Job确保任务（如执行测试）只完成一次，无论Pod的状态如何。让我们看看Job清单文件：</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">apiVersion</span><span>: </span><span style="color:#fbe3bf;">batch/v1
</span><span style="color:#ff5e5e;">kind</span><span>: </span><span style="color:#fbe3bf;">Job
</span><span style="color:#ff5e5e;">metadata</span><span>:
</span><span> </span><span style="color:#ff5e5e;">namespace</span><span>: </span><span style="color:#fbe3bf;">ui-test-job
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">ui-test
</span><span> </span><span style="color:#ff5e5e;">labels</span><span>:
</span><span> </span><span style="color:#ff5e5e;">app</span><span>: </span><span style="color:#fbe3bf;">playwright
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">ui-jobs
</span><span style="color:#ff5e5e;">spec</span><span>:
</span><span> </span><span style="color:#6d6d6d;"># 任务完成或结束后自动删除的等待时间
</span><span> </span><span style="color:#ff5e5e;">ttlSecondsAfterFinished</span><span>: </span><span style="color:#fdb082;">100
</span><span> </span><span style="color:#6d6d6d;"># 将backoffLimit设为0，否则此任务将持续执行直到状态为完成或结束
</span><span> </span><span style="color:#ff5e5e;">backoffLimit</span><span>: </span><span style="color:#fdb082;">0
</span><span> </span><span style="color:#ff5e5e;">template</span><span>:
</span><span> </span><span style="color:#ff5e5e;">metadata</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">ui-test-job
</span><span> </span><span style="color:#ff5e5e;">spec</span><span>:
</span><span> </span><span style="color:#ff5e5e;">restartPolicy</span><span>: </span><span style="color:#fbe3bf;">Never
</span><span> </span><span style="color:#ff5e5e;">containers</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">sample-ui-test
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#fbe3bf;">thanandock/playwright-ui-typescript:latest
</span><span> </span><span style="color:#ff5e5e;">args</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">-c</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test</span><span style="color:#ffffff;">"</span><span>]
</span><span> </span><span style="color:#ff5e5e;">volumeMounts</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">storage
</span><span> </span><span style="color:#ff5e5e;">mountPath</span><span>: </span><span style="color:#fbe3bf;">/app/playwright-report
</span><span> </span><span style="color:#6d6d6d;"># 容器内的报告生成路径
</span><span> </span><span style="color:#ff5e5e;">volumes</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">storage
</span><span> </span><span style="color:#ff5e5e;">persistentVolumeClaim</span><span>:
</span><span> </span><span style="color:#ff5e5e;">claimName</span><span>: </span><span style="color:#fbe3bf;">logs-persistent-vol-claim
</span></code></pre>
<h3 id="bu-shu-dao-kubernetes">部署到Kubernetes</h3>
<p>现在是时候将这些Kubernetes清单部署到集群了。在此之前，将所有文件保存在一个文件夹中，然后运行以下命令：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># 创建命名空间
</span><span style="color:#e9fdac;">kubectl</span><span> create namespace ui-test-job
</span><span>
</span><span style="color:#6d6d6d;"># 将当前上下文设置为新创建的命名空间
</span><span style="color:#e9fdac;">kubectl</span><span> config set-context</span><span style="font-style:italic;color:#fc9354;"> --current --namespace</span><span style="color:#ff5e5e;">=</span><span>ui-test-job
</span><span>
</span><span style="color:#6d6d6d;"># 部署所有清单文件
</span><span style="color:#e9fdac;">kubectl</span><span> apply</span><span style="font-style:italic;color:#fc9354;"> -f</span><span> .
</span></code></pre>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010958.5846061*2dWQ2OTbQQmJDUhKMU5OcQ.png" alt="Image 4" /></p>
<p>成功创建清单文件</p>
<h3 id="jian-kong-he-huo-qu-jie-guo">监控和获取结果</h3>
<p>通过执行<code>kubectl get all</code>命令检查任务状态</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010960.69324111*07Ske_2AhJ_zpzrV0DgQDA.png" alt="Image 5" /></p>
<p>任务的整体状态</p>
<p>使用<code>kubectl logs --follow pods/<name></code>查看容器日志</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010962.8042251*l1-nN6DRD2lK6L8t9mK69g.png" alt="Image 6" /></p>
<p>显示测试执行的容器日志</p>
<p>当Pod崩溃、初始化错误或配置错误时，<code>kubectl describe pod <name></code>命令非常有用：</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010964.89831191*rhkF9VhkqvwQT-aoGEX4ig.png" alt="Image 7" /></p>
<p>描述Pod状态</p>
<p>容器的卷通过持久卷声明与主机持久卷映射</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010967.0428981*q_T2zsCXAlGgykIM6fi_ww.png" alt="Image 8" /></p>
<p>容器卷通过PVC挂载到主机卷</p>
<p>容器内发生的事件列表</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010969.2818741*8y5bxj2Zc_-Ykn7eqtPpww.png" alt="Image 9" /></p>
<p>Pod内发生的事件列表</p>
<p>在下面的截图中，我们可以看到节点中不同部署的不同时间戳文件夹，即使Pod在一段时间后被删除，这些结果也将持久保存。</p>
<p><img src="https://playwright.itest.info/blog/containerized-browser-testing-with-playwright-on-kubernetes/_attachments/1723010971.436711*dDmsP2ysfPainjR2defSTA.png" alt="Image 10" /></p>
<p>即使Pod被删除，HTML结果仍在主机上可用</p>
<h2 id="can-kao-zi-liao">参考资料：</h2>
<ul>
<li>示例代码可在<a href="https://github.com/thananauto/playwright-ui-typescript.git">这里</a>找到。</li>
<li>有关Docker化Playwright镜像，请参考<a href="https://playwright.dev/docs/docker">文档</a>。</li>
</ul>
<h2 id="jie-lun">结论</h2>
<p>通过将Playwright容器化并部署在Kubernetes上，团队可以实现可扩展、隔离且高效的测试环境。这种方法不仅简化了测试过程，还与现代CI/CD管道无缝集成，确保以更快的速度实现高质量的发布。</p>
<p>祝学习愉快！🚀</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://medium.com/@thananjayan1988/containerized-browser-testing-with-playwright-on-kubernetes-09743e5d2362">原文</a></p>
如何为playwright项目添加强类型检查和Linting
2024-07-25T00:00:00+00:00
2024-07-25T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-type-checking-and-linting/
<p>如果你在使用端到端测试或者<a href="https://www.checklyhq.com/product/synthetic-monitoring/">综合监控</a>，很可能你正在使用<a href="https://playwright.dev/">Microsoft的Playwright</a>。如果你的工具链中包含Playwright，你可能也采用了TypeScript。这是个简单的选择，因为它提供了稳定的自动补全和类型安全。</p>
<p>有了这套配置，你就可以享受出色的开发体验(DX)，并且在重构不断增长的代码库时，不用担心因为TypeScript的类型检查而出现运行时异常，对吧？<strong>大错特错！</strong></p>
<p>这里有<a href="https://playwright.dev/docs/test-typescript#introduction">Playwright文档中的一段话</a>：</p>
<blockquote>
<p><em>注意，Playwright不会检查类型，即使存在非关键的TypeScript编译错误，它也会运行测试。</em></p>
</blockquote>
<p>没错！当你运行<code>npx playwright test</code>时，Playwright会把你的<code>*.spec.ts</code>文件转换成JavaScript并运行它们。这个过程中没有类型检查。</p>
<p>你可以自己试试。这里有一个简单的spec.ts文件示例。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ⚠️ 这个示例代码包含错误！
</span><span style="color:#6d6d6d;">// 请不要直接复制粘贴。
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test with a type error</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.dev/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">heading</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Installation</span><span style="color:#ffffff;">" </span><span>})
</span><span> ).</span><span style="color:#8cdaff;">toBeVisibles</span><span>();
</span><span>});
</span></code></pre>
<p>这个测试包含一个明显的错误，如果你运行<code>npx playwright test</code>，你会看到以下结果。</p>
<p><img src="https://playwright.itest.info/blog/playwright-type-checking-and-linting/_attachments/1723012175.111678ZqDFkR5LeNNTxcw0_playwright-missed-type-error.png" alt="图1：运行npx playwright test的结果，显示一个断言中存在拼写错误。" /></p>
<p>糟糕！<code>toBeVisible()</code>断言拼写错误，导致测试失败。TypeScript不是应该防止这种情况吗？是的，这正是类型检查的用途，但让我再强调一遍：<strong>Playwright不会检查你的类型，也没有内置的类型安全机制。</strong></p>
<p>但是当你编写端到端测试时，你确实看到了类型错误；这是怎么回事呢？</p>
<p>如果你使用现代编辑器，TypeScript通常已经集成其中，会在后台为任何打开的.ts文件运行。你编写测试时，会得到一些提示，享受自动补全功能，当出错时会看到常见的红色波浪线。</p>
<p><img src="https://playwright.itest.info/blog/playwright-type-checking-and-linting/_attachments/1723012178.803118ZqDF5x5LeNNTxcw9_typescript-error-in-editor.png" alt="图2：VS Code显示Playwright测试中的类型错误。" /></p>
<p>你的编辑器显示TypeScript错误是因为它善意地为你做了繁重的工作。而Playwright则没有为你提供保护。它编译你的代码时不关心是否存在类型不匹配或"undefined is not a function"等错误。Playwright仍会运行你的测试。没有安全保障，也没有额外帮助。</p>
<p>这个"缺失的功能"对小项目来说可能没问题，但请记住，<strong>对于大型复杂项目，类型安全是无价的</strong>。</p>
<p>想象一个高级测试套件，包含数百个测试、数十个POM（页面对象模型）以及更多实用函数：当你做一个小改动时，你可能只会在本地运行部分测试，然后推送代码到CI/CD运行所有测试。当你使用没有类型检查的TypeScript时，你只有在CI流水线启动浏览器运行测试后才会发现拼写错误和重构问题。你会浪费时间，而浪费多少取决于你项目的复杂程度。</p>
<p>让我们消除这种不确定性，重新让Playwright项目变得类型安全，并添加<a href="https://typescript-eslint.io/">typescript-eslint</a>来避免最常见的Playwright错误。</p>
<p>让我们开始吧！</p>
<p><a href="https://github.com/checkly/playwright-examples/tree/main/pwt-playwright-type-check-and-lint">最终代码在GitHub上</a></p>
<p>使用<code>npm init playwright@latest</code>命令启动新的Playwright项目后，你会发现引导项目只有很少的依赖项。值得一提的只有<code>@playwright/test</code>。尽管我喜欢精简的项目，但我更看重开发安全性。</p>
<p>让我们继续安装TypeScript作为新的<code>devDependency</code>。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># 安装`typescript`作为devDependency
</span><span style="color:#e9fdac;">npm</span><span> install</span><span style="font-style:italic;color:#fc9354;"> --save-dev</span><span> typescript
</span></code></pre>
<p>你的<code>package.json</code>现在应该如下所示。</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">name</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pwt-playwright-type-check-and-lint</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">version</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">1.0.0</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">index.js</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {},
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">keywords</span><span style="color:#ffffff;">"</span><span>: [],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">author</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">""</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">license</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ISC</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">description</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">""</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">devDependencies</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">^1.45.3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@types/node</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">^20.14.11</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">typescript</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">^5.5.4</span><span style="color:#ffffff;">"
</span><span> }
</span><span>}
</span></code></pre>
<p>安装TypeScript后，<code>tsc</code>命令在你的项目中可用，现在你可以运行<code>npx tsc --init</code>来创建<code>tsconfig.json</code>。</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">compilerOptions</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">target</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">es2016</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">module</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">commonjs</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">esModuleInterop</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">forceConsistentCasingInFileNames</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">strict</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">skipLibCheck</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true
</span><span> }
</span><span>}
</span></code></pre>
<p>创建的<code>tsconfig.json</code>包含大量配置选项和关于不同TypeScript功能的注释。我们不会在这篇文章中深入探讨TypeScript的细节，因为我们只想捕获一些简单的类型错误。保持原样即可；默认配置足够了。</p>
<p>有了新的TypeScript配置文件，你可以开始从命令行运行类型检查。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span># 运行类型检查，如果成功则运行Playwright
</span><span>npx tsc --noEmit && npx playwright test
</span></code></pre>
<p><code>tsc</code>命令会自动使用你现有的配置文件。<code>--noEmit</code>标志指示编译器不要将<code>*.ts</code>文件编译成JavaScript（Playwright仍会为你做这件事），而只执行类型检查。</p>
<p>现在看看结果！</p>
<p><img src="https://playwright.itest.info/blog/playwright-type-checking-and-linting/_attachments/1723012181.409843ZqDtGx5LeNNTxdK8_Screenshot2024-07-24at14.01.19.png" alt="图3：类型检查错误" /></p>
<p>通过在<code>playwright test</code>之前运行<code>tsc --noEmit</code>命令，你刚刚为Playwright项目添加了类型安全。TypeScript做了它擅长的事（抱怨），并告诉我们我们搞砸了。它甚至提供了我们错在哪里的建议。太棒了！</p>
<p>当然，你不会想手动运行这些命令。让我们把它们包装并拆分成npm脚本，使它们更容易区分。</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pretest</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">tsc --noEmit</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright test</span><span style="color:#ffffff;">"
</span><span> }
</span><span>}
</span></code></pre>
<p>多亏了<code>pre*</code> npm生命周期脚本约定，你可以用一个命令运行多个脚本。当你运行<code>npm run test</code>时，<code>pretest</code>脚本会先运行，只有在它成功后<code>test</code>脚本才会执行。先类型检查，然后用真实浏览器进行端到端测试。酷！</p>
<p>既然为Playwright项目添加类型检查并不难，我们就此停止吗？</p>
<p>当然不！现在我们有了<code>pretest</code>步骤，让我们也引入TypeScript linting。它将帮助我们在运行测试代码之前捕获常见的Playwright错误。相信我，额外的linting步骤绝对值得！</p>
<h2 id="wei-ni-de-playwrightxiang-mu-tian-jia-typescript-linting"><a href="https://www.checklyhq.com/blog/playwright-type-checking-and-linting#add-typescript-linting-to-your-playwright-project">为你的Playwright项目添加TypeScript linting</a></h2>
<p>类型检查有助于避免明显的运行时异常，但用户错误呢？如果你错误地使用Playwright，你的错误不会导致测试崩溃，而只是使它们失败怎么办？</p>
<p>TypeScript linting将把你的Playwright测试提升到新的水平，你再也不用眯着眼睛寻找这些难以发现的Playwright错误了。</p>
<h3 id="zui-chang-jian-de-playwrightcuo-wu-bu-zheng-que-de-promiseshi-yong"><a href="https://www.checklyhq.com/blog/playwright-type-checking-and-linting#the-most-common-playwright-mistake-incorrect-promise-usage">最常见的Playwright错误 — 不正确的Promise使用</a></h3>
<p>你可能知道Playwright依赖JavaScript的Promise。测试运行器和核心库为你隐藏了所有异步魔法，多亏了<code>async/await</code>，测试用例看起来像是在运行同步操作。</p>
<p>但在底层，有大量的异步自动等待发生，很容易遗漏<code>await</code>或者过度使用<code>await</code>。</p>
<p>让我们看另一个例子。这次包含了我在与客户交流时经常看到的两个错误。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ⚠️ 这个示例代码包含错误！
</span><span style="color:#6d6d6d;">// 请不要直接复制粘贴。
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test with incorrect promise handling</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.dev/</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 这个`await`是不必要的
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Get started</span><span style="color:#ffffff;">" </span><span>})
</span><span> </span><span style="color:#6d6d6d;">// 这个`click()`需要await
</span><span> </span><span style="color:#e9fdac;">button</span><span>.</span><span style="color:#6699cc;">click</span><span>()
</span><span>})
</span></code></pre>
<p>最常见的两个Playwright错误是<strong>将同步方法当作异步方法处理</strong>或<strong>将异步方法当作同步方法处理</strong>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// Playwright定位器是同步的，
</span><span style="color:#6d6d6d;">// 它们会在与操作和web优先断言一起使用时被评估
</span><span style="color:#6d6d6d;">// -> 它们不需要`await`
</span><span>
</span><span style="color:#6d6d6d;">// 正确
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">'</span><span>);
</span><span style="color:#6d6d6d;">// 错误
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// -----
</span><span>
</span><span style="color:#6d6d6d;">// 操作（`click()`）、web优先断言（`expect().toBeVisible()`）
</span><span style="color:#6d6d6d;">// 和`test.step()`等方法是异步的
</span><span style="color:#6d6d6d;">// -> 它们需要`await`
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">'</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">button</span><span>.</span><span style="color:#6699cc;">click</span><span>()
</span></code></pre>
<p>这些错误的棘手之处在于它们经常导致不可预测的行为。有时它们会立即使你的测试失败，有时由于某些竞态条件，它们可能会正常工作。</p>
<p>不正确的Promise处理会导致不稳定性，很容易引发一整个下午的bug追踪之旅。</p>
<p>幸运的是，一些linting可以帮上忙。</p>
<h3 id="wei-ni-de-playwrightxiang-mu-tian-jia-typescript-eslint"><a href="https://www.checklyhq.com/blog/playwright-type-checking-and-linting#add-typescript-eslint-to-your-playwright-project">为你的Playwright项目添加typescript-eslint</a></h3>
<p><code>typescript-eslint</code>是一个流行的TypeScript linter，也是<a href="https://playwright.dev/docs/best-practices#lint-your-tests">Playwright团队推荐的</a>。它能帮助解决这两个错误吗？当然可以！</p>
<p>让我们安装更多的开发依赖。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span># 安装`typescript-eslint`依赖
</span><span>npm install --save-dev eslint @eslint/js @types/eslint__js typescript-eslint
</span></code></pre>
<p><code>typescript-eslint</code>依赖于<a href="https://eslint.org/">ESLint</a>，所以我们必须安装它并添加一些额外的类型。</p>
<p>安装完这些后，我们可以按照<a href="https://typescript-eslint.io/getting-started#step-2-configuration">入门指南</a>在项目根目录创建一个<code>eslint.config.mjs</code>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// @ts-check
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">eslint </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@eslint/js</span><span style="color:#ffffff;">'</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">tseslint </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">typescript-eslint</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">tseslint</span><span>.</span><span style="color:#8cdaff;">config</span><span>(
</span><span> </span><span style="color:#e9fdac;">eslint</span><span>.</span><span style="color:#e9fdac;">configs</span><span>.</span><span style="color:#e9fdac;">recommended</span><span>,
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">tseslint</span><span>.</span><span style="color:#e9fdac;">configs</span><span>.</span><span style="color:#e9fdac;">recommended</span><span>,
</span><span>);
</span></code></pre>
<p>这个配置文件设置了ESLint和<code>typescript-eslint</code>推荐的配置。你不用担心这些细节。现在你可以开始用<code>npx eslint tests/**</code>来检查你的基于TypeScript的Playwright代码了。你会看到…</p>
<p><img src="https://playwright.itest.info/blog/playwright-type-checking-and-linting/_attachments/1723012184.098311ZqDu9B5LeNNTxdL__Screenshot2024-07-24at14.09.15.png" alt="图4：npx eslint tests/**没有结果。" /></p>
<p>…什么都没有。我们的错误在运行linting时还没有显示出来。为什么？因为我们还没有开启"高级TypeScript"linting。</p>
<p><code>typescript-eslint</code>支持所谓的<a href="https://typescript-eslint.io/getting-started/typed-linting/">"带类型信息的Linting"</a>。这个功能使linter能够理解底层的类型信息。如果你启用它，ESLint不仅会检查格式和语法规则，还会理解并评估你的代码。</p>
<p><em>要使带类型信息的linting生效，你必须在<code>eslint.config.mjs</code>文件中定义TypeScript设置。幸运的是，我们已经创建了一个<code>tsconfig.js</code>，所以你可以像下面这样指定<code>languageOptions</code>。</em></p>
<p>对Playwright项目最有价值的规则是<a href="https://typescript-eslint.io/rules/no-floating-promises/">no-floating-promises</a>和<a href="https://typescript-eslint.io/rules/await-thenable/">await-thenable</a>。让我们把它们加进去。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// @ts-check
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">eslint </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@eslint/js</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">tseslint </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">typescript-eslint</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">tseslint</span><span>.</span><span style="color:#8cdaff;">config</span><span>(
</span><span> </span><span style="color:#e9fdac;">eslint</span><span>.</span><span style="color:#e9fdac;">configs</span><span>.</span><span style="color:#e9fdac;">recommended</span><span>,
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">tseslint</span><span>.</span><span style="color:#e9fdac;">configs</span><span>.</span><span style="color:#e9fdac;">recommended</span><span>,
</span><span> {
</span><span> </span><span style="color:#6d6d6d;">// 定义TS项目配置以启用"带类型信息的linting"
</span><span> languageOptions: {
</span><span> parserOptions: {
</span><span> </span><span style="color:#6d6d6d;">// 重用现有的`tsconfig.json`
</span><span> project: </span><span style="color:#ff8942;">true</span><span>,
</span><span> tsconfigRootDir: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> },
</span><span> </span><span style="color:#6d6d6d;">// 启用对Playwright项目有益的linting规则
</span><span> rules: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint/no-floating-promises</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint/await-thenable</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> }
</span><span>);
</span></code></pre>
<p>现在如果你运行<code>npx eslint tests/**</code>，你的新linter将捕获两个最常见的Playwright错误。</p>
<p><img src="https://playwright.itest.info/blog/playwright-type-checking-and-linting/_attachments/1723012189.185555ZqDvhB5LeNNTxdMM_Screenshot2024-07-24at14.11.35.png" alt="图5：linting后显示的typescript-eslint错误。" /></p>
<p>让我们再整理一下，将linting步骤添加到我们的<code>pretest</code>脚本中来完成设置。</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pretest</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">tsc --noEmit && eslint tests/**</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright test</span><span style="color:#ffffff;">"
</span><span> }
</span><span>}
</span></code></pre>
<p>现在当你用<code>npm run test</code>运行Playwright测试时，你的代码会在浏览器打开之前进行类型检查和linting。这种方法不仅会让你的测试更安全，还能帮助你更快地发现错误。这意味着你可以停止浪费那些不必要的CI/CD分钟来发现拼写错误！</p>
<h2 id="jie-lun">结论</h2>
<p>但让我们现实一点：这些项目依赖和配置文件值得吗？</p>
<p>当运行一个小型端到端测试项目时，没有这些安全措施也可以。但当你开始扩展Playwright，编写页面对象模型，并运行大量测试时，你应该押注于所有可以获得的安全措施。</p>
<p>仅仅依赖编辑器中的一些红色波浪线无法帮助你驾驭复杂的测试设置。如果你还不相信，当你因为一次重大的代码重构而陷入无休止的CI/CD测试循环时，你就会明白这一点了。祝你好运！</p>
<p>但如果你想采用类型检查和linting，<a href="https://github.com/checkly/playwright-examples/tree/main/pwt-playwright-type-check-and-lint">你可以在GitHub上找到示例代码</a>。</p>
<p>同时请记住，<strong>对预览部署进行端到端测试并不能保证生产环境正常运行</strong>。唯一能让你安心睡觉的方法是<a href="https://www.checklyhq.com/product/synthetic-monitoring/">持续运行Playwright测试，并在出现问题时收到警报</a>。</p>
<p>不过，既然你已经看到了Checkly的博客，你应该已经知道这一点了。😉</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://www.checklyhq.com/blog/playwright-type-checking-and-linting">原文地址</a></p>
为什么page.goto()会拖慢你的playwright测试脚本
2024-07-24T00:00:00+00:00
2024-07-24T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/why-page-goto-is-slowing-down-your-playwright-test/
<p>在使用Playwright进行端到端测试时，您面临着一个两难的局面。一方面，测试的稳定性至关重要。毕竟，没有什么比一个反复无常的测试套件更让人头疼的了。另一方面，测试的执行速度同样不容忽视。试想一下，当您急需部署一个紧急的生产环境修复时，却不得不干等几个小时才能看到测试结果，这种感觉恐怕会让人抓狂。</p>
<p>那么，当您听说page.goto()这个常用指令可能正是拖慢测试速度的元凶时，您会作何感想？这个问题值得我们深思。</p>
<p>准备好一起探讨如何在保证稳定性的同时提升测试效率了吗？让我们开始这段有趣的旅程吧！</p>
<h2 id="mei-ge-playwrightjiao-ben-de-kai-shi-page-goto">每个Playwright脚本的开始 — page.goto()</h2>
<p>这里有一个非常基础的Playwright脚本。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">login</span><span>.</span><span style="color:#e9fdac;">spec</span><span>.</span><span style="color:#e9fdac;">js
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Login works</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginLink </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Login</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginLink</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginHeader </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">heading</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Login</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginHeader</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// More things to check after the login link was clicked
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>});
</span></code></pre>
<p>它导航到在playwright.config中定义的baseURL的根目录。定位一个链接，点击它，然后测试网站的UI是否相应更新（我隐藏了大部分动作和断言，因为它们对这篇文章不重要）。</p>
<p>这一切运行得很好，我相信您以前也写过类似的Playwright代码。如果您检查您的测试及其持续时间，您可能已经发现page.goto()的执行时间可能会有很大差异。</p>
<p>让我给您展示一个例子。</p>
<p><img src="https://images.prismic.io/checklyhq/Zo5o0B5LeNNTw_Lp_slow-page-goto.jpg?auto=format,compress" alt="Playwright跟踪查看器突出显示缓慢的page.goto调用" /></p>
<p>让我们仔细看看这个Playwright的跟踪记录。令人惊讶的是，page.goto()竟然耗费了整整10秒钟！更有趣的是，从跟踪查看器顶部的预览界面可以看出，在这漫长的等待过程中，示例网站其实一直都是可用状态。</p>
<p>要知道，这还只是一个本地运行的、超级快速的电子商务网站的简单测试用例。想象一下，如果我们要测试一个中等规模商店的所有核心功能，很可能就需要运行上百个测试。这样一来，每个测试中的这点小延迟累积起来，就可能在您的CI/CD流水线中增加超过15分钟的等待时间！</p>
<p>（当然，您可以通过并行运行测试来缩短总体等待时间，但这并不能改变每个测试都被不必要地拖慢的事实。）</p>
<p>那么问题来了，在这段时间里，我们到底在等待什么呢？这个问题值得我们深入探讨。</p>
<h2 id="page-goto-he-loadshi-jian">page.goto()和load事件</h2>
<p>如果您查看Playwright文档，您会发现默认情况下，page.goto()等待load事件。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// is the same as
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, {waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">load</span><span style="color:#ffffff;">"</span><span>});
</span></code></pre>
<p>load事件是什么？MDN是这样说的。</p>
<blockquote>
<p>load事件在整个页面加载完成时触发，包括所有依赖资源，如css、javascript、iframe和图像。</p>
</blockquote>
<p>让我们仔细思考一下。每当您调用page.goto()时，您都在等待所有css文件、js脚本、iframe和图像加载完成。总之，您在等待所有内容(!)加载完成后才运行您的测试。</p>
<p>我在复盘上面无脑等待的用例时，我发现网站上某个SVG图像的加载延迟了所有的测试行为。为什么这个文件如此缓慢？我不知道，但资源加载时间较长的可能性总是存在。</p>
<p><img src="https://images.prismic.io/checklyhq/Zo5qnB5LeNNTw_M5_logo-svg-10-seconds.jpg?auto=format,compress" alt="Playwright跟踪查看器突出显示一个加载时间为10秒的logo.svg文件。" /></p>
<p>现在，这只是一个小型演示应用。考虑一个成熟的电商站点；那里将有数百个图像，更不用说所有来自"某处"的js脚本了。对于这样的网站，page.goto()的默认配置将等待所有资源通过网络加载完成之后才点击第一个按钮。这是最好的方式吗？</p>
<h2 id="nin-de-yong-hu-bu-hui-deng-dai-suo-you-de-httpqing-qiu-wei-shen-me-nin-de-ce-shi-yao-deng-ni">您的用户不会等待所有的http请求 — 为什么您的测试要等呢？</h2>
<p>让我们换个角度思考这个问题...</p>
<p>为什么我们要使用真实浏览器进行端到端测试和网站监控呢？显然，我们的首要目标是确保网站和基础设施运行正常。但更重要的是，我们希望通过模拟真实用户的行为来实现这一目标。毕竟，这才是端到端测试的真正意义所在，不是吗？</p>
<p>想象一下，您的普通用户会等待浏览器地址栏上的加载图标完全消失后才开始点击页面元素吗？恐怕不会。我敢打赌，大多数访客看到"加入购物车"按钮的那一刻就会迫不及待地点击，根本不会关心网站是否已经完全加载完毕。人们的行为往往是看到什么就点什么，立即与网站进行互动。</p>
<p>这就是为什么在编写Playwright脚本时，我们应该尽可能地模仟这种自然的人类行为。毕竟，我们的测试越接近真实用户的操作，就越能发现实际环境中可能出现的问题。</p>
<p>那么，回到我们的问题：在测试用例中，我们应该如何更好地模拟用户访问页面的行为呢？这个问题值得我们深入思考，因为它可能是提高测试效率和真实性的关键。</p>
<p>page.goto()的等待行为可以通过waitUntil属性进行配置。您可以定义四种waitUntil设置。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// Wait until the HTML starts loading.
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, {waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">commit</span><span style="color:#ffffff;">"</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// Wait until the HTML is parsed
</span><span style="color:#6d6d6d;">// and deferred scripts (`<script deferred>` and `<script type="module">`) are loaded.
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, {waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// Wait until all initially included resources are loaded.
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, {waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">load</span><span style="color:#ffffff;">"</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// Wait until every resource is loaded and the network is silent for 500ms.
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, {waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">networkidle</span><span style="color:#ffffff;">"</span><span>});
</span></code></pre>
<p>当您查看这些waitUntil选项时，除了commit之外的所有选项都严重依赖网络和资源的加载。这意味着除了commit之外的所有选项都依赖网页上的具体资源，当一个请求卡在网络层时可能会拖慢您的测试速度。</p>
<p>这些选项在速度上有哪些差异？以下是我的示例测试用例的结果。</p>
<table><thead><tr><th>"waitUntil" 选项</th><th>"page.goto" 执行时间</th></tr></thead><tbody>
<tr><td>commit</td><td>62ms</td></tr>
<tr><td>domcontentloaded</td><td>159ms</td></tr>
<tr><td>load</td><td>10.1s</td></tr>
<tr><td>networkidle</td><td>12.6s</td></tr>
</tbody></table>
<p>当然，这些数据是我从本地测试站点上搜集到的。但绝对值并不重要。重要的是看waitUntil选项之间的差异。</p>
<p>不出所料，commit等待选项是最快的goto()配置，因为它除了初始HTML的第一个字节外不等待任何与资源相关的内容。networkIdle是迄今为止最慢的，因为它等待每个资源加载完成，再等500ms。</p>
<p>但这里有一件有趣的事情：无论waitUntil选项如何，所有这些测试都成功了。这个简单的测试用例的总体测试持续时间从大约10秒到25秒不等，但测试结果都是绿色的。</p>
<p>这是怎么回事，它是如何工作的？</p>
<h2 id="bian-xie-bu-yi-lai-wang-luo-de-kuai-su-ce-shi">编写不依赖网络的快速测试</h2>
<p>如果您要测试的网站本身就不稳定，那么想要创建稳定和快速的测试用例集合几乎是不可能的。就像俗话说的，巧妇难为无米之炊 — 不稳定的应用程序注定难以产生可靠的测试。</p>
<p>此外，如果您的网站用户体验糟糕，或者采用了不良的<a href="https://playwright.dev/docs/navigations#hydration">Hydration Patterns</a>，您的测试就不得不使用各种变通方法来勉强通过最基本的功能测试。当然，最理想的做法是直接修复这些应用程序问题，但我们都知道，现实中这往往不太容易做到。</p>
<p>另一方面，如果您在编写Playwright脚本时没有站在用户的角度思考，那么您同样可能会导致测试的不稳定。要想加快测试速度并提高其稳定性，最好的方法是利用自动等待机制和Web优先断言，让Playwright自己去处理其他细节问题。</p>
<p>文章开头的示例脚本中包含了一个看似"简单"的click()指令。实际上，这个click()指令是您的得力助手，因为它背后蕴含着一系列神奇的可操作性检查。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// this click() will wait for the login to be
</span><span style="color:#6d6d6d;">// - visible
</span><span style="color:#6d6d6d;">// - stable, as in not animating or completed animation
</span><span style="color:#6d6d6d;">// - able to receives events as in not obscured by other elements
</span><span style="color:#6d6d6d;">// - enabled
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginLink</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span></code></pre>
<p>每次您使用click()、fill()或其他操作指令时，Playwright都会智能等待，直到目标元素完全就绪，能够响应用户操作。这意味着元素已经完成渲染，变得可见且稳定，并且处于可用状态。</p>
<p>如果您的应用程序设计良好，能够快速呈现出可交互的界面元素，Playwright就能以最快的速度与这些元素进行交互。在这种情况下，您根本不需要额外等待任何网络请求完成。</p>
<p>类似地，当您使用Web优先的断言方式时，Playwright会自动等待，直到用户界面达到您预期的状态。这样一来，您就不必再专门去等待某个特定UI状态背后的HTML加载或API调用完成。</p>
<p>这种方法不仅简化了测试流程，还能更好地模拟真实用户的操作行为，从而提高测试的有效性和可靠性。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// wait until this element is visible
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginHeader</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span></code></pre>
<p>如果您能够充分利用这两个Playwright的核心原则，您就可以不再过分关注网络层的细节，而是将注意力集中在真正重要的方面 — 用户界面的交互操作及其导致的状态变化。这种方法几乎消除了手动等待网络事件和请求的需求，让您的测试更加高效和可靠。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">login</span><span>.</span><span style="color:#e9fdac;">spec</span><span>.</span><span style="color:#e9fdac;">js
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Login works</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// don't wait for all the resources to be loaded
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, {waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">commit</span><span style="color:#ffffff;">"</span><span>});
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// let Playwright wait for this link to be visible
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginLink </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Login</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginLink</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginHeader </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">heading</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Login</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">loginHeader</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// More things to check after the login link was clicked
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>});
</span></code></pre>
<p>让我们再看看调整后的脚本。我们不再傻等网络事件，而是聪明地等待UI状态变化。Playwright会耐心等到"Login"链接出现，然后立即点击。这个小小的改动让我们的测试速度提升了10秒，同时还能完整覆盖核心登录功能。这不就是双赢吗？</p>
<h2 id="dan-shi-shi-shi-zong-you-li-wai">但是...世事总有例外</h2>
<p>话说回来，在某些情况下，关注网络状况确实很有必要。</p>
<p>在进行端到端测试时，我们经常会在预发布环境上进行测试，以防止核心功能出现回归。理想情况下，预发布环境应该是生产环境的完美复制品。但现实往往不尽如人意。预发布环境通常部署在不同的基础设施上，前端也常常会加载不同的资源来进行跟踪、用户交互和监控。</p>
<p>这些差异有时是可以接受的，毕竟您的主要目的是测试新功能并避免回归。然而，当您将Playwright用于网站监控时，密切关注所有加载的资源就显得尤为重要，这可以帮您及时发现潜在的生产问题。我亲眼见过不止一次，第三方脚本导致生产环境崩溃的情况。</p>
<p>举个例子，我们在Checkly使用Playwright监控checklyhq.com。和大多数营销网站一样，我们也集成了Intercom和各种分析工具。有一天，我们所有的Playwright线上检查突然全部失败了。原因是Intercom在预期时间内没能加载完成。page.goto()的执行时间超过了一分钟，就因为一个JavaScript片段超时了。</p>
<p>那么，checklyhq.com是不是真的出问题了呢？其实没有，网站的核心功能一切正常。但是，及时发现Intercom出现问题难道不是件好事吗？当然是！</p>
<p>通过监控网络层，您可以获得关于网站整体健康状况和性能的宝贵信息。这些洞察可以帮助您更全面地了解您的网站运行情况，及时发现并解决潜在问题。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// fail when all resources aren't loaded after 10 seconds
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>, { waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">load</span><span style="color:#ffffff;">"</span><span>, timeout: </span><span style="color:#fdb082;">10_000 </span><span>});
</span></code></pre>
<h2 id="zong-jie">总结</h2>
<p>那么，您是否应该立即将所有的page.goto()操作改为commit或domcontentloaded，以在CI/CD中节省时间呢？答案并不是简单的是或否，而是要"具体情况具体分析"。</p>
<p>如果您特别看重测试的执行速度，需要运行大量测试，并且采用了以用户为中心、具有自动等待功能的测试方法，那么不等待所有资源加载确实能为您节省可观的时间 — 可能是几分钟，甚至几小时。不妨试一试，您会发现Playwright在判断何时点击以及点击什么方面相当智能。</p>
<p>不过，请记住，仅仅看到预览部署的绿灯并不意味着万事大吉。真正重要的是确保生产环境的稳定运行。要做到这一点，持续测试您的线上产品是必不可少的。这正是合成监控大显身手的地方。</p>
<p>在使用Playwright进行网站测试和监控时，密切关注那些加载缓慢的网络依赖可能会带来意想不到的收益。一旦您的基础设施、第三方资源或应用程序代码出现问题，您将能第一时间察觉。这才是让您晚上安心入睡的真正保障。</p>
<p>当然，最终如何取舍，还是需要您根据自身情况来决定。</p>
<p>如果您有任何疑问或想法，欢迎来Checkly社区和我们交流。我可以向您保证，我们是一群热情友好的伙伴，随时欢迎您的加入！</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://www.checklyhq.com/blog/why-page-goto-is-slowing-down-your-playwright-test/">原文地址</a></p>
<p>发布时间：2024-07-24</p>
如何安装playwright 2024版本
2024-07-23T00:00:00+00:00
2024-07-23T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-install-playwright-in-cn/
<h2 id="shi-pin-ban-ben">视频版本</h2>
<h3 id="youtube">Youtube</h3>
<div class="w-full md:w-1/3 mx-auto">
<iframe width="360" height="315" src="https://www.youtube.com/embed/FimMK3jszAo?si=N9aN6KZaIH2Rgn2r" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<h3 id="b-zhan">B 站</h3>
<div class="w-full md:w-1/3 mx-auto">
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1006395903&bvid=BV1Zx4y1W7CZ&cid=1624499655&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
<p>这几天录视频，在 windows 电脑上试着去安装了一下 javascript 版本的 playwright，发现有点难度，主要是网络联通性有挑战，这里简单记录一下。</p>
<h2 id="an-zhuang-nodejs">安装 nodejs</h2>
<p>首先我们需要安装 <a href="https://nodejs.org/zh-cn">nodejs</a>，这里略过。</p>
<p>我的安装的版本是<code>Node.js v20.15.1</code>。</p>
<h2 id="zui-zhong-yao-de-bu-zou-she-zhi-npm-yuan">最重要的步骤：设置 npm 源</h2>
<p><strong>对于国内用户来说，这一步至关重要，是解决网络联通性的关键。</strong></p>
<p>打开命令行，输入下面的命令。</p>
<p>如果你对命令行不熟悉，那么 win 11 系统里，随便打开 1 个文件夹，鼠标右键打开系统菜单，选择<code>在终端中打开</code>就可以了。</p>
<p>我们在终端里输入下面的命令，大部分情况下，不需要我们手动一个字符一个字符输入，只要在 playwright 中文站的安装教程里拷贝具体的命令，然后右键点击终端就可以粘贴了。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> config set registry https://registry.npmmirror.com
</span></code></pre>
<h2 id="shi-yong-npm-an-zhuang-playwrgiht">使用 npm 安装 playwrgiht</h2>
<p>如果你对命令行熟悉的话，可以新建 1 个文件夹 <code>demo</code>，然后从命令行里<code>cd</code>进去，再运行下面的命令。</p>
<p>如果你对命令行不熟悉，那么 win 11 系统里，我们可以新建 1 个文件夹 <code>demo</code>，进入 demo 文件夹，鼠标右键打开系统菜单，选择<code>在终端中打开</code>就可以了。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> init playwright@latest
</span></code></pre>
<h3 id="an-zhuang-xuan-xiang">安装选项</h3>
<p>命令运行时会出现 4 个问题，全部按 Enter 选择默认值</p>
<ul>
<li>✔ Do you want to use TypeScript or JavaScript? · TypeScript</li>
<li>✔ Where to put your end-to-end tests? · tests</li>
<li>✔ Add a GitHub Actions workflow? (y/N) · false</li>
<li>✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true</li>
</ul>
<p>等待一段时间后就可以看到 playwright 已经安装成功了。</p>
<h2 id="an-zhuang-vscode-yi-ji-playwright-cha-jian">安装 vscode 以及 playwright 插件</h2>
<p>这一步不是必须的，但如果你不熟悉命令行的话，那么还是非常推荐的。</p>
<p>在 vscode 插件市场搜索 playwright 插件，安装微软官方出的那个插件，一般情况下就是排第 1 位的那个。</p>
<h2 id="shi-yong-vscode-da-kai-demo-wen-jian-jia">使用 vscode 打开 demo 文件夹</h2>
<p>首先用 vscode 打开我们刚才新建的 demo 项目，然后在进行下面的配置。</p>
<ul>
<li>projects 选择 chrome</li>
<li>settings 里面选择<code>show trace viewer</code></li>
</ul>
<p>打开<code>tests</code>文件夹下的<code>example.spec.ts</code>文件。</p>
<p>然后点击<code>test</code>方法旁的三角形按钮，就可以运行用例了。</p>
<h2 id="yun-xing-yong-li">运行用例</h2>
<p>在运行默认用例时可能因为网络原因出现失败的情况，这时候可以把第 1 个用例改一下。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">has title</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.itest.info/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Expect a title "to contain" a substring.
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveTitle</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Playwright</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span></code></pre>
<p>我们把用例里的<code>playwrgith.dev</code>改成<code>playwright.itest.info</code>，再次运行，不出意外的话用例会成功运行通过 ✅。</p>
<h2 id="si-kao-ti">思考题</h2>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveTitle</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Playwright</span><span style="color:#ffffff;">/</span><span>);
</span></code></pre>
<p>用中文去说明这个断言的具体检查了什么内容？</p>
我的playwright项目实战初体验
2024-07-19T00:00:00+00:00
2024-07-19T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/write-ui-test-case-for-brand-new-project/
<p>2023 年初接了一个新项目，配套有个 web 管理后台页面，尽管需求一直在迭代以及测试时间相对不宽裕，我还是决定写点自动化用例作为功能测试的补充和回归测试的输入，顺便玩一下 playwright，不在真是项目中使用一种技术其实是很难对这种技术产生深刻理解的。</p>
<h2 id="xiang-mu-jie-shao">项目介绍</h2>
<p>管理后台是前后端分离的，前端用的 react 加上蚂蚁的前端组件库，后端是基于 golang 构建的微服务。其实这种项目更适合做接口测试，ui 自动化作为补充就好了。</p>
<h2 id="ji-shu-xuan-xing">技术选型</h2>
<p>这点很清楚，之前 benchmark 过，playwright 比 cypress 性能要好，所以直接选 playwright，另外 playwright 的 python 版本完全安装之后自带了 pytest 和一系列断言，基本上开箱即用，非常方便。另外为什么不用 js 而用 python，主要是因为我用 python 写了一点接口用例，有些数据库操作的代码可以稍微复用一下，所以统一起见用 python+playwright</p>
<h2 id="di-yi-ge-nan-dian-deng-lu">第一个难点：登录</h2>
<p>管理后台接的是 google auth，由于我的账号开启了二次验证，需要收验证码，所以从 ui 上输入用户名和密码登录就走不通了。不过登录的原理基本相同，就是往 cookie 里写一些东西，后面所有的请求都自动带 cookie 到后端，后端通过之前写的那些东西就可以判断用户是谁，什么时候登录失效等。知道了原理后面就是随便试试了，我的代码大概是这样写的</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">login</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>):
</span><span> page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">url</span><span style="color:#ffffff;">"</span><span>)
</span><span> page.</span><span style="color:#e9fdac;">evaluate</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">()=> document.cookie="</span><span>{</span><span style="color:#e9fdac;">COOKIE</span><span>}</span><span style="color:#fbe3bf;">"</span><span style="color:#ffffff;">'</span><span>)
</span></code></pre>
<p>其实就是先访问被测页面，然后自动跳到登录页面，这时候去用 js 设置 cookie，之后再访问一次被测页面就可以自动登录了。</p>
<p>cookie 的话可以从浏览器的开发者工具里直接拷贝出来，因为是测试环境，所以 cookie 的有效期很长，基本可以放心使用。</p>
<p>至于如何定期刷新 cookie 其实也不难搞，写个浏览器插件，每次打开被测页面的时候就把 cookie 发到一个自建后台服务，这个服务就是把 cookie 存到 redis 里，在测试用例里直接访问 redis 拿最新的 cookie 就好了。</p>
<h2 id="ding-wei-you-dian-ma-fan">定位有点麻烦</h2>
<p>作为熟练工，定位对我来说应该不会是大问题，然而现在的前端组件层级嵌套厉害，html 的表意性不强，而且 id，name 等比较有标志性的属性也不是很多，踌躇良久之后我决定请前端同学在一些关键的组件上面加上 id 或者 name，尽管他们不是很愿意，但是我倚老卖老，还是让他们从了。</p>
<p>playwright 的元素定位策略非常灵活，从这几天的使用情况来看，建议还是 css 加 xpath，如果你 css 不熟那就直接用 xpath，优点是从浏览器上就可以直接复制 xpath，缺点是复制的 xpath 稳定性很差，页面结构稍微发生一些变化就不可用了。</p>
<p>最后就是 playwright 有录制的功能，我一般是在调试暂停的时候顺便打开录制，看看 playwright 自己录制的定位器是怎么样的，感觉大多数时候 playwright 的录制结果很靠谱，不比自己写要差。playwright 生成的代码里 text 属性用的相对比较多点，对于多语言的系统来说需要慎用。</p>
<h2 id="ri-qi-xuan-ze-qi">日期选择器</h2>
<p>大人，大清早就亡了。</p>
<p>很多年前我们在处理日期选择器的时候基本上是用 js 来 set 相应的 input 的 value 值，可以做到不管 ui 怎么样，我想设置成什么值都可以的效果。</p>
<p>然而，这次时代变了。ant 框架的日期选择器直接设置 value 值并没有什么用。我尝试过打开日期选择器选择今天的日期，因为今天的日期会高亮，所以选起来比较容易，但这样就做不到选择任意一天的效果，对于写用例来说相当不友好。</p>
<p>最后经过一番尝试，还是使用黑科技，模拟键盘在日期框上输入相应的日期，模拟键盘按下回车键，代码如下。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">select_time_range</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">start</span><span>, </span><span style="font-style:italic;color:#fc9354;">end</span><span>):
</span><span> start_str </span><span style="color:#ff5e5e;">= </span><span>start.</span><span style="color:#e9fdac;">strftime</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fdb082;">%Y</span><span style="color:#fbe3bf;">-</span><span style="color:#fdb082;">%m</span><span style="color:#fbe3bf;">-</span><span style="color:#fdb082;">%d</span><span style="color:#fbe3bf;"> 00:00:00</span><span style="color:#ffffff;">'</span><span>)
</span><span> end_str </span><span style="color:#ff5e5e;">= </span><span>end.</span><span style="color:#e9fdac;">strftime</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fdb082;">%Y</span><span style="color:#fbe3bf;">-</span><span style="color:#fdb082;">%m</span><span style="color:#fbe3bf;">-</span><span style="color:#fdb082;">%d</span><span style="color:#fbe3bf;"> 23:59:59</span><span style="color:#ffffff;">'</span><span>)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#validTime</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#e9fdac;">type</span><span>(start_str)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.ant-picker-input input >> nth=1</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#e9fdac;">type</span><span>(end_str)
</span><span> </span><span style="color:#e9fdac;">self</span><span>.page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#validTime</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#e9fdac;">press</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Enter</span><span style="color:#ffffff;">'</span><span>)
</span></code></pre>
<h2 id="shu-ju-qing-li">数据清理</h2>
<p>我的用例基本建立在数据的基础上，比如我会先创建一系列的数据，然后通过确定的条件去搜索数据，再度创建数据，编辑数据等，等于是写了剧本的，每个用例按照安排运行，这就要求在所有用例执行之后做数据清理的工作，这就要求我去数据库里更新每条记录的软删除字段。另外搜索页面的数据放在 es 里，这就要求清理的过程中除了数据库之外还要顺便把 es 清掉，稍微有一点点麻烦，不过还好，几行代码的事情。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#ff5e5e;">import </span><span>pymysql.cursors
</span><span style="color:#ff5e5e;">import </span><span>requests, logging, sys
</span><span>logging.</span><span style="color:#e9fdac;">basicConfig</span><span>(</span><span style="font-style:italic;color:#fc9354;">format</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">'</span><span style="color:#fdb082;">%(</span><span style="color:#e9fdac;">asctime</span><span style="color:#fdb082;">)s</span><span style="color:#fbe3bf;">:</span><span style="color:#fdb082;">%(</span><span style="color:#e9fdac;">levelname</span><span style="color:#fdb082;">)s</span><span style="color:#fbe3bf;">:</span><span style="color:#fdb082;">%(</span><span style="color:#e9fdac;">message</span><span style="color:#fdb082;">)s</span><span style="color:#ffffff;">'</span><span>, </span><span style="font-style:italic;color:#fc9354;">level</span><span style="color:#ff5e5e;">=</span><span>logging.</span><span style="color:#e9fdac;">DEBUG</span><span>)
</span><span>
</span><span>mysql_conf </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">host</span><span style="color:#ffffff;">'</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">xxxxx</span><span style="color:#ffffff;">'</span><span>,
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">user</span><span style="color:#ffffff;">'</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">'</span><span>,
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">port</span><span style="color:#ffffff;">'</span><span>: </span><span style="color:#fdb082;">3306</span><span>,
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">db</span><span style="color:#ffffff;">'</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">xxx_db</span><span style="color:#ffffff;">'</span><span>,
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">'</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">secert</span><span style="color:#ffffff;">'</span><span>,
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">class </span><span style="text-decoration:underline;color:#8cdaff;">DBCleaner</span><span>:
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#6699cc;">__init__</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>) -> </span><span style="color:#ff8942;">None</span><span>:
</span><span> </span><span style="color:#e9fdac;">self</span><span>.c </span><span style="color:#ff5e5e;">= </span><span>pymysql.</span><span style="color:#e9fdac;">connect</span><span>(</span><span style="font-style:italic;color:#fc9354;">host</span><span style="color:#ff5e5e;">=</span><span>mysql_conf[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">host</span><span style="color:#ffffff;">'</span><span>],
</span><span> </span><span style="font-style:italic;color:#fc9354;">user</span><span style="color:#ff5e5e;">=</span><span>mysql_conf[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">user</span><span style="color:#ffffff;">'</span><span>],
</span><span> </span><span style="font-style:italic;color:#fc9354;">port</span><span style="color:#ff5e5e;">=</span><span>mysql_conf[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">port</span><span style="color:#ffffff;">'</span><span>],
</span><span> </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">=</span><span>mysql_conf[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">'</span><span>],
</span><span> </span><span style="font-style:italic;color:#fc9354;">database</span><span style="color:#ff5e5e;">=</span><span>mysql_conf[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">db</span><span style="color:#ffffff;">'</span><span>],
</span><span> </span><span style="font-style:italic;color:#fc9354;">cursorclass</span><span style="color:#ff5e5e;">=</span><span>pymysql.cursors.DictCursor)
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">delete_by_mid</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">mid</span><span>):
</span><span> </span><span style="color:#ff5e5e;">with </span><span style="color:#e9fdac;">self</span><span>.c.</span><span style="color:#e9fdac;">cursor</span><span>() </span><span style="color:#ff5e5e;">as </span><span>cursor:
</span><span> select_sql </span><span style="color:#ff5e5e;">= </span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Select id from biz_tab where m_id = %s;</span><span style="color:#ffffff;">"
</span><span> cursor.</span><span style="color:#e9fdac;">execute</span><span>(select_sql, (mid))
</span><span> </span><span style="color:#ff5e5e;">for </span><span>row </span><span style="color:#ff5e5e;">in </span><span>cursor:
</span><span> </span><span style="color:#e9fdac;">self</span><span>.</span><span style="color:#e9fdac;">delete_es_index_by_biz_id</span><span>(row[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">id</span><span style="color:#ffffff;">'</span><span>])
</span><span>
</span><span> logging.</span><span style="color:#e9fdac;">info</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete by mid = </span><span>{mid}</span><span style="color:#ffffff;">"</span><span>)
</span><span> sql </span><span style="color:#ff5e5e;">= </span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Delete from biz_tab where m_id = %s;</span><span style="color:#ffffff;">"
</span><span> cursor.</span><span style="color:#e9fdac;">execute</span><span>(sql, (mid))
</span><span> </span><span style="color:#e9fdac;">self</span><span>.c.</span><span style="color:#e9fdac;">commit</span><span>()
</span><span>
</span><span> </span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">delete_es_index_by_biz_id</span><span>(</span><span style="font-style:italic;color:#fc9354;">self</span><span>, </span><span style="font-style:italic;color:#fc9354;">biz_id</span><span>):
</span><span> url </span><span style="color:#ff5e5e;">= </span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test_index/_doc/</span><span>{biz_id}</span><span style="color:#ffffff;">"
</span><span> response </span><span style="color:#ff5e5e;">= </span><span>requests.</span><span style="color:#e9fdac;">request</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#ff5e5e;">DELETE</span><span style="color:#ffffff;">"</span><span>, url).</span><span style="color:#e9fdac;">json</span><span>()
</span><span> logging.</span><span style="color:#e9fdac;">info</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">f</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Deleting es index for </span><span>{biz_id}</span><span style="color:#fbe3bf;">, result is </span><span>{response[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">result</span><span style="color:#ffffff;">'</span><span>]}</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span style="color:#ff5e5e;">if </span><span>__name__ </span><span style="color:#ff5e5e;">== </span><span>__main__</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">:</span><span style="background-color:#f92649;color:#f8f8f0;">
</span><span> </span><span style="color:#ff5e5e;">if </span><span style="color:#6699cc;">len</span><span>(sys.argv) </span><span style="color:#ff5e5e;">== </span><span style="color:#fdb082;">1</span><span>:
</span><span> </span><span style="color:#6699cc;">print</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">USAGE: db_cleaner m_id</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#ff5e5e;">else</span><span>:
</span><span> m_id </span><span style="color:#ff5e5e;">= </span><span>sys.argv[</span><span style="color:#ff5e5e;">-</span><span style="color:#fdb082;">1</span><span>]
</span><span> cleaner </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">DBCleaner</span><span>()
</span><span> cleaner.</span><span style="color:#e9fdac;">delete_by_mid</span><span>(m_id)
</span></code></pre>
<p>上面的脚本有 2 个作用</p>
<p>当 module 引入时可以调用删除的方法，传入 mid 就可以删除对应的记录
直接命令行执行时给出 mid 也能删除
确保清除成功
pytest 在断言失败之后，后面的代码是不会被执行的，为了确保每次都会调用清理的代码，我们需要使用 pytest 的 fixture 机制，代码如下</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>@pytest.</span><span style="color:#e9fdac;">fixture
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">data_set</span><span>():
</span><span> m_id </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">12</span><span style="color:#ffffff;">'
</span><span> </span><span style="color:#ff5e5e;">yield </span><span>{</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">m_id</span><span style="color:#ffffff;">'</span><span>: m_id}
</span><span> </span><span style="color:#e9fdac;">DBCleaner</span><span>().</span><span style="color:#e9fdac;">delete_by_mid</span><span>(m_id)
</span></code></pre>
<h2 id="zong-jie">总结</h2>
<p>经过几天的把玩和用例编写，发现</p>
<ul>
<li>迭代过程中的项目确实不太适合写 ui 自动化测试，不过千金难买我喜欢，我就要写</li>
<li>playwright 很好用</li>
<li>page object 还是得用</li>
<li>pytest 很好用</li>
<li>headless 很好用</li>
<li>直接写 js 很好用</li>
<li>简单来说，熟练工是第一生产力。</li>
</ul>
<h2 id="hui-gu">回顾</h2>
<p>最后在 2024 年的今天来回顾一下这个项目。</p>
<p>项目最后没有维护了，主要是因为:</p>
<ul>
<li>playwright 的 python 版本一直更新失败，官方也没给出明确的说法</li>
<li>playwright 的 api 在当时变化十分频繁，过几个月之后再来看当时的代码，发现很多 api 都过时了</li>
<li>因为 web 端的用户很少，所以主要精力也没放在那里，渐渐的就不维护了</li>
</ul>
<p>现在看来直接连数据库做数据清理不是很好。</p>
<ul>
<li>要了解数据库的分库分表策略，了解是小事，但是策略代码要自己写，这个没必要</li>
<li>直接在数据库删数据的时候没办法触发业务逻辑的数据处理脚本</li>
<li>数据库的变化对代码的影响很大</li>
</ul>
<p>后面我在做 api 的自动化时用的是调接口清理的方法，代码可维护了很多。</p>
<p>总之在当时使用 playwright 做 ui 自动化应该是没问题的，问题是不应该用 python 版本，如果是 ts 版本的话估计稳定性会强很多。</p>
所有教程存档
2024-07-14T00:00:00+00:00
2024-07-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/archive/
如何让 playwright 运行的更快
2024-07-11T00:00:00+00:00
2024-07-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/make-playwright-10x-faster/
<p>在这篇文章中，我将解释如何使用 Playwright 将测试速度提高<strong>至少 10 倍</strong>。</p>
<p>首先，让我们来了解一下什么是 Playwright。</p>
<p>Playwright 是一个 Node.js 库，它允许你使用相同的 API 脚本和自动化浏览器，如 Chrome、Firefox 和 Safari。</p>
<p>如果你想知道为什么要使用 Playwright，可以看看这个<a href="https://www.devstringx.com/playwright-tool">链接</a>。现在让我们通过一个例子来看看如何使用 Playwright 加速测试。</p>
<h2 id="bing-xing-hua">并行化</h2>
<p>加速测试的一种方法当然是并行运行。首先，我们打开一个名为 example.spec.ts 的文件，放入 20 个测试用例，并在每个测试用例中写入以下代码，让其静态等待 30 秒。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">resolve</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#fdb082;">30000</span><span>));
</span></code></pre>
<p>这个数字将帮助我们理解通过并行运行获得的收益。我们的文件最终版本如下。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">20个示例测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">测试 - 1</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="font-style:italic;color:#fc9354;">resolve </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#fdb082;">30000</span><span>));
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">测试 - 2</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="font-style:italic;color:#fc9354;">resolve </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#fdb082;">30000</span><span>));
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">测试 - 3</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="font-style:italic;color:#fc9354;">resolve </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#fdb082;">30000</span><span>));
</span><span> });
</span><span> .
</span><span> .
</span><span> .
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">测试 - 19</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="font-style:italic;color:#fc9354;">resolve </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#fdb082;">30000</span><span>));
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">测试 - 20</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="font-style:italic;color:#fc9354;">resolve </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#fdb082;">30000</span><span>));
</span><span> });
</span><span>});
</span></code></pre>
<p>如果我们一个一个地运行这些测试（是的，你猜对了！）需要 10 分钟。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*VIOOJ8QIkBLAKmhlUHsJNQ.png" alt="图片3" /></p>
<p>20 个测试一个一个运行需要 10 分钟</p>
<p>10 分钟对于每个运行 30 秒的 20 个测试用例来说太多了。让我们把这个时间缩短一些。Playwright 使用同时运行的工作进程来并行运行。让我们用 5 个工作进程并行运行这些测试，看看区别。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*SDe6gpDyOrqSsTPP8G5-ow.png" alt="图片4" /></p>
<p>20 个测试用 5 个工作进程运行需要 2 分钟</p>
<p>是的，我们成功地用 5 个工作进程在 2 分钟内运行了 20 个测试。这里我们用了 5 个工作进程作为例子，但你可以根据你的系统增加或减少这个数量，直到找到最适合你的测试数量。</p>
<p>那么我们能跑得更快吗？5 倍的加速对我们来说够了吗？当然不够，我们需要更快。那么我们该怎么做呢？让我们看看 Playwright 的分片定义。</p>
<h2 id="fen-pian">分片</h2>
<p>如果我们使用多台机器，每台机器上分配相同数量的测试用例并并行运行，会怎么样？听起来不错。为此，Playwright 为我们提供了分片功能。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:609/1*Kb2TJi5VqpR20C3A5d2CQg.png" alt="图片5" /></p>
<p>用分片运行 20 个测试</p>
<p>在同一台机器上，我们将测试用例分成 5 个相等的部分，并进行 4 次并行运行。如果我们在 5 台不同的机器上运行这些命令，所有测试用例将在 30 秒后运行完毕。这意味着本来需要 10 分钟逐一运行的所有测试用例现在可以在 30 秒内运行完成。不可思议吧？</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test - shard=index/total-shard
</span></code></pre>
<p>在这里你可以根据你拥有的机器数量划分资源。我这里举了 5 个的例子。</p>
<h2 id="gitlab-ji-cheng">Gitlab 集成</h2>
<p>让我们在 Gitlab 中创建一个流水线并在 5 台机器上试一试。创建一个.gitlab-ci.yaml 文件，让我们开始吧。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">stages</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">test
</span><span style="color:#ff5e5e;">tests</span><span>:
</span><span> </span><span style="color:#ff5e5e;">stage</span><span>: </span><span style="color:#fbe3bf;">test
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#fbe3bf;">mcr.microsoft.com/playwright:v1.38.0-focal
</span><span> </span><span style="color:#ff5e5e;">parallel</span><span>:
</span><span> </span><span style="color:#ff5e5e;">matrix</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">SHARD_INDEX</span><span>: [</span><span style="color:#fdb082;">1</span><span>, </span><span style="color:#fdb082;">2</span><span>, </span><span style="color:#fdb082;">3</span><span>, </span><span style="color:#fdb082;">4</span><span>, </span><span style="color:#fdb082;">5</span><span>]
</span><span> </span><span style="color:#ff5e5e;">SHARD_TOTAL</span><span>: </span><span style="color:#fdb082;">5
</span><span> </span><span style="color:#ff5e5e;">script</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">npm ci
</span><span> - </span><span style="color:#fbe3bf;">npx playwright test --shard=$SHARD_INDEX/$SHARD_TOTAL
</span></code></pre>
<p>我们使用“npm ci”命令安装我们的依赖项。</p>
<p>然后我们通过运行“npx playwright test — shard=$SHARD_INDEX/$SHARD_TOTAL”命令来运行测试。让我们看看等待我们的是什么。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*mazgQFSwmx7mD2vt8-6_ag.png" alt="图片6" /></p>
<p>流水线</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*dQKvVzT6FubEToBz66cwJw.png" alt="图片7" /></p>
<p>总共 5 个作业</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*J4MLmw-mSN-lk0RSSWvlTA.png" alt="图片8" /></p>
<p>第一个作业的详细信息</p>
<p>正如你在这里看到的，流水线在大约 1 分钟内完成了 5 个并行运行的作业。实际上，测试运行了 30 秒，剩下的时间是环境准备时间，如你在截图中看到的。实际上，它从 10 分钟变成了 30 秒。</p>
<p>通过使用 Playwright 的工作进程和分片功能，你可以在短时间内运行大量测试用例。下次文章再见！</p>
<h2 id="yuan-wen-di-zhi">原文地址</h2>
<p><a href="https://hasangurhan.medium.com/how-did-i-run-tests-at-least-10x-faster-with-playwright-c25687982caf">这里</a></p>
使用chatgpt4结合playwright进行智能化ui自动化测试
2024-07-11T00:00:00+00:00
2024-07-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-and-chatgpt4/
<p>之前介绍过一个使用 chatgpt4 分析 dom，然后生成 puppeteer 代码进行自动化的测试工具 Taxy AI。今天发现有人推荐了一个使用 chatgpt4 生成 playwright 代码的测试工具<a href="https://github.com/mayt/BrowserGPT">BrowserGPT</a>，稍微看了一下，原理比较简单，比较适合我们去研究一下，顺便打开思路。</p>
<h3 id="yan-shi-dong-hua">演示动画</h3>
<p><img src="https://github.com/mayt/BrowserGPT/raw/master/public/browsergpt.gif" alt="" /></p>
<h3 id="ju-ti-shi-yong">具体使用</h3>
<p>因为我没有 chatgpt4 的 key，所以没办法直接上手使用，只能通过文档去猜测一下具体用法。</p>
<p>BrowserGPT 设置了 openai 的 key 以及 start url 之后就可以在命令行里运行了，大致的使用方式是输入一些自然语言，然后 BrowserGPT 执行 AI 生成的 playwright 代码，实现自然语言自动化的功能。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>go to hn
</span><span>click on the abc article
</span></code></pre>
<p>比如上面的一些描述就实现了去 hacknews 网站点击 abc 这篇文章的功能。</p>
<h3 id="yuan-li-fen-xi">原理分析</h3>
<p>大致看了一下，执行的流程是这样的，代码在<a href="https://github.com/mayt/BrowserGPT/blob/master/index.js">这里</a></p>
<ul>
<li>获取初始化的 url，打开 chrome 浏览器，跳转到这个 url</li>
<li>在命令行里启动 prompt，也就是给用户一个输入的 ui</li>
<li>初始化 openai 的 api</li>
<li>写个死循环，每次用户输入之后调用<code>doAction</code>函数</li>
<li>在<code>doAction</code>函数里简化当前页面的 dom 元素</li>
<li>将简化过的 dom 元素传给 chatgpt，让 gpt 根据 playwright 的示例生成代码</li>
<li>执行 chatgpt 生成的代码</li>
</ul>
<p>这里最有意思的部分是<code>doAction</code>函数</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">doAction</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">chatApi</span><span>, </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">task</span><span>, </span><span style="font-style:italic;color:#fc9354;">options </span><span style="color:#ff5e5e;">= </span><span>{}</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">systemPrompt </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">`
</span><span style="color:#fbe3bf;">You are a programmer and your job is to write code. You are working on a playwright file. You will write the commands necessary to execute the given input.
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;">Context:
</span><span style="color:#fbe3bf;">Your computer is a mac. Cmd is the meta key, META.
</span><span style="color:#fbe3bf;">You are on the website ${</span><span style="color:#e9fdac;">page</span><span style="color:#fbe3bf;">.</span><span style="color:#6699cc;">evaluate</span><span style="color:#fbe3bf;">(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">location.href</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">)}
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;">Here is the overview of the site
</span><span style="color:#fbe3bf;">${</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">parseSite</span><span style="color:#fbe3bf;">(</span><span style="color:#e9fdac;">page</span><span style="color:#fbe3bf;">, </span><span style="color:#e9fdac;">options</span><span style="color:#fbe3bf;">)}
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;">Your output should just be the code that is valid for PlayWright page api. When given the option to use a timeout option, use 1s. Except when using page.goto() use 10s. For actions like click, use the force option to click on hidden elements.
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;">User: click on show hn link
</span><span style="color:#fbe3bf;">Assistant:
</span><span style="color:#fdb082;">\`\`\`
</span><span style="color:#fbe3bf;">const articleByText = 'Show HN';
</span><span style="color:#fbe3bf;">await page.getByText(articleByText, { exact: true }).click(articleByText, {force: true, hidden: true});
</span><span style="color:#fdb082;">\`\`\`
</span><span style="color:#ffffff;">`</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">code </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">""</span><span>;
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#e9fdac;">code </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">queryGPT</span><span>(</span><span style="color:#e9fdac;">chatApi</span><span>, [
</span><span> </span><span style="color:#ff5e5e;">new </span><span>SystemChatMessage(</span><span style="color:#e9fdac;">systemPrompt</span><span>),
</span><span> </span><span style="color:#ff5e5e;">new </span><span>HumanChatMessage(</span><span style="color:#e9fdac;">task</span><span>),
</span><span> ]);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">e</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">e</span><span>.</span><span style="color:#e9fdac;">response</span><span>.data.</span><span style="color:#e9fdac;">error</span><span>);
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">func </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">AsyncFunction</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">page</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">code</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">func</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">e</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">e</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<p>可以看到给 chatgpt 的提示词是两个部分合成的，一个是预先定义的，另一个是用户输入的指令。</p>
<p>简单分析一下系统的提示词，大概分这几个部分</p>
<ul>
<li>角色和任务定义: <code>You are a programmer and your job is to write code. You are working on a playwright file. You will write the commands necessary to execute the given input.</code>，让 chatgpt 去扮演程序员，</li>
<li>环境描述: <code>Your computer is a mac. Cmd is the meta key, META.</code>，运行环境是 mac</li>
<li>提供主要信息: <code>Here is the overview of the site;${await parseSite(page, options)}</code>，这里把当前页面的 html 元素的 body 简化了一下，再喂给了 AI</li>
<li>提供示例: 最后提供一个示例，让 ai 按照例子生成代码，并且让 ai 不要废话，只需要生成代码就好了</li>
</ul>
<p><strong>一句话描述就是把当前的网页的 html 减肥一下，把页面的 dom 和用户的命令传给 ai，让 ai 生成 playwright 代码，最后执行 ai 生成的代码。</strong></p>
<h3 id="fan-hua">泛化</h3>
<p>泛化一下，使用 ai 进行一些测试工具的设计我们可以有下面的一些尝试</p>
<ul>
<li>压缩信息。把页面/api 的描述用尽量简化的方式描述出来，作为输入的一部分喂给 ai，尽量不要基于 ai 自身的先验（也就是学习过的）知识来进行任务的执行，这样可能会产生幻觉</li>
<li>定义好的提示词。一般来说好的提示词包含：角色定义，任务描述，示例以及规范的输出描述</li>
<li>利用 ai 生成代码或其他文本（比如手工测试用例）</li>
<li>利用执行 ai 的生成的代码或者保存 ai 生成的内容</li>
</ul>
<p>其实按道理来说还应该使用 ai 去检查之前的生成的代码或内容，让 ai 提供改进方案或者建议，这样输出的代码可能准确性会更高，不过忽略掉这个步骤问题也不大。更泛化一点看，其实这个工具有点简单的 ai agent 的样子，把 agent 与测试结合起来应该是未来一个不错的尝试方向。</p>
<h3 id="ke-neng-hui-yu-dao-de-wen-ti">可能会遇到的问题</h3>
<p>这个工具目前看来实用性是有限的，这是因为当前时间节点，也就是 2023 年 10 月份，ai 可能会存在下面的问题</p>
<ul>
<li>输出不稳定。同样的提示词可能每次生成的代码是不稳定的，不过之前看到 openai 的 dalle 3 提示词洋洋千言似乎每次得到的结果都很稳定，估计后面的模型在输出稳定性上会有极大的提升，另外好的提示词也能提升输出的稳定性；</li>
<li>无法生成最新 api 的代码。playwright 的 api 变化很快，我记得半年前写的一些代码现在就可能跑不起来了，不过因为 gpt4 的训练内容并不是最新的，所以生成的代码可能是基于旧的 api，有点鸡肋。不过如果是生成 selenium 的代码的话可能实用性会更强一点，毕竟 se 的主要接口这些年都没怎么变过；</li>
</ul>
<p>最后大家可以头脑风暴一下，除了让 ai 把自然语言转成代码进行自动化测试之前，ai 还能在测试领域有什么样的应用呢？</p>
playwright入门视频教程 by 虫师
2024-07-11T00:00:00+00:00
2024-07-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-tutorials/
<h2 id="chong-shi-lu-zhi-de-playwright-xi-lie-ru-men-shi-pin">虫师录制的 playwright 系列入门视频</h2>
<p>这套包含 12 集的 Playwright 教程被称为初学者必备，因为</p>
<ol>
<li>
<p><strong>全面覆盖基础知识</strong>：教程从 Playwright 的安装开始，逐步讲解 API 使用、断言方法以及 Page Object 模式。这些都是进行自动化测试的基本要素，能帮助初学者系统地掌握 Playwright 的核心功能。</p>
</li>
<li>
<p><strong>循序渐进的学习方式</strong>：教程内容按顺序排列，从最基础的安装和配置到进阶的应用和优化，适合初学者逐步理解和掌握各个知识点，不会感到难以跟上。</p>
</li>
<li>
<p><strong>实际应用案例</strong>：通过具体的示例和实践操作，初学者可以更好地理解和应用所学的知识。这些示例不仅有助于理解理论知识，还能帮助初学者积累实战经验。</p>
</li>
<li>
<p><strong>Page Object 模式</strong>：Page Object 模式是一种设计模式，能够提高测试代码的可维护性和可读性。在教程中详细介绍这个模式，可以帮助初学者养成良好的编程习惯，为未来的大规模自动化测试打下基础。</p>
</li>
<li>
<p><strong>解决常见问题</strong>：教程会介绍并解决初学者在使用 Playwright 时可能遇到的常见问题和错误，提供实用的技巧和建议，帮助初学者快速上手并避免常见陷阱。</p>
</li>
<li>
<p><strong>丰富的资源和支持</strong>：通过这套教程，初学者可以获取到丰富的学习资源和技术支持，包括示例代码、文档链接以及社区讨论等，帮助他们在学习过程中有更多的参考和帮助。</p>
</li>
</ol>
<h2 id="shi-pin-di-zhi"><a href="https://www.bilibili.com/video/BV1Hs4y1B76j/">视频地址</a></h2>
<div class="w-full md:w-1/2 mx-auto text-center">
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=996617561&bvid=BV1Hs4y1B76j&cid=1140874845&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="400px" height="300px"></iframe>
</div>
playwright和selenium的区别
2024-07-11T00:00:00+00:00
2024-07-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-vs-selenium/
<p>playwright 是微软推出的一款 e2e（端到端）测试工具，支持多种语言及浏览器，那么它会成为下一个 selenium 吗？</p>
<p>我们首先看看 playwright 和 selenium 之间的区别。</p>
<h2 id="playwright-he-selenium-de-qu-bie">playwright 和 selenium 的区别</h2>
<p>Playwright 和 Selenium 都是用于 web 自动化测试的工具,但它们有一些重要的区别。以下是它们的主要对比:</p>
<ol>
<li>
<p>浏览器支持:</p>
<ul>
<li>Playwright: 原生支持 Chromium, Firefox, 和 WebKit。</li>
<li>Selenium: 支持更多浏览器,包括 Chrome, Firefox, Safari, IE 等。</li>
</ul>
</li>
<li>
<p>架构:</p>
<ul>
<li>Playwright: 使用浏览器特定的协议直接与浏览器通信。</li>
<li>Selenium: 使用 WebDriver 协议,需要额外的驱动程序。</li>
</ul>
</li>
<li>
<p>性能:</p>
<ul>
<li>Playwright: 通常更快,因为它直接与浏览器通信。</li>
<li>Selenium: 可能较慢,因为它通过 WebDriver 进行通信。</li>
</ul>
</li>
<li>
<p>自动等待:</p>
<ul>
<li>Playwright: 内置智能等待机制。</li>
<li>Selenium: 需要手动实现显式或隐式等待。</li>
</ul>
</li>
<li>
<p>多标签页和 iframe 处理:</p>
<ul>
<li>Playwright: 提供更简单的 API 来处理多标签页和 iframe。</li>
<li>Selenium: 处理这些场景相对复杂。</li>
</ul>
</li>
<li>
<p>移动测试:</p>
<ul>
<li>Playwright: 主要 focused on 桌面浏览器,但可以模拟移动设备。</li>
<li>Selenium: 通过 Appium 支持真实移动设备测试。</li>
</ul>
</li>
<li>
<p>语言支持:</p>
<ul>
<li>Playwright: 支持 JavaScript, TypeScript, Python, .NET, 和 Java。</li>
<li>Selenium: 支持更多语言,包括上述语言以及 Ruby, PHP 等。</li>
</ul>
</li>
<li>
<p>社区和生态系统:</p>
<ul>
<li>Playwright: 较新,但发展迅速。</li>
<li>Selenium: 历史悠久,有大量的社区支持和插件。</li>
</ul>
</li>
<li>
<p>网络拦截和修改:</p>
<ul>
<li>Playwright: 提供强大的内置功能。</li>
<li>Selenium: 需要借助第三方工具。</li>
</ul>
</li>
<li>
<p>学习曲线:</p>
<ul>
<li>Playwright: 对于新项目来说可能更容易上手。</li>
<li>Selenium: 有更多的学习资源,但某些概念可能较复杂。</li>
</ul>
</li>
</ol>
<h2 id="selenium-de-cheng-gong-de-yuan-yin">Selenium 的成功的原因</h2>
<p>selenium 作为浏览器自动化项目来说是非常成功的存在。Selenium 现在已经被下载了几百万次，并继续在全球范围内被广泛接受和使用。</p>
<ol>
<li>Selenium 是开源的，支持多种（如 Java、C#、Js、Python、Ruby、Perl 等），支持所有的浏览器（chrome、firefox、edge、ie、safari、opera 等），可以在多种操作系统（Windows、MAC、Linux）上运行。</li>
<li>Selenium 功能强大--它可以做 web 测试，也能做跨浏览器兼容性测试。另外 selenium 设计的初衷是浏览器的自动化，所以除了用作测试之外，selenium 还在 web 自动化操作领域有所建树。</li>
<li>Selenium 有一个庞大的用户社区，可以帮助你快速入门。</li>
<li>与其他开源工具相比，Selenium 非常稳定，它的实现甚至成了标准的 w3c 协议。</li>
<li>最后，Selenium 社区是充满活力的，定期举行许多活动和研讨会，你可以与志同道合的人讨论最新的工具和技术。</li>
</ol>
<h2 id="playwright-hui-cheng-wei-xia-yi-ge-selenium-ma">playwright 会成为下一个 selenium 吗？</h2>
<p>考虑到现代 Web 应用自动化，Selenium WebDriver 似乎是最受欢迎的工具之一，然而，像 Playwright、Puppeteer、Cypress 这样的替代工具正在出现，并争取在一段长时间之后能对其进行超越。</p>
<p>Playwright 是一个 JavaScript 框架，支持在前端实现 Web 应用程序的自动化。它在后端使用 Node.js，就像 Puppeteer 那样。它扩展了该框架，为用户提供了编写端到端测试或隔离测试应用程序特定部分所需的所有工具。</p>
<p>支持使用包括 Java、Js、C#、Python 在内的语言编写测试用例，并像 Selenium WebDriver 一样在任何浏览器和任何操作系统上运行。它是开源的，很容易使用，支持单兵作战和团队协同。</p>
<p>在 UI 自动化领域，Playwright 能够成为下一个 Selenium 的主要原因有以下七个方面。</p>
<ul>
<li>
<p>Playwright 得到了微软的支持，其作者来自 Puppeteer（谷歌）团队，因此 playwright 可以吸收 Puppeteer 积极的方面。另外，它已经了一些版本来支持多种编程语言，社区的反馈也非常积极。简而言之微软的钞能力和干爹属性使其相对其他开源项目来说可能会有更多的持续性。</p>
</li>
<li>
<p>Playwright 的架构更简化，它摆脱了 selenium 复杂的设置和维护本地 driver 的繁琐过程，基本上开箱即用，工程化方面的实践也更加深入。初学 selenium 的同学应该记得 selenium 安装之后没有下载 driver 的话就是不能用的，特定版本的浏览器需要特定版本的 driver 配合，对于一些长期项目的维护来说确实有时候会带来额外的工作量。</p>
</li>
<li>
<p>Playwright 的测试执行速度非常高（平均比 selenium 快 40%），因为它使用 JavaScript 引擎如 Node.js 来运行测试，而不是 Selenium 的 driver 程序。因此，与 Selenium WebDriver 相比，使用 Playright 可以大大降低测试执行时间。</p>
</li>
<li>
<p>与 Selenium WebDriver 不同，Playwright 除了支持测试页面的全屏截图外，还支持边测试边录屏，感觉现代化了不少。</p>
</li>
<li>
<p>与 Selenium WebDriver 相比，Playright 的维护成本更低，因为它使用内部等待，而不像 Selenium WebDriver 需要管理显式等待。这大大降低了总的代码编写和维护成本。</p>
</li>
<li>
<p>Playwright 除了支持 web 自动化测试外，还支持 RESTFul API 测试。这使测试人员可以灵活地使用 Playwright 测试他们的后端服务。</p>
</li>
<li>
<p>最后，Playwright 可以跟浏览器的开发者工具进行集成，这使得用 Playwright 编写开发测试非常容易和简单。</p>
</li>
</ul>
<p><strong>总之 playwright 很有潜力成为下一个 selenium，成为开源自动化测试的现象级项目。</strong></p>
<h2 id="na-wo-ying-gai-xue-xi-playwright-huan-shi-selenium">那我应该学习 playwright 还是 selenium？</h2>
<ul>
<li>如果你时间有限，代码能力有限，那么 playwright 是快速入门的首选;</li>
<li>如果你对 ui 自动化测试有着更高的追求和热情，那么两种工具都很值得学习;</li>
<li>如果你是 selenium 的忠实用户，那么了解 playwright 也是一个不错的选择和 side project;</li>
</ul>
<p>总之，如果时间有限就直接 playwright，如果精力有剩余的话，两种工具都非常值得学习。</p>
playwright简介
2024-07-11T00:00:00+00:00
2024-07-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/what-is-playwright/
<p>playwright 是微软推出的一款 ui 自动化测试工具(浏览器自动化测试工具)，据说开发小组的核心人员来自 google 的 puppeteer 团队，真是一出生就有了个好爹而且好爹的亲爹也是爹中的战斗机，这就让人非常期待了。</p>
<p>以下是 Playwright 的主要特性:</p>
<ol>
<li>
<p>多浏览器支持: 支持 Chromium、Firefox 和 WebKit 引擎的浏览器。</p>
</li>
<li>
<p>跨平台: 可在 Windows、macOS 和 Linux 上运行。</p>
</li>
<li>
<p>多语言 API: 提供 JavaScript/TypeScript、Python、Java 和.NET 等多种编程语言的 API。</p>
</li>
<li>
<p>自动等待: 智能等待元素准备就绪,减少测试中的超时和随机失败。</p>
</li>
<li>
<p>强大的选择器: 支持文本、CSS 和 XPath 选择器,以及自定义选择器。</p>
</li>
<li>
<p>网络拦截: 可以拦截和修改网络请求和响应。</p>
</li>
<li>
<p>移动设备模拟: 可以模拟移动设备的屏幕尺寸、方向和触摸事件。</p>
</li>
<li>
<p>并发测试: 支持并行执行测试以提高效率。</p>
</li>
<li>
<p>调试工具: 提供内置的调试器和代码生成器。</p>
</li>
<li>
<p>持续集成: 易于集成到 CI/CD 流程中。</p>
</li>
</ol>
<p>Playwright 的设计目标是提供一个现代化、可靠和高效的自动化测试解决方案,适用于现代 web 应用程序的测试需求。</p>
<h2 id="xia-zai-yu-an-zhuang">下载与安装</h2>
<p>playwright 应该是使用 JavaScript 进行开发的，不过考虑到大部分的测试同学可能对 python 更为熟悉，这里的安装就以 python 版本为例。</p>
<p>在命令行中输入<code>pip install pytest-playwright</code>，等 playwright 安装成功之后再输入命令<code>playwright install</code>，这条命令的作用是安装测试所需要的各种浏览器支持，相比较 selenium 需要先安装浏览器再安装相应版本的 driver，playwright 的初始化工作就显得轻松了很多。</p>
<h2 id="di-yi-ge-yong-li">第一个用例</h2>
<p>接下来按照官方文档里的例子我们来跑第一个 playwright 用例。</p>
<p>新建一个名为 test_my_app.py 的文件，然后把文档中的例子一字不差的进行拷贝粘贴。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#ff5e5e;">import </span><span>re
</span><span style="color:#ff5e5e;">from </span><span>playwright.sync_api </span><span style="color:#ff5e5e;">import </span><span>Page, expect
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">test_homepage_has_Playwright_in_title_and_get_started_link_linking_to_the_intro_page</span><span>(</span><span style="font-style:italic;color:#fc9354;">page</span><span>: Page):
</span><span> page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.dev/</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Expect a title "to contain" a substring.
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(page).</span><span style="color:#e9fdac;">to_have_title</span><span>(re.</span><span style="color:#e9fdac;">compile</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright</span><span style="color:#ffffff;">"</span><span>))
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># create a locator
</span><span> get_started </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=Get Started</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Expect an attribute "to be strictly equal" to the value.
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(get_started).</span><span style="color:#e9fdac;">to_have_attribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">href</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/docs/intro</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Click the get started link.
</span><span> get_started.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Expects the URL to contain intro.
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(page).</span><span style="color:#e9fdac;">to_have_url</span><span>(re.</span><span style="color:#e9fdac;">compile</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.*intro</span><span style="color:#ffffff;">"</span><span>))
</span></code></pre>
<p>然后在命令行里输入 pytest，视网速而定，等待个 10 秒钟左右，就可以看运行结果了。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span>collected </span><span style="color:#fdb082;">1 </span><span>item
</span><span>
</span><span>test_my_application.py . [</span><span style="color:#fdb082;">100</span><span style="color:#ff5e5e;">%</span><span>]
</span><span>
</span><span style="color:#ff5e5e;">================================================================= </span><span style="color:#fdb082;">1 </span><span>passed </span><span style="color:#ff5e5e;">in </span><span style="color:#fdb082;">7.08</span><span>s </span><span style="color:#ff5e5e;">==================================================================
</span></code></pre>
<p>上面的用例去到了 playwright 的官网，定位并点击了名为 Get Started 的链接，最后断言页面上的 url 里含有 intro 这个字符串。</p>
<p>1 passed 表示运行了 1 个用例并且用例成功通过。另外默认情况下 playwright 是以 headless 的模式运行的，这表示运行的过程中浏览器在后台打开和工作，所以看不到浏览器界面是常规操作，不需要紧张和疑惑。</p>
<p>如果遇到了网络超时的情况，可以试试用下面的用例去替换。</p>
<pre data-lang="python" style="background-color:#191919;color:#f8f8f2;" class="language-python "><code class="language-python" data-lang="python"><span style="color:#ff5e5e;">import </span><span>re
</span><span style="color:#ff5e5e;">from </span><span>playwright.sync_api </span><span style="color:#ff5e5e;">import </span><span>Page, expect
</span><span>
</span><span style="font-style:italic;color:#ff5e5e;">def </span><span style="color:#8cdaff;">test_homepage_has_Playwright_in_title_and_get_started_link_linking_to_the_intro_page</span><span>(
</span><span> </span><span style="font-style:italic;color:#fc9354;">page</span><span>: Page
</span><span>):
</span><span> page.</span><span style="color:#e9fdac;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://www.itest.info/</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Expect a title "to contain" a substring.
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(page).</span><span style="color:#e9fdac;">to_have_title</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">重定向科技</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># create a locator
</span><span> plan </span><span style="color:#ff5e5e;">= </span><span>page.</span><span style="color:#e9fdac;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">css=.navbar-nav li >> nth=1 >> a</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Expect an attribute "to be strictly equal" to the value.
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(plan).</span><span style="color:#e9fdac;">to_have_attribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">href</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/plans</span><span style="color:#ffffff;">"</span><span>)
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Click the get started link.
</span><span> plan.</span><span style="color:#e9fdac;">click</span><span>()
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Expects the URL to contain intro.
</span><span> </span><span style="color:#e9fdac;">expect</span><span>(page).</span><span style="color:#e9fdac;">to_have_url</span><span>(re.</span><span style="color:#e9fdac;">compile</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.*plans</span><span style="color:#ffffff;">"</span><span>))
</span></code></pre>
<h2 id="zong-jie">总结</h2>
<p>playwright 在 2023 年下半年表现非常出色，已经成为了很多开发人员的首选工具，总之在 2024 年的话，playwright 是最值得学习的自动化测试工具。</p>
关于本站
2024-07-07T00:00:00+00:00
2024-07-07T00:00:00+00:00
乙醇
https://playwright.itest.info/pages/about/
<h2 id="wei-shen-me-hui-chuang-jian-playwright-jiao-cheng-zhan">为什么会创建 playwright 教程站</h2>
<p>playwright 是 <a href="https://www.itest.info/posts/best-ui-automation-tool-you-can-learn-in-2024">2024 年最值得学习的自动化测试工具</a>，然而中文的资料非常有限，所以我创建了这个站点，希望可以一直维护下去。</p>
<h2 id="zuo-zhe-shi-shui">作者是谁</h2>
<p>作者是乙醇和虫师(就是那个博客园的虫师)，我创建和录制过很多<a href="https://www.bilibili.com/video/BV1ZK4y1x7XK/">教程</a>，你可以在下面的地方找到我。</p>
<ul>
<li><a href="https://www.cnblogs.com/nbkhic">乙醇的博客园</a></li>
<li><a href="https://www.cnblogs.com/fnng">虫师博客园</a></li>
<li><a href="https://zh.ethanhan.cc/">乙醇的博客</a></li>
<li><a href="https://zh.ethanhan.cc/">乙醇在 b 站录教程</a></li>
<li><a href="https://space.bilibili.com/524416851">虫师在 b 站录教程</a></li>
</ul>
<h2 id="wen-zhang-lai-yuan">文章来源</h2>
<p>文章主要来源两个地方</p>
<ul>
<li>原创，这个没啥可说的，直接肝就完了</li>
<li>翻译，我写了个爬虫去收集有意义的内容。所有的翻译资料都会加上翻译标签，并尽量保留原始链接，每篇文章我都会校对一遍，尽量保证大家都可以读懂</li>
</ul>
<h2 id="wen-zhang-de-zhi-liang">文章的质量</h2>
<p>因为 playwright 的 api 变化很快，之前已经过期的内容我这边会人肉过滤掉，尽量保证呈现出的内容是 up to date 的</p>
<p>一些文章里我会加入自己的看法，很明显的夹带私货了</p>
<h2 id="wo-men-de-wei-xin-gong-zhong-hao">我们的微信公众号</h2>
<p>跟<a href="https://www.cnblogs.com/fnng">虫师</a>一起维护的微信公众号。</p>
<p><img src="/img/qrcode.jpg" alt="测试圈TC二维码" /></p>
playwright资源汇总
2024-07-07T00:00:00+00:00
2024-07-07T00:00:00+00:00
乙醇
https://playwright.itest.info/pages/resource/
<p>我的目标是创建一个针对 Typescript/Javascript 的 Playwright 资源库，这些资源是我在网上发现的精心挑选的内容。这个资源页面的灵感来自<a href="https://www.linkedin.com/in/rahulydv/">Rahul Yadav</a>和他在<a href="https://testerops.com/playwright-2/">TesterOps</a>的工作。</p>
<h2 id="guan-fang-zi-yuan">官方资源</h2>
<ul>
<li><a href="https://playwright.dev/">Playwright.Dev</a> - Playwright 文档，包含很棒的入门指南！</li>
<li><a href="https://playwright.dev/docs/release-notes">Release Notes</a> - 通常每月一次发布，包含许多新功能！</li>
<li><a href="https://discord.gg/W9Ut4Pv9">Playwright Discord</a> - 一个学习、提问和成为 Playwright 社区一部分的地方</li>
<li><a href="https://playwright.dev/community/release-videos">Playwright Video Resources</a> - 发布视频、会议视频和直播！</li>
<li><a href="https://try.playwright.tech/">Try Playwright</a> - 在线游乐场，可以在浏览器中试验 Playwright。</li>
</ul>
<h2 id="qi-ta-zi-yuan">其他资源</h2>
<ul>
<li><a href="https://github.com/orgs/playwrightsolutions/repositories">PlaywrightSolutions Github Repos</a> - 这是<a href="https://playwrightsolutions.com/">playwrightsolutions 博客</a>的大部分代码示例存放的地方。</li>
<li><a href="https://ray.run/">Learn Playwright</a> & <a href="https://ray.run/ask">Ask Playwright Questions</a> by <a href="https://www.linkedin.com/in/lucgagan/recent-activity/all/">Luc Gagan</a></li>
<li><a href="https://blog.martioli.com/tag/playwright/">Martioli - Playwright Resources</a> by <a href="https://www.linkedin.com/in/adrian-maciuc/">Adrian Maciuc</a></li>
<li><a href="https://github.com/AutomationPanda/awesome-web-testing-playwright">Awesome Web Testing Playwright Tutorial</a> by <a href="https://www.linkedin.com/in/andrew-leland-knight/">Andrew Knight</a> - 一个可以作为学习练习的自学教程。</li>
<li><a href="https://testerops.com/playwright-2/">TesterOps</a> - 由<a href="https://www.linkedin.com/in/rahulydv/">Rahul Yadav</a>创建的 Playwright 文章以及许多其他 QA 和 OPS 资源</li>
<li><a href="https://github.com/mxschmitt/awesome-playwright">Awesome-Playwright</a> - 一个精心整理的使用 Playwright 的优秀工具、实用程序和项目列表</li>
<li><a href="https://www.workwithloop.com/blog-categories/playwright-test-automation">LooP</a> - 由<a href="https://www.linkedin.com/in/ben-f-44778426/">Ben Fellows</a>撰写的 Playwright 测试自动化文章</li>
<li><a href="https://debbie.codes/">Debbie.codes</a> - <a href="https://www.linkedin.com/in/debbie-o-brien-1a199975/">Debbie O'Brien</a> 是 Playwright 的代言人，也是微软 Playwright 团队的产品经理。</li>
<li><a href="https://testersdock.com/category/playwright/">TestersDock</a> - 由<a href="https://www.linkedin.com/in/alapandas/">Alapan Das</a>维护的关于 Playwright（和更多内容）的常见场景的精彩指南</li>
<li><a href="https://timdeschryver.dev/blog?q=Playwright">TimDeschryver.dev</a> - Tim 的博客有一些很棒的 Playwright 内容和示例！</li>
</ul>
<h2 id="shi-pin">视频</h2>
<ul>
<li><a href="https://www.youtube.com/playlist?list=PLXgRgGX8-5UVm9yioRY329rfcfy3MusiY">Commit Quality</a> YouTube 频道</li>
<li><a href="https://www.youtube.com/@uncleaarohtesting">Uncle Aaroh Testing</a> YouTube 频道</li>
<li><a href="https://www.youtube.com/@AutomateTogether/videos">AutomateTogether</a> YouTube 频道</li>
<li><a href="https://www.youtube.com/@benfellowsloop/videos">Ben Fellows</a> YouTube 频道</li>
<li><a href="https://www.youtube.com/playlist?list=PL699Xf-_ilW7EyC6lMuU4jelKemmS6KgD">LetCode with Koushik</a> YouTube 频道</li>
</ul>
<h2 id="ke-cheng">课程</h2>
<ul>
<li><a href="https://www.ministryoftesting.com/events/hands-on-test-automation-with-playwright-a72b4035-fc54-4320-8057-5574f87492a4">Hands On Test Automation with Playwright</a> 99 分钟的工作坊 - Butch Mayhew (<a href="https://github.com/BMayhew/mot-playwright-workshop/tree/main">repo</a> 参见每个进展/练习的分支)</li>
<li><a href="https://testautomationu.applitools.com/playwright-intro/">Introduction to Playwright</a> - <a href="https://www.linkedin.com/in/raptatinha">Renata Andrade</a> - TestAutomationU</li>
<li><a href="https://testautomationu.applitools.com/playwright-advanced/">Advanced Playwright</a> - <a href="https://www.linkedin.com/in/raptatinha/">Renata Andrade</a> - TestAutomationU</li>
</ul>
<h2 id="bo-ke-wen-zhang">博客文章</h2>
<ul>
<li><a href="https://automationpanda.com/2023/07/28/modern-web-testing-with-playwright/">Modern Web Testing With Playwright</a></li>
<li><a href="https://testerops.com/playwright-and-shadow-dom-a-love-story/">Playwright and Shadow Dom a Love Story</a></li>
<li><a href="https://medium.com/bosphorusiss/verify-pdf-contents-using-playwright-and-node-js-dd3cf6749f70">Verify PDF Contents Using Playwright and NodeJS</a></li>
<li><a href="https://medium.com/@jfgreffier/faster-end-to-end-tests-with-playwright-4cbf32c3f9bf">Faster End To End Tests With Playwright</a></li>
</ul>
<h2 id="fei-js-bo-ke-wen-zhang">非 JS 博客文章</h2>
<p>这些内容太好，不分享不行</p>
<ul>
<li><a href="https://dev.to/irarainey/using-playwright-to-test-azure-active-directory-secured-apis-38p5">Using Playwright to Test Azure Active Directory Secured APIs</a> (.NET)</li>
</ul>
<h2 id="js-ts-zi-yuan">JS/TS 资源</h2>
<p>帮助大家更多了解 Javascript 的资源列表。</p>
<ul>
<li><a href="https://dev.to/codeofrelevancy/all-about-promises-in-javascript-39lj">All About Promises in Javascript</a></li>
</ul>
如何使用Playwright监控JavaScript控制台日志和异常
2024-06-21T00:00:00+00:00
2024-06-21T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-monitor-javascript-logs-and-exceptions-with-playwright/
<h2 id="mu-lu">目录</h2>
<p>监控 JavaScript 日志消息是了解浏览器 上 JavaScript 运行情况的基本方法。Playwright 提供了一种高效的方式来监听页面中的控制台日志和未捕获的异常。这一功能对于开发人员和测试人员来说非常宝贵,可以帮助他们在开发周期的早期发现和解决问题。本文将指导您如何设置 Playwright 来监控 JavaScript 日志和异常,从而增强您的测试策略。</p>
<h2 id="huan-jing-she-zhi">环境设置</h2>
<p>测试需要一个基本的 Playwright 环境。设置过程很简单,您可以在<a href="https://playwright.dev/docs/intro">Playwright 官方文档</a>中找到详细说明。您也可以<a href="https://www.checklyhq.com/docs/cli/">使用 Checkly 编写和运行首个 Playwright 测试</a>。</p>
<p>之后,最好能在一个具有完全可预测日志消息和错误的页面上折腾。在我的例子中,我搭建了一个简单服务,其页面内代码如下:</p>
<p>consoleLogsAndErrors.js</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你好,这是一个错误</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">这是一条日志消息</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#6d6d6d;">//未捕获的异常会中断JS执行,不要在生产环境中这样做! :)
</span><span style="color:#ff5e5e;">throw new </span><span>Error(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">不要在try/catch块外这样做!</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p>一旦您的环境准备就绪,就可以开始折腾本文讨论的技术了。</p>
<h2 id="jian-ting-kong-zhi-tai-ri-zhi-xiao-xi">监听控制台日志消息</h2>
<p>JavaScript 应用程序可以生成各种类型的控制台消息,包括日志、警告和错误。这些消息通常表示应用程序的状态或需要注意的问题。Playwright 允许您通过为页面对象添加控制台事件监听器来捕获这些消息。</p>
<h3 id="shi-xian-kong-zhi-tai-jian-ting-qi">实现控制台监听器</h3>
<p>要监听控制台消息,您需要为页面对象添加一个事件监听器,如下所示:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">msg</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{});
</span></code></pre>
<p>这可以观察并响应控制台的日志输出。我们很容易会想到简单地在这个内部函数中使用 console.log 来记录每条日志消息。然而,以下代码是无效的:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">msg</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">message</span><span>);
</span><span>});
</span></code></pre>
<p>这个内部的<code>console.log()</code>会在页面加载过程中被执行,而 Playwright 在执行测试时并不会显示出来。相反,你应该在页面加载前初始化一个数组,然后将消息推送到数组中。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">本地主机错误日志记录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">logs </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span> </span><span style="color:#6d6d6d;">// 监听所有控制台日志
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">msg</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">logs</span><span>.</span><span style="color:#6699cc;">push</span><span>({ </span><span style="color:#e9fdac;">msg</span><span>, type: </span><span style="color:#e9fdac;">msg</span><span>.</span><span style="color:#8cdaff;">type</span><span>() });
</span><span> });
</span><span> </span><span style="color:#6d6d6d;">// 监听所有控制台事件并处理错误
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">localhost:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">logs</span><span>);
</span><span>});
</span></code></pre>
<p>在这个例子中,我们将每条控制台消息推送到一个<code>logs</code>数组中,包括消息类型和消息文本。然后我们输出<code>logs</code>数组(注意,这段代码实际上并不包含断言,永远不会失败)。</p>
<h2 id="li-jie-consolemessage-lei">理解 ConsoleMessage 类</h2>
<p>Playwright 的<code>ConsoleMessage</code>类代表页面上的控制台消息事件,如日志、警告、错误、调试消息等。每个<code>ConsoleMessage</code>实例提供有关消息的详细信息,包括其类型、文本、位置(URL 和行号),以及<a href="https://playwright.dev/docs/api/class-consolemessage">传递给控制台方法的任何参数</a>。</p>
<h3 id="an-lei-xing-guo-lu-xiao-xi">按类型过滤消息</h3>
<p>在许多情况下,您可能对监控特定类型的消息感兴趣,如错误或警告。您可以使用<code>ConsoleMessage</code>类的<code>type()</code>方法按类型过滤消息:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errors </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">message</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">message</span><span>.</span><span style="color:#8cdaff;">type</span><span>() </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">errors</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">错误消息: ${</span><span style="color:#e9fdac;">message</span><span style="color:#fbe3bf;">.</span><span style="color:#8cdaff;">text</span><span style="color:#fbe3bf;">()}</span><span style="color:#ffffff;">`</span><span>);
</span><span> }
</span><span>});
</span></code></pre>
<p>这种技术特别有助于监控可能影响应用程序功能或用户体验的关键问题。</p>
<p>虽然有<a href="https://playwright.dev/docs/api/class-consolemessage">日志有 18 种类型</a>,但我们最可能遇到的是<code>log</code>、<code>debug</code>、<code>info</code>、<code>error</code>和<code>warning</code>。</p>
<h3 id="fang-wen-xiao-xi-wei-zhi">访问消息位置</h3>
<p>Playwright 允许您访问生成控制台消息的位置,包括 URL、行号和列号。这些信息对调试非常有价值,因为它们可以精确定位消息的确切来源:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">message</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">location </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">message</span><span>.</span><span style="color:#8cdaff;">location</span><span>();
</span><span> </span><span style="color:#e9fdac;">logs</span><span>.</span><span style="color:#6699cc;">push</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">来自 ${</span><span style="color:#e9fdac;">location</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">url</span><span style="color:#fbe3bf;">}:${</span><span style="color:#e9fdac;">location</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">lineNumber</span><span style="color:#fbe3bf;">}:${</span><span style="color:#e9fdac;">location</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">columnNumber</span><span style="color:#fbe3bf;">} 的消息</span><span style="color:#ffffff;">`
</span><span> );
</span><span>});
</span></code></pre>
<p>如果您使用上面"设置"部分中的演示 JS,结果将是:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6699cc;">[
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">来自 http://localhost:3000/index.js:0:8 的消息</span><span style="color:#ffffff;">'</span><span style="color:#e9fdac;">,
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">来自 http://localhost:3000/index.js:1:8 的消息</span><span style="color:#ffffff;">'
</span><span style="color:#e9fdac;">]
</span></code></pre>
<h3 id="zai-ce-shi-zhong-duan-yan-kong-zhi-tai-xiao-xi">在测试中断言控制台消息</h3>
<p>高级监控还包括在测试中断言特定控制台消息的存在或不存在。通过将消息收集到数组中,您可以对测试执行期间应该或不应该出现的消息进行断言:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">本地主机错误日志记录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">logs </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">msg</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">logs</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">msg</span><span>.</span><span style="color:#8cdaff;">text</span><span>()));
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">localhost:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">logs</span><span>); </span><span style="color:#6d6d6d;">// [ '你好,这是一个错误', '这是一条日志消息 苹果' ]
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">logs</span><span>).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你好,这是一个错误</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>注意,<code>toContain</code>是一个简单的字符串匹配,不接受正则表达式模式。在上面的代码里,运行<code>expect(logs).toContain('苹果')</code>将会失败,因为它需要完全匹配数组中的字符串。</p>
<h2 id="bu-huo-wei-chu-li-yi-chang">捕获未处理异常</h2>
<p>未捕获的异常是可能让应用程序无法正常运行的关键错误。Playwright 提供了一种简单的方法来使用 pageerror 事件捕获这些异常。</p>
<h3 id="shi-xian-yi-chang-jian-ting-qi">实现异常监听器</h3>
<p>与捕获控制台消息类似,您可以通过为 pageerror 事件添加事件监听器来监听未捕获的异常:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errors </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pageerror</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">exception</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">errors</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">exception</span><span>.</span><span style="color:#e9fdac;">message</span><span>);
</span><span>});
</span><span style="color:#6d6d6d;">// 稍后在测试中
</span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">errors</span><span>); </span><span style="color:#6d6d6d;">//[ '不要在try/catch块外这样做!' ]
</span></code></pre>
<p>在这里,我们将异常消息收集到一个 errors 数组中。这种方法允许您收集和监控在 Playwright 测试用例执行期间发生的未捕获异常。</p>
<h2 id="ji-yu-ri-zhi-he-yi-chang-jin-xing-duan-yan">基于日志和异常进行断言</h2>
<p>有了捕获的控制台消息和异常,您现在可以断言某些条件,以确保您的应用程序按预期运行。例如,您可能想验证是否没有错误或警告消息:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:8080</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#6d6d6d;">// 额外的测试步骤...
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">logs</span><span>).</span><span style="color:#8cdaff;">toHaveLength</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errors</span><span>).</span><span style="color:#8cdaff;">toHaveLength</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span></code></pre>
<p>这些断言确认在测试执行期间没有遇到控制台消息或未捕获的异常。如果捕获到任何消息或异常,测试将失败。请注意,对日志消息数量进行过多断言可能不是一个好主意,特别是当您期望的数量不是零时，想想自动化测试的目的是什么？是尽量模拟用户的操作，真实的用户对控制台的 js 日志是不感兴趣的。</p>
<h2 id="shi-yong-ruan-duan-yan-jin-xing-chi-xu-jian-kong">使用软断言进行持续监控</h2>
<p>** ❌ 乙醇的注释 👀: 这里的实现方式有问题，正确的实现应该是用<a href="https://playwright.dev/docs/test-assertions#soft-assertions">excpet.soft</a>**</p>
<p>在某些情况下,您可能希望即使遇到日志消息或异常,也能继续运行测试。这可以通过实现软断言来实现,它允许测试继续进行,同时仍然报告遇到的问题，也就是测试用例不失败，但是错误却会被记录下来</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 软断言实现示例
</span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">logs</span><span>.length </span><span style="color:#ff5e5e;">> </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">warn</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">检测到控制台消息:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">logs</span><span>);
</span><span>}
</span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">errors</span><span>.length </span><span style="color:#ff5e5e;">> </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">检测到未捕获的异常:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">errors</span><span>);
</span><span>}
</span></code></pre>
<p>软断言特别适用于当作日志来用。</p>
<h2 id="geng-jin-yi-bu">更进一步</h2>
<p>监控 JavaScript 的日志消息和异常是提高 Web 应用质量的强大技术。Playwright 在自动化测试中实现这种监控非常简单,为潜在问题提供了有价值的视角,并确保您的应用程序满足所需的可靠性和性能标准。通过将这些实践纳入您的测试策略,您可以主动解决问题,从而构建一个更加稳健和无错误的应用程序。</p>
<p>要查看 Playwright 中的日志消息实际效果,请观看 Checkly YouTube 页面上的这个视频:</p>
<p>如果您想加入 Playwright 用户社区,<a href="https://www.checklyhq.com/slack/">请加入 Checkly Slack</a>,其中有我们出色的#Playwright-Community 频道。</p>
<h2 id="lai-yuan">来源</h2>
<p>来源 URL: https://www.checklyhq.com/blog/how-to-monitor-javascript-logs-and-exceptions-with-playwright/</p>
<p>发布时间: 2024-06-21</p>
关于测试不稳定(flakey tests)的一些思考
2024-06-10T00:00:00+00:00
2024-06-10T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/a-few-thoughts-on-flakey-tests-playwright-solutions/
<p>当一个新的测试自动化项目开始时，通常有 3 个工作重点。<strong>构建</strong>（创建新测试）、<strong>维护</strong>（随着应用程序变化更新现有测试）和<strong>监控</strong>（关注自动化运行情况，调查失败原因并向团队反馈发现）。</p>
<p>"不稳定"测试主要涉及自动化运行的"<strong>监控</strong>"部分。如果一个测试不稳定，深入了解原始测试失败的原因总是很重要的...这一点很关键，如果人们不采取这一步骤，可能会带来重大风险。</p>
<p>下面我将分享一些我在处理不稳定性方面的经验，这个列表绝不是全面的。</p>
<h2 id="wo-ren-wei-de-bu-wen-ding-ce-shi">我认为的不稳定测试</h2>
<ul>
<li>由于陷入不良状态而失败的测试。例如，你期望处于登录状态，但实际上处于登出状态，或者可能另一个测试/用户修改了你正在断言的数据。</li>
<li>用于测试的数据质量不佳。例如，你发送了一个 11 位的电话号码，或者由于运行自动化的机器与你的本地时区不同，你发送了一个带有错误 UTC 偏移的日期时间戳。</li>
<li>自动化代码中是否存在竞争条件，在页面数据加载完成之前就尝试进行断言？</li>
<li>是否由于未正确实现 await 语法而导致测试超时？</li>
</ul>
<blockquote>
<p>调查每次失败是至关重要的。</p>
</blockquote>
<p>对于这些场景中的每一个，仅仅因为测试偶尔失败并不意味着它是一个不稳定的测试。<strong>调查每次失败是至关重要的</strong>，确保问题不是出在被测应用程序上，而是其他因素。有可能导致测试失败的潜在问题实际上是一个需要解决的真正 bug。我能想到的一个例子是我们系统中的一个 bug，测试在晚上 6:00 通过但在晚上 11:00 失败，这是由于应用程序中的时区 bug 造成的。</p>
<h2 id="ru-he-chu-li-bu-wen-ding-ce-shi">如何处理不稳定测试？</h2>
<p>以一种容易导致测试不稳定的方式构建测试是很容易做到的（即使在我意识到并试图避免的情况下，我也在几个项目中这样做过）。测试数据和状态是我遇到的最大问题，必须在测试自动化项目开始时和整个过程中考虑这些因素。</p>
<p>如果你的主要问题是状态，由于特定的 cookie，Playwright 团队发布了一些新功能来清除某些 cookie，可以在<a href="https://playwrightsolutions.com/a-few-thoughts-on-flakey-tests-playwright-solutions/Building%20your%20tests%20in%20a%20way%20where%20this%20can%20happen%20is%20really%20easy%20to%20do%20/(I've%20done%20it%20on%20a%20few%20projects%20even%20when%20I%20was%20aware%20and%20trying%20not%20to/).%20Test%20Data%20and%20State%20have%20to%20be%20considered%20at%20the%20beginning%20and%20throughout%20building%20automated%20tests.%20If">1.43 版本发布说明</a>中找到。</p>
<p>当你遇到不稳定测试时，要判断这个测试是否仍然有价值。<strong>如果测试没有价值，就删除它！</strong> 如果它有价值，要么修复它，要么将其设置为不频繁运行且不阻塞构建的测试集的一部分。</p>
<blockquote>
<p>如果测试没有价值，就删除它！</p>
</blockquote>
<p>我处理不稳定测试的一种方法是通过 Playwright 标签。我特别使用<code>@unsatisfactory</code>作为标签名，因为它让我失望。实际上，在我的日常工作中，我有大约 70 个 API 测试以这种方式分类，我们每周运行一次以获得反馈，但不是在每次构建时运行。使用 Playwright 的<code>npx playwright test --grep-invert @unsatisfactory</code>命令，你可以在主 CI 管道中运行所有 spec，除了那些标记为<code>@unsatisfactory</code>的。</p>
<p>如果你想实现标签，请查看<a href="https://playwright.dev/docs/release-notes#version-142">1.42 版本发布说明</a>，了解在测试中创建标签的最新方法。你不再需要在测试标题中添加标签（尽管如果你愿意，仍然可以这样做）。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">不稳定测试</span><span style="color:#ffffff;">"</span><span>,
</span><span> {
</span><span> tag: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span> }
</span><span>);
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">稳定测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>});
</span></code></pre>
<h2 id="wo-ren-wei-de-bu-wen-ding-huan-jing-ji-chu-she-shi">我认为的不稳定环境/基础设施</h2>
<ul>
<li>第三方服务是否失败？</li>
<li>服务/API 调用是否达到了速率限制？</li>
<li>测试是否每隔一次运行就通过，因为我们只将最新代码部署到一半的运行服务器上？</li>
<li>容器是否因为我们在最便宜的服务器上运行（因为它是测试环境）而崩溃？</li>
<li>自动化是否在混沌测试或负载测试期间运行？</li>
<li>开发人员是否推送了代码并导致环境重新部署？</li>
<li>数据团队是否大量操作数据库以重建他们的数据仓库？</li>
<li>你所在地区的 AWS 是否出现故障？</li>
</ul>
<p>有许多不同的情况可能导致你的环境或基础设施使测试返回"失败"。在这些情况下，与上面的不稳定测试一样，调查每次失败并确定没有真正的问题是至关重要的。不要仅仅做出假设，深入研究失败消息、网络跟踪和基础设施日志/仪表板，以确保测试失败的原因。</p>
<p>我遇到过几次测试开始间歇性失败的情况，第一天我确信这是一个不稳定的基础设施问题，但第二天我决定深入调查。我检查了我们的 pganalyze 工具，它提供了对我们数据库查询的概览，清楚地看到问题是由于一个新查询执行时间是原来的 20 倍。与开发人员合作后，我们为表添加了一个索引，在问题进入生产环境之前就修复了这个 bug！</p>
<p>如果你接受可能有一个 api 或测试会失败，但你仍然想测试并确保它至少能在 X 次中通过 1 次，你可以尝试在测试中使用<a href="https://playwright.dev/docs/test-assertions#expectpoll">expect.poll()</a>或<a href="https://playwright.dev/docs/test-assertions#expecttopass">expect.toPass()</a>。我发现使用这些方法的最佳场合是在测试运行之前"创建测试数据"时，因为如果你在实际测试断言步骤中使用它们，可能会掩盖系统的潜在问题。</p>
<p>你还可以通过模拟某些请求和/或响应来使测试更稳定。<a href="https://playwright.dev/docs/mock#mock-api-requests">Playwright 文档</a>提供了许多好的例子！</p>
<h2 id="fang-zhi-jiang-bu-wen-ding-ce-shi-yin-ru-ni-de-xiang-mu">防止将不稳定测试引入你的项目</h2>
<p>理想情况下，你不想将不稳定测试引入你的仓库。防止这种情况的最佳方法是在代码合并到你的测试仓库之前多次运行你的测试。下面的文章将指导你如何循环运行测试，以在合并到主代码分支之前检查不稳定性。</p>
<p><a href="https://playwrightsolutions.com/in-playwright-test-is-there-an-easy-way-to-loop-the-test-multiple-times-to-check-for-flakiness/">在 Playwright Test 中是否有一种简单的方法来多次循环测试以检查不稳定性？我发现在合并新代码到测试套件的主分支之前，在拉取请求上多次运行新的自动化测试或对现有测试的编辑是一个很好的做法。</a></p>
<p>我想我们都同意：</p>
<ul>
<li>酥脆的饼皮 = 好</li>
<li>不稳定的测试 = 坏</li>
</ul>
<p><img src="https://playwrightsolutions.com/content/images/2024/06/Flakey-Test---BAD.png" alt="图片 3" /></p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/a-few-thoughts-on-flakey-tests-playwright-solutions/">原文地址</a></p>
<p>发布时间：2024-06-10</p>
如何在 Playwright 中创建动态定位器(locator)?
2024-06-09T00:00:00+00:00
2024-06-09T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-you-create-dynamic-locators-with-playwright/
<p>这是一个在 <a href="https://aka.ms/playwright/discord">Playwright Discord</a> 帮助频道中经常被问到的热门问题。我认为这个问题如此受欢迎的主要原因之一是,没有人想为同一操作反复编写相似的代码，因为每次都只是输入略有不同，写重复的代码会显得比较啰嗦。处理这个问题有很多不同的方法,我将分享我的方法。</p>
<p>我使用的示例网站并不像其他网站那样直观,因为我将从网络请求中获取一个唯一 ID,并将其传递给动态定位器。我测试的网站是 <a href="https://practicesoftwaretesting.com/">https://practicesoftwaretesting.com</a>。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-29.png" alt="图片 1" /></p>
<p>在这个网站上,页面从 API 接口获取数据,并填充了一个可以交互的产品网格。我想创建一个动态定位器,允许我传入一个参数,根据传入的内容动态选择不同的元素。下面是"Combination Pliers"项目的 HTML 代码。</p>
<pre data-lang="html" style="background-color:#191919;color:#f8f8f2;" class="language-html "><code class="language-html" data-lang="html"><span><</span><span style="color:#ff5e5e;">a
</span><span> </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">card</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#97d8ea;">style</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text-decoration</span><span>: </span><span style="color:#fdb082;">none</span><span>; </span><span style="color:#fbe3bf;">color</span><span>: </span><span style="color:#ecfdb9;">black</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#97d8ea;">data-test</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">product-01H8ABYWDYXDAYW9HM37N5FC5F</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#97d8ea;">href</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#/product/01H8ABYWDYXDAYW9HM37N5FC5F</span><span style="color:#ffffff;">"
</span><span>></</span><span style="color:#ff5e5e;">a</span><span>>
</span><span><</span><span style="color:#ff5e5e;">div </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">card-img-wrapper</span><span style="color:#ffffff;">"</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">img </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">card-img-top</span><span style="color:#ffffff;">" </span><span style="color:#97d8ea;">src</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">assets/img/products/pliers01.jpeg</span><span style="color:#ffffff;">" </span><span>/>
</span><span></</span><span style="color:#ff5e5e;">div</span><span>>
</span><span><</span><span style="color:#ff5e5e;">div </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">card-body</span><span style="color:#ffffff;">"</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">h5 </span><span style="color:#97d8ea;">data-test</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">product-name</span><span style="color:#ffffff;">" </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">card-title</span><span style="color:#ffffff;">"</span><span>>Combination Pliers</</span><span style="color:#ff5e5e;">h5</span><span>>
</span><span></</span><span style="color:#ff5e5e;">div</span><span>>
</span><span><</span><span style="color:#ff5e5e;">div </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">card-footer</span><span style="color:#ffffff;">"</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">span </span><span style="color:#97d8ea;">class</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">float-end text-muted</span><span style="color:#ffffff;">"</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">span </span><span style="color:#97d8ea;">data-test</span><span>=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">product-price</span><span style="color:#ffffff;">"</span><span>>$14.15</</span><span style="color:#ff5e5e;">span</span><span>>
</span><span> </</span><span style="color:#ff5e5e;">span</span><span>>
</span><span></</span><span style="color:#ff5e5e;">div</span><span>>
</span></code></pre>
<p>在这个例子中,我们将使用链接上的 <code>data-test</code> 属性,其值为 <code>product-{unique_id}</code>。我们将构建一个动态定位器,允许我们传入 <code>unique_id</code> 来与我们想要交互的项目进行交互。下面的代码出现在我的 <code>homePage.ts</code> 文件中。我将 <code>productId</code> 设置为一个动态定位器。请看下面的使用示例。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/pages/homePage.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>HomePage {
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#8cdaff;">productId </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">id</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">[data-test="product-${</span><span style="color:#e9fdac;">id</span><span style="color:#fbe3bf;">}"]</span><span style="color:#ffffff;">`</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">addToCart </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="add-to-cart"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">navCart </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="nav-cart"]</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">goto</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="color:#ff5e5e;">private readonly </span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{}
</span><span>}
</span></code></pre>
<p>在 spec 文件中,我们需要实际拥有要传入的 <code>unique_id</code>。<code>await homePage.productId(productId).click();</code> 为了获取唯一的 productId,我使用 <code>page.route()</code> 来拦截网络流量并在我的测试中使用这些值。你可以在<a href="https://playwrightsolutions.com/get-a-response-value-of-an-underlying-network-request-when-running-a-playwright-test/">这里阅读一个简单的例子</a>以了解更多信息。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/checkout.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">CheckoutPage</span><span>, </span><span style="color:#e9fdac;">HomePage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@pages</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">getLoginToken </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/login</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">productIdRoute </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@fixtures/productPageRoute</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Basic UI Checks</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">CUSTOMER_01_USERNAME </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">""</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">CUSTOMER_01_PASSWORD </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">""</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">productId</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 通过API调用获取登录token
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">token </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getLoginToken</span><span>(</span><span style="color:#e9fdac;">username</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 在本地存储中设置登录令牌,使用户保持登录状态
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">addInitScript</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">value</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> window.</span><span style="color:#e9fdac;">localStorage</span><span>.</span><span style="color:#6699cc;">setItem</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth-token</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">value</span><span>);
</span><span> }, </span><span style="color:#e9fdac;">token</span><span>);
</span><span>
</span><span> </span><span style="color:#e9fdac;">productId </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">productIdRoute</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Add to Cart and Checkout</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">homePage </span><span style="color:#ff5e5e;">= new </span><span>HomePage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">checkoutPage </span><span style="color:#ff5e5e;">= new </span><span>CheckoutPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">productId</span><span>(</span><span style="color:#e9fdac;">productId</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">addToCart</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">navCart</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed1</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>});
</span><span>
</span></code></pre>
<p>在这个例子中,我用异步方法实现了 <code>page.route()</code>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/productPageRoute.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">HomePage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * 设置一个路由来从API响应中检索产品ID。
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">page</span><span style="color:#6d6d6d;"> - Playwright页面对象。
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">name</span><span style="color:#6d6d6d;"> - 可选的字符串名称,用于获取特定ID。
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> 产品ID。
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * const page = await browser.newPage();
</span><span style="color:#6d6d6d;"> * const productId = await productIdRoute(page); // 获取第二个产品ID
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const productId = await productIdRoute(page, "Pliers") // 获取名为"Pliers"的产品ID
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">productIdRoute</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">productId</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.practicesoftwaretesting.com/products?between=price,1,100&page=1</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">body</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">fetch</span><span>();
</span><span> </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">name</span><span>) {
</span><span> </span><span style="color:#e9fdac;">productId </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">findIdByName</span><span>(</span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#e9fdac;">name</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pid: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">productId</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 获取列表中的第二个产品
</span><span> </span><span style="color:#e9fdac;">productId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.data[</span><span style="color:#fdb082;">1</span><span>].id;
</span><span> }
</span><span> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">homePage </span><span style="color:#ff5e5e;">= new </span><span>HomePage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">productId</span><span>;
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">findIdByName</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">json</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>, </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string </span><span style="color:#ff5e5e;">| </span><span style="color:#fbe3bf;">undefined </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">json</span><span>.data;
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>; </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">data</span><span>.length; </span><span style="color:#e9fdac;">i</span><span style="color:#ff5e5e;">++</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">data</span><span>[</span><span style="color:#e9fdac;">i</span><span>].name </span><span style="color:#ff5e5e;">=== </span><span style="color:#e9fdac;">name</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">data</span><span>[</span><span style="color:#e9fdac;">i</span><span>].id;
</span><span> }
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">undefined</span><span>;
</span><span>}
</span></code></pre>
<p>我构建的路由器会拦截返回 JSON 的网络流量,并返回 <code>id</code>。我添加了一个可选参数 <code>name</code>,如果传入该参数,它将动态遍历请求返回的 json 字符串,如果产品名称完全匹配(包括大小写),则返回该 <code>id</code> 以供后来使用。</p>
<p>通过这种方式,我可以按名称搜索,获取底层的 <code>data-id</code>,然后使用该 <code>data-id</code> 动态定位页面上的元素。这只需几行代码就能提供极大的灵活性。示例代码可以在下面找到。</p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com/pull/4">添加动态定位器和路由以通过名称获取 productId by BMayhew</a></p>
<hr />
<p>感谢阅读!如果您觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上与我联系,或考虑<a href="https://ko-fi.com/butchmayhew">为我买杯咖啡</a>。如果您想接收更多内容直接发送到您的收件箱,请在下方订阅。</p>
如何通过CLI仅运行上次Playwright运行中的失败
2024-06-03T00:00:00+00:00
2024-06-03T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-run-failures-only-from-the-last-playwright-run/
<h1 id="ru-he-tong-guo-cli-jin-yun-xing-shang-ci-playwright-yun-xing-zhong-de-shi-bai">如何通过 CLI 仅运行上次 Playwright 运行中的失败</h1>
<p>Hello Playwright <a href="https://playwright.dev/docs/release-notes#version-144">1.44</a>版本发布！在这个版本中，我们现在可以官方支持仅运行上次 Playwright 运行中的失败测试。</p>
<p>💡TLDR; <code>npx playwright test --last-failed</code></p>
<div class="w-full md:w-1/3 mx-auto">
<img src="https://playwrightsolutions.com/content/images/2024/06/happy.gif" />
</div>
<h2 id="yi-qian-de-jie-jue-fang-an">以前的解决方案</h2>
<p>去年，我创建了 json 摘要报告器和一个 bash 脚本，可以在下面的文章中找到。这是我为了能够轻松重新运行失败测试而创建的解决方案。我仍然认为我创建的工具具有很大的价值，特别是当我在 CI 中遇到失败时，我可以快速复制我的 json 摘要结果并将其粘贴到我的本地<code>summary.json</code>文件中，然后在本地运行失败的测试进行调试。请参阅下面的文章以了解更多信息。</p>
<p><a href="https://playwrightsolutions.com/whats-the-easiest-way-to-only-re-run-failures-after-the-playwright-test-is-finished/">在 Playwright 测试完成后仅重新运行失败测试的最简单方法是什么？在所有关于重试失败的精彩功能中，我发现自己需要一种简单的方法来重新运行最近一次运行中的所有测试。这与测试重试和断言重试不同，因为那些是在完成重试的情况下进行的。</a></p>
<h2 id="dang-qian-de-jie-jue-fang-an">当前的解决方案</h2>
<p>但真正令人兴奋的是，我现在可以使用这个新的 CLI 命令重新运行我上次运行中的失败测试。首先，您需要确保您的 Playwright 版本至少为 1.44。您可以通过查看<code>package.json</code>来检查。</p>
<p><img src="https://playwrightsolutions.com/content/images/2024/06/image-1.png" alt="Image 4" /></p>
<p>在这个例子中，我创建了一些每次运行时会失败一半的测试来演示这个功能。在运行<code>npx playwright test</code>之后，我看到了这些结果。</p>
<p><img src="https://playwrightsolutions.com/content/images/2024/06/image-4.png" alt="Image 5" /></p>
<p>我现在可以运行命令<code>npx playwright test --last-failed</code>，这将重新运行上次运行中失败的 1 个测试。在下面的情景中，测试失败了，但在“重试”时通过了。这表明<code>--last-failed</code>命令将会列队上次运行中失败状态的所有测试。</p>
<p><img src="https://playwrightsolutions.com/content/images/2024/06/image-5.png" alt="Image 6" /></p>
<h2 id="yin-yong">引用</h2>
<p><a href="https://playwrightsolutions.com/how-to-run-failures-only-from-the-last-playwright-run/">原文</a></p>
<p>更新日期: 2024-06-03</p>
挖掘playwright的隐藏宝藏: 第 2 部分- Andrey Enin
2024-05-23T00:00:00+00:00
2024-05-23T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/hidden-gems-of-playwright-part-2-ca3e38a5954a/
<p><a href="https://adequatica.medium.com/hidden-gems-of-playwright-68fcf8896bcb">在上一篇文章</a>中,我介绍了一些 Playwright 的实用方法,我把这些方法封装到了我的自动化测试框架里,大大简化了测试的过程。</p>
<p>本文将继续探讨这个强大工具的一些有趣特性:</p>
<ul>
<li>[为特定测试用例或者用例集重写全局配置]</li>
<li>[设备模拟]</li>
<li>[离线模式设置]</li>
<li>[断言重试机制]</li>
<li>[等待选择器(已弃用但仍可用) / 等待元素]</li>
<li>[GitHub Actions 集成报告]</li>
<li>[仅运行上次失败的测试]</li>
</ul>
<p>这些特性的部分示例代码可以在这个<a href="https://github.com/adequatica/ui-testing">GitHub 仓库</a>中找到。</p>
<h2 id="wei-te-ding-ce-shi-ji-zhong-xie-quan-ju-pei-zhi">为特定测试集重写全局配置</h2>
<p>相关文档: <a href="https://playwright.dev/docs/test-use-options">测试配置选项</a>, <a href="https://playwright.dev/docs/api/class-testoptions/">TestOptions 接口</a></p>
<p>Playwright 提供了一个<a href="https://playwright.dev/docs/test-configuration">全局配置文件</a>来管理测试运行的各种选项。然而,某些测试可能需要完全不同的设置,比如测试的 URL、浏览器配置或特定的用户环境(如窗口大小、地理位置等)。</p>
<p>要为单个测试重写全局配置,可以在测试开始处使用<code>[test.use()](https://playwright.dev/docs/api/class-test#test-use)</code>方法来设置所需的参数:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({
</span><span> baseURL: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">http://localhost:3000</span><span style="color:#ffffff;">'</span><span>,
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>\[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Pixel 7</span><span style="color:#ffffff;">'</span><span>\],
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">移动端首页测试</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">打开页面</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">'</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="she-bei-mo-ni">设备模拟</h2>
<p><a href="https://playwright.dev/docs/emulation#devices">相关文档</a></p>
<p>Playwright 配置的另一个优势是其设备模拟功能。无需手动设置移动浏览器的 User Agent、视口大小等参数,只需在配置中直接指定目标设备即可(也可以通过上面提到的<code>test.use()</code>方法重写配置):</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>use: {
</span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>\[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iPhone 14</span><span style="color:#ffffff;">'</span><span>\],
</span><span>},
</span></code></pre>
<p>完整的可模拟设备列表可以
在<a href="https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json">Playwright 的 GitHub 仓库</a>中找到。</p>
<h2 id="chi-xian-mo-shi-she-zhi">离线模式设置</h2>
<p><a href="https://playwright.dev/docs/api/class-browsercontext#browser-context-set-offline">相关文档</a></p>
<p>我在一个测试中使用了这个功能,主要是为了检查应用在网络连接丢失时的行为。通过<a href="https://playwright.dev/docs/api/class-browsercontext">BrowserContext</a>可以轻松启用离线模式:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">测试离线状态</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser</span><span>, </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">打开页面并切换到离线</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">setOffline</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span>});
</span></code></pre>
<p><strong>需要注意的是,这并非完全的离线模式。</strong> 它会停止网络活动(模拟网络离线),但无法测试那些使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()方法</a>监听<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event">online/offline 事件</a>的应用功能:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 如果你的应用代码中有这样的监听:
</span><span>window.</span><span style="color:#6699cc;">addEventListener</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">offline</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">event</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{});
</span><span style="color:#6d6d6d;">// 那么使用 browserContext.setOffline(true)将无法触发这个事件
</span></code></pre>
<h2 id="duan-yan-zhong-shi-ji-zhi">断言重试机制</h2>
<p><a href="https://playwright.dev/docs/test-assertions#expecttopass">相关文档</a></p>
<p>这是一个非常巧妙的方法,它允许在<code>expect</code>内部"重试"<a href="https://playwright.dev/docs/test-assertions">断言</a>:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 按指定间隔重试,直到请求成功
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">https://sso-motd-api.web.cern.ch/api/motd/</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>}).</span><span style="color:#8cdaff;">toPass</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// 重试间隔: 1 秒, 2 秒, 10 秒, 10 秒
</span><span> intervals: \[</span><span style="color:#fdb082;">1000</span><span>, </span><span style="color:#fdb082;">2000</span><span>, </span><span style="color:#fdb082;">10000</span><span>\],
</span><span> </span><span style="color:#6d6d6d;">// toPass 的超时设置不受自定义 expect 超时影响
</span><span> timeout: </span><span style="color:#fdb082;">60000</span><span>,
</span><span>});
</span></code></pre>
<p>这个功能对于测试不稳定的后端 api 接口特别有用。</p>
<blockquote>
<p>还有一个类似但略有不同的<code>[expect.poll](https://playwright.dev/docs/test-assertions#expectpoll)</code>方法,它在断言中实现了<a href="https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f#0f5c">HTTP 轮询</a>的概念。</p>
</blockquote>
<h2 id="deng-dai-xuan-ze-qi-yi-qi-yong-dan-reng-ke-yong-deng-dai-yuan-su">等待选择器(已弃用但仍可用) / 等待元素</h2>
<p><a href="https://playwright.dev/docs/api/class-elementhandle#element-handle-wait-for-selector">相关文档</a></p>
<p>这是另一个用于检查选择器的优秀方法。</p>
<p>有一种观点认为<strong>不应该在</strong><a href="https://playwright.dev/docs/pom"><strong>页面对象模型</strong></a>中包含断言,尽管 Playwright 自身的示例中也这么做了。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*9ItTFE2kQ2BonWtFf7jviA.png" alt="图 1: 不建议在页面对象中这样做" /></p>
<p>👆<em>不建议在页面对象中包含断言</em></p>
<p>相反,你可以等待所需的选择器出现,而不使用显式的 assert 或 expect:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 页面工具栏对象
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>Toolbar {
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page;
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">toggleLocator</span><span style="color:#ff5e5e;">: </span><span>Locator;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">toggleLocator </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fdb082;">\[</span><span style="color:#fbe3bf;">class</span><span style="color:#fdb082;">\*</span><span style="color:#fbe3bf;">=toggle</span><span style="color:#fdb082;">\]</span><span style="color:#ffffff;">'</span><span>);
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">clickOnToggle</span><span style="color:#ffffff;">()</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>> {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">toggleLocator</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 已弃用,推荐使用基于定位器的 locator.waitFor()
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForSelector</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fdb082;">\[</span><span style="color:#fbe3bf;">data-testid="dropdown-menu"</span><span style="color:#fdb082;">\]</span><span style="color:#ffffff;">'</span><span>);
</span><span>}
</span><span>}
</span></code></pre>
<p>需要注意的是,**这个方法已被弃用,**现在推荐使用<code>[waitFor()](https://playwright.dev/docs/api/class-locator#locator-wait-for)</code>。因此,上面的页面对象代码应该改写为:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 页面工具栏对象
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>CernToolbar {
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page;
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">toggleLocator</span><span style="color:#ff5e5e;">: </span><span>Locator;
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">dropdownMenu</span><span style="color:#ff5e5e;">: </span><span>Locator;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">toggleLocator </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fdb082;">\[</span><span style="color:#fbe3bf;">class</span><span style="color:#fdb082;">\*</span><span style="color:#fbe3bf;">=toggle</span><span style="color:#fdb082;">\]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">dropdownMenu </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">dropdown-menu</span><span style="color:#ffffff;">'</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">clickOnToggle</span><span style="color:#ffffff;">()</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>> {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">toggleLocator</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">dropdownMenu</span><span>.</span><span style="color:#8cdaff;">waitFor</span><span>({state: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">'</span><span>});
</span><span> }
</span><span>}
</span></code></pre>
<p>更多相关内容:</p>
<ul>
<li><a href="https://adequatica.medium.com/principles-of-writing-automated-tests-a2b72218264c">自动化测试编写原则</a></li>
</ul>
<h2 id="github-actions-ji-cheng-bao-gao">GitHub Actions 集成报告</h2>
<p><a href="https://playwright.dev/docs/test-reporters#github-actions-annotations">相关文档</a></p>
<p>如果你正在使用<a href="https://docs.github.com/en/actions/automating-builds-and-tests/about-continuous-integration">GitHub Actions</a>进行 CI/CD,那么<code>github</code><a href="https://playwright.dev/docs/test-reporters">报告器</a>是一个必备的配置选项:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// GitHub Actions CI 中使用'github',本地运行时使用'list'
</span><span>reporter: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">github</span><span style="color:#ffffff;">' </span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">'</span><span>,
</span></code></pre>
<p>文档中提到这个 reporter 有注释功能,但并未详细说明。实际上,这些注释在 PR 代码中可以直接指出 diff 中失败的代码行。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*7YM1yDhsJfqVlalooK7ogQ.png" alt="图 2: PR中的GitHub报告器注释" /></p>
<p>👆<em>PR 中的 GitHub 报告器注释示例</em></p>
<p>在工作流作业中,<code>github</code>报告器的输出与常规的<code>list</code>报告类似。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*zzuw0WClgGOCxeehXiGAVQ.png" alt="图 3" /></p>
<p>👆<em>作业中的 GitHub 报告器输出</em></p>
<h2 id="jin-yun-xing-shang-ci-shi-bai-de-ce-shi">仅运行上次失败的测试</h2>
<p><a href="https://playwright.dev/docs/test-cli#reference">CLI 文档</a></p>
<p>最新版本(<a href="https://playwright.dev/docs/release-notes#version-144">1.44</a>)引入了一个新的 CLI 选项,允许只运行上一次执行中失败的测试。</p>
<p>这是 Playwright 测试运行器的一个重大改进。在此之前,我们需要编写自定义脚本来重新运行失败的测试,而现在这个功能已经内置了。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*_ClgjN-zvyqGKOggTHMEsw.png" alt="图 4: last-failed选项只运行失败的测试" /></p>
<p><em>使用 last-failed 选项只运行失败的测试</em></p>
<h2 id="lai-yuan">来源</h2>
<p>原文链接: https://adequatica.medium.com/hidden-gems-of-playwright-part-2-ca3e38a5954a</p>
<p>发布时间: 2024 年 5 月 23 日 05:33:13 UTC</p>
你会喜欢的 Playwright 面试问题
2024-05-17T00:00:00+00:00
2024-05-17T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-interview-questions-that-you-are-going-to-love/
<p>适用于中高级 QA 自动化工程师的 Playwright 面试问题</p>
<p>继我之前关于 Playwright 面试问题的<a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/">文章</a>之后，这里有 9 个<strong>Playwright 棘手问题</strong>。</p>
<h2 id="1-xian-shi-deng-dai">1. 显式等待</h2>
<p>从测试搜索功能的角度来看，你会如何改进下面的代码：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The explicit waits</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/playwright-tips-and-tricks-2/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright tips and tricks #2</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">scrollIntoViewIfNeeded</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright tips and tricks #2</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search this site</span><span style="color:#ffffff;">" </span><span>})
</span><span> ).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search this site</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(
</span><span> </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search posts, tags and authors</span><span style="color:#ffffff;">"</span><span>)
</span><span> ).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search posts, tags and authors</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Cypress</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(
</span><span> </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">heading</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Cypress</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#8cdaff;">first</span><span>()
</span><span> ).</span><span style="color:#8cdaff;">toContainText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Cypress</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<h4 id="hui-da">回答</h4>
<ul>
<li>移除所有 <code>toBeVisible()</code> 断言</li>
<li>移除 <code>scrollIntoViewIfNeeded()</code></li>
<li>将 iframe 存储在常量中以便重用和提高可读性</li>
<li>在定位器中使用正则表达式，以便使用部分文本，例如 <code>/Search posts/</code> 而不是 <code>Search posts, tags and authors</code></li>
</ul>
<p><strong>查看代码和解释请见页面末尾</strong> <a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-love/#content-below-is-visible-to-members-only"><strong>链接...</strong></a></p>
<p><strong>乙醇的解释 👀: 还是给个省流版本吧，我没看作者的解释，我按照自己的理解来编的 😳</strong></p>
<ul>
<li>
<p>移除所有 <code>toBeVisible()</code> 断言: 因为这些断言没必要，如果你要操作 1 个元素的话，没必要断言这个元素<code>toBeVisible</code>，因为 playwright 会自动帮你做这件事情</p>
</li>
<li>
<p>移除 <code>scrollIntoViewIfNeeded()</code>: 理由同上</p>
</li>
<li>
<p>将 iframe 存储在常量中以便重用和提高可读性: 个人喜好问题，但是有道理</p>
</li>
<li>
<p>在定位器中使用正则表达式，以便使用部分文本，例如 <code>/Search posts/</code> 而不是 <code>Search posts, tags and authors</code>: 完全同意，尽量避免精准匹配的断言和定位器，当然了，playwright 默认情况下<code>getByXXX</code>中如果出现文本，都是模糊匹配的。</p>
</li>
</ul>
<hr />
<h2 id="2-ke-jian-de-fang-fa">2. 可见的方法</h2>
<p>这段代码将会做什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The visible methods</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">About</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#8cdaff;">isVisible</span><span>());
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将失败，因为 isVisible() 不是一个有效的方法</li>
<li>测试将失败，并显示关于属性 'then' 的错误</li>
<li>测试将通过</li>
</ul>
<h4 id="hui-da-1">回答</h4>
<p>测试将失败，并显示错误：Error: expect: Property 'then' not found</p>
<p><strong>查看解释请见页面末尾</strong> <a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-love/#content-below-is-visible-to-members-only"><strong>链接...</strong></a></p>
<p><strong>省流版本</strong></p>
<p>错误原因是 <code>isVisible()</code> 方法返回的是一个 <code>Promise</code> 对象，但 <code>expect</code> 断言方法不能直接处理 <code>Promise</code> 对象。需要使用 <code>await</code> 关键字来等待 <code>Promise</code> 对象的解析。</p>
<p>正确的代码应该是：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The visible methods</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">isVisible </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">About</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#8cdaff;">isVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">isVisible</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span>});
</span></code></pre>
<p>这样修改后，<code>isVisible()</code> 方法的返回结果会在被 <code>expect</code> 断言方法处理之前被正确解析。</p>
<p><strong>乙醇的注释 👀：最好用 playwright 的 web 断言 await expect(locator).toBeVisible()</strong></p>
<h2 id="3-ren-zhe-dian-ji">3. 忍者点击</h2>
<p>以下代码将会发生什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The ninja</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.clickspeedtester.com/mouse-test/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Second Clicker</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#6699cc;">click</span><span>({ trial: </span><span style="color:#ff8942;">true </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForURL</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/clicks-per-second-test/</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将失败，错误为 page.waitForURL: Test ended，因为点击操作未执行</li>
<li>测试将失败，因为 <code>waitForURL()</code> 参数格式无效</li>
<li>测试将在点击步骤失败，没有 <code>trial:true</code> 这样的选项</li>
</ul>
<h4 id="hui-da-2">回答</h4>
<p>测试将失败，错误为 page.waitForURL: Test ended。使用 <a href="https://playwright.dev/docs/api/class-page?ref=blog.martioli.com#page-click-option-trial">trial:true</a> Playwright 只执行<a href="https://playwright.dev/docs/actionability?ref=blog.martioli.com">是否可以被点击的</a>检查，但跳过点击操作。</p>
<hr />
<h2 id="4-ni-huan-hao-ma">4. 你还好吗？</h2>
<p>以下代码将会发生什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The you OK</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>).</span><span style="color:#8cdaff;">toBeOK</span><span>();
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将失败，因为没有 <code>toBeOK()</code> 这个方法</li>
<li>测试将失败，因为 <code>page</code> 没有 <code>request</code></li>
<li>测试将通过</li>
</ul>
<h4 id="hui-da-3">回答</h4>
<p>测试将通过（前提是网站没挂的话）。<a href="https://playwright.dev/docs/api/class-apiresponseassertions?ref=blog.martioli.com#api-response-assertions-to-be-ok">toBeOK()</a> 是一个确保响应状态码在 <code>200..299</code> 范围内的方法。</p>
<hr />
<h2 id="5-te-shu-ci">5. 特殊词</h2>
<p>假设元素包含文本"Be the first to discover new tips and tricks about automation in software development"，以下代码将会发生什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The innerText?</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">innertText </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.gh-subscribe-description</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">innerText</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">innertText</span><span>).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Be the first to discover new tips</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将通过</li>
<li>测试将失败，错误为 Error: expect Received object: {}</li>
<li>测试将失败，因为我们不能在 <code>innerText()</code> 上使用 <code>toContain()</code></li>
</ul>
<h4 id="hui-da-4">回答</h4>
<p>测试将失败，错误为 Error: expect Received object: {}。因为我们忘记在 <code>innerText()</code> 方法前加上 <code>await</code> 关键字，以解析 Promise 并提取文本。</p>
<hr />
<h2 id="6-shen-qi-de-guo-lu-qi">6. 神奇的过滤器</h2>
<p>过滤测试用例的最佳推荐方法是什么？</p>
<h4 id="hui-da-5">回答</h4>
<p><a href="https://playwright.dev/docs/test-annotations?ref=blog.martioli.com#tag-tests">tags</a>是过滤测试最简单和最有效的方法。</p>
<hr />
<h2 id="7-shi-bai-de-yi-ci">7. 失败的一次</h2>
<p>以下代码将会发生什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The fail</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">fail</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Astronaut</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将通过，因为应用了 <code>test.fail()</code> 方法</li>
<li>测试将失败，因为应用了 <code>test.fail()</code> 方法</li>
<li>测试将执行所有步骤，但结果仍然失败</li>
</ul>
<h4 id="hui-da-6">回答</h4>
<p>测试将通过，因为应用了 <code>test.fail()</code> 方法</p>
<p>为什么？因为它在我的<a href="https://martioli.com/?ref=blog.martioli.com">网站</a>上找不到 "Astronaut" 这个词，因为找不到它，我们期望的测试整体失败，用例确实会失败，所以整体而言用例<a href="https://playwright.dev/docs/api/class-test?ref=blog.martioli.com#test-fail">将通过</a>。</p>
<hr />
<h2 id="8-jian-kang-jian-cha">8. 健康检查</h2>
<p>以下代码将会发生什么？你如何改进代码：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">locales </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">de</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">com</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">es</span><span style="color:#ffffff;">"</span><span>];
</span><span>
</span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">location </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">locales</span><span>) {
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">check health: ${</span><span style="color:#e9fdac;">location</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">https://www.google.${</span><span style="color:#e9fdac;">location</span><span style="color:#fbe3bf;">}/</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>).</span><span style="color:#8cdaff;">toBeOK</span><span>();
</span><span> });
</span><span>}
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将通过</li>
<li>测试将失败，因为不能进行这样的 <code>for</code> 循环</li>
<li>测试将失败，因为 <code>expect</code> 没有 <code>await</code> 关键字</li>
</ul>
<h4 id="hui-da-7">回答</h4>
<p>测试将通过。你可以在 Playwright 中进行这样的检查，只需注意在测试中加入一些延迟。</p>
<p><strong>如果你想知道为什么 <code>expect</code> 不需要 <code>await</code> 关键字，请见页面末尾的解释</strong> <a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-love/#content-below-is-visible-to-members-only"><strong>链接...</strong></a></p>
<p><strong>省流版本: 在 Playwright 中，expect 断言方法不需要 await 关键字的原因是 Playwright 的 expect 方法是同步的，不返回 Promise 对象。它会立即检查传入的值或对象的状态，并且如果检查失败，它会立即抛出一个错误</strong></p>
<hr />
<h2 id="9-ye-mian-yi">9. 页面一</h2>
<p>以下代码将会发生什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The page one</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Recommended Resources</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试将通过，因为我们有 <code>Recommended Resources</code></li>
<li>测试将失败，因为引用错误</li>
<li>测试将失败，因为我的博客中没有 <code>Recommended Resources</code> 文本</li>
</ul>
<h4 id="hui-da-8">回答</h4>
<p>测试将失败，错误为 ReferenceError: getByRole is not defined。注意我们用了 <code>expect(getByText</code> 而不是 <code>expect(page.getByText.</code></p>
<hr />
<p>如果你觉得这篇文章有用，请点击点赞按钮。或者<a href="https://ko-fi.com/adrianmaciuc?ref=blog.martioli.com">请我喝杯咖啡</a>，以</p>
<p>更好地激励我。</p>
<h2 id="lai-yuan">来源</h2>
<p>来源网址：https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-love/</p>
<p>发布时间：2024-05-17T07:08:35.000Z</p>
playwright中如何参数化项目配置
2024-05-09T00:00:00+00:00
2024-05-09T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-parameterize-projects-in-playwright/
<p>引言</p>
<p>今天,我在公司的 Playwright 项目中遇到了一个有趣的挑战,我想记录下我的发现。</p>
<p><strong>任务是同时运行多个项目,每个项目使用不同的数据集。</strong></p>
<p>幸运的是,Playwright 提供了一个功能来解决这个需求 — 声明<strong>TestOptions</strong>的能力。</p>
<p>在本文中,我将指导您如何利用 Playwright 的 TestOptions 声明功能来高效地管理和同时执行多个项目。</p>
<blockquote>
<p><em>在我的 GitHub 仓库上探索演示项目的代码片段:</em><a href="https://github.com/nora-weisser/playwright_demo"></a><em><a href="https://github.com/nora-weisser/playwright_demo">github.com/nora-weisser/playwright_demo</a></em></p>
</blockquote>
<h2 id="bu-zou-1-an-zhuang-xiang-mu"><strong>步骤 1</strong>: 安装项目</h2>
<p><code>npm init playwright@latest</code></p>
<p>Playwright 将下载所有需要的浏览器并创建以下项目结构:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">playwright.config.ts
</span><span style="color:#e9fdac;">package.json
</span><span style="color:#e9fdac;">package-lock.json
</span><span style="color:#e9fdac;">tests/
</span><span> </span><span style="color:#e9fdac;">example.spec.ts
</span><span style="color:#e9fdac;">test-examples/
</span><span> </span><span style="color:#e9fdac;">test.examples.ts
</span></code></pre>
<h2 id="bu-zou-2-tian-jia-playwright-xiang-mu-pei-zhi"><strong>步骤 2</strong>. 添加 Playwright 项目配置</h2>
<p>打开 <code>playwright.config.ts</code> 文件。这个文件是 Playwright 配置的中心,允许您设置 Playwright 测试的首选浏览器等设置。在配置中,找到 'use' 部分并设置基础 URL。在这个演示中,我选择了 '<a href="https://www.saucedemo.com/">https://www.saucedemo.com/</a>' 作为演示用的基础 URL。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>use: {
</span><span> </span><span style="color:#6d6d6d;">/* 在像 `await page.goto('/')` 这样的操作中使用的基础 URL。 */
</span><span> baseURL: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">https://www.saucedemo.com/</span><span style="color:#ffffff;">'</span><span>,
</span><span> </span><span style="color:#6d6d6d;">/* 在重试失败的测试时收集跟踪。查看 https://playwright.dev/docs/trace-viewer */
</span><span> trace: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">on-first-retry</span><span style="color:#ffffff;">'</span><span>,
</span><span> },
</span></code></pre>
<h2 id="bu-zou-3-liao-jie-playwright-xiang-mu"><strong>步骤 3</strong>. 了解 Playwright 项目</h2>
<p>在文件的下方,您会遇到各种项目。我在下面引用了 Playwright 文档中的定义供您参考:</p>
<blockquote>
<p>项目是使用相同配置运行的测试的逻辑组。我们使用项目来在不同的浏览器和设备上运行测试。项目在 playwright.config.ts 文件中配置,配置完成后,您可以在所有项目上运行测试,或仅在特定项目上运行。您还可以使用项目在不同的配置下运行相同的测试。例如,您可以在登录和未登录状态下运行相同的测试。</p>
</blockquote>
<h2 id="bu-zou-4-gai-shu-te-ding-ce-shi-chang-jing"><strong>步骤 4</strong>. 概述特定测试场景</h2>
<p><strong>测试用例</strong>: 实现登录测试用例并使用各种数据集执行它</p>
<p>参数化功能在这里起着关键作用,它允许配置每个项目用不同的用户名/密码进行测试。</p>
<h2 id="bu-zou-5-kao-lu-ce-shi-shu-ju"><strong>步骤 5</strong>. 考虑测试数据</h2>
<p>测试数据长这个样子 👇</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1400/1*2RzF1FFuHfqIEiAmNRNJ7Q.png" alt="图片 1" /></p>
<h2 id="bu-zou-6-chuang-jian-ce-shi-shu-ju"><strong>步骤 6</strong>. 创建测试数据</h2>
<p>建立一个 'test_data' 文件夹,并在其中创建 'login.data.ts'。首先声明一个包含必要属性(用户名和密码)及其数据类型的接口。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>USER_DATA {
</span><span> </span><span style="color:#e9fdac;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>;
</span><span> </span><span style="color:#e9fdac;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>;
</span><span>}
</span></code></pre>
<p>引入变量 USERS 并列出所有的测试数据。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">USERS</span><span style="color:#ff5e5e;">: </span><span>{ [</span><span style="font-style:italic;color:#fc9354;">type</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>]</span><span style="color:#ff5e5e;">: </span><span>USER_DATA } </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> standard_user: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">standard_user</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> locked_out_user: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">locked_out_user</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> problem_user: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">problem_user</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> performance_glitch_user: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">performance_glitch_user</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> error_user: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error_user</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> visual_user: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visual_user</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">secret_sauce</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>};
</span></code></pre>
<h2 id="bu-zou-7-kuo-zhan-testoptions"><strong>步骤 7</strong>. 扩展 TestOptions</h2>
<p>为了将 'user' 参数整合到测试用例和项目中,必须声明 TestOptions 'targetUser'。创建一个 'helper' 文件夹,并在其中建立 'test-option.ts'。</p>
<p>通过引入新的 TestOptions 'targetUser' 来扩展现有的 'TestOptions',以帮助用户参数的集成。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">USER_DATA </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../test_data/login.data</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">USERS </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../test_data/login.data</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>TestOptions {
</span><span> </span><span style="color:#e9fdac;">targetUser</span><span style="color:#ff5e5e;">: </span><span>USER_DATA;
</span><span>}
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#e9fdac;">extend </span><span style="color:#ff5e5e;"><
</span><span> </span><span style="color:#e9fdac;">TestOptions </span><span style="color:#ff5e5e;">>
</span><span> {
</span><span> targetUser: [</span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">standard_user</span><span style="color:#ffffff;">"</span><span>], { option: </span><span style="color:#ff8942;">true </span><span>}],
</span><span> };
</span></code></pre>
<h2 id="bu-zou-8-zai-ce-shi-yong-li-zhong-shi-yong-testoptions"><strong>步骤 8</strong>. 在测试用例中使用 TestOptions</h2>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/test-options</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用现有用户名和有效密码登录</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">targetUser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">//await page.goto('https://www.saucedemo.com/');
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="username"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="username"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">targetUser</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">"</span><span>]);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="password"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="password"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">targetUser</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>]);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-test="login-button"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">currentURL </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">currentURL</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.saucedemo.com/inventory.html</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#header_container</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toContainText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Swag Labs</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>重要提示: 使用以下路径 '../helpers/test-options' 从我们创建的辅助函数中导入 'test' 函数。</p>
<h2 id="bu-zou-9-geng-xin-xiang-mu-pei-zhi"><strong>步骤 9.</strong> 更新项目配置</h2>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>;
</span><span style="color:#ff5e5e;">import type </span><span>{ </span><span style="color:#e9fdac;">TestOptions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">./helpers/test-options</span><span style="color:#ffffff;">'</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">USERS </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">./test_data/login.data</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span><TestOptions>({
</span><span>projects: [
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">standard_user</span><span style="color:#ffffff;">'</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">'</span><span>], targetUser: </span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">standard_user</span><span style="color:#ffffff;">'</span><span>] },
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">locked_out_user</span><span style="color:#ffffff;">'</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">'</span><span>], targetUser: </span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">locked_out_user</span><span style="color:#ffffff;">'</span><span>] },
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">problem_user</span><span style="color:#ffffff;">'</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">'</span><span>], targetUser: </span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">problem_user</span><span style="color:#ffffff;">'</span><span>] },
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">performance_glitch_user</span><span style="color:#ffffff;">'</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">'</span><span>], targetUser: </span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">performance_glitch_user</span><span style="color:#ffffff;">'</span><span>] },
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">error_user</span><span style="color:#ffffff;">'</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">'</span><span>], targetUser: </span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">error_user</span><span style="color:#ffffff;">'</span><span>] },
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">visual_user</span><span style="color:#ffffff;">'</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">'</span><span>], targetUser: </span><span style="color:#e9fdac;">USERS</span><span>[</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">visual_user</span><span style="color:#ffffff;">'</span><span>] },
</span><span> },
</span><span>}
</span></code></pre>
<h2 id="bu-zou-10-zhi-xing-suo-you-xiang-mu-bing-cha-kan-bao-gao"><strong>步骤 10</strong>. 执行所有项目并查看报告</h2>
<p>运行命令: <code>npx playwright test</code></p>
<p>默认情况下,Playwright 生成包含测试执行信息、单个测试成功或失败以及测试运行期间遇到的任何错误的测试报告。reporter 的目的是提供测试结果的可见性,使开发人员或测试人员更容易理解自动化测试的结果。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1400/1*FKtwbhYN6xoz_QcxbcVHIw.png" alt="图片 2" /></p>
<p>Playwright 报告视图 👆</p>
<p>在这个特定的实例中,列出了执行的测试用例以及已处理的用户信息。我故意包含了一个失败的测试用例 'locked-out-user',以展示登录失败的场景。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1400/1*eIUhJD0Ysc6hofVN8wL2FA.png" alt="图片 3" /></p>
<p>失败测试用例的附加信息 👆</p>
<h2 id="bu-zou-11-zhi-xing-te-ding-xiang-mu"><strong>步骤 11</strong>. 执行特定项目</h2>
<p>使用以下命令: <code>npx playwright test -project=<项目名称></code>。此命令针对指定项目的预定义数据集执行登录测试用例。</p>
<h2 id="jie-lun">结论</h2>
<p>在本文中,我分享了关于 Playwright 项目中参数化的发现,涵盖了从创建测试数据到更新配置和实现 TestOptions 的各个方面。通过利用这个功能,我们可以提高用例的可维护性,扩大测试覆盖范围,并提高定位问题的效率。</p>
<p><strong>资源</strong>:</p>
<ol>
<li><em>测试参数化</em>: <a href="https://playwright.dev/docs/test-parameterize">https://playwright.dev/docs/test-parameterize</a></li>
<li><em>固定装置</em>: <a href="https://playwright.dev/docs/test-fixtures">https://playwright.dev/docs/test-fixtures</a></li>
<li><em>演示项目仓库</em>: <a href="https://github.com/nora-weisser/playwright_demo">https://github.com/nora-weisser/playwright_demo</a></li>
</ol>
你会讨厌的 Playwright 面试题
2024-05-05T00:00:00+00:00
2024-05-05T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-interview-questions-that-you-are-going-to-hate/
<p>这些问题是设计来考你的，所以如果你答不对，不要太苛责自己。此外，一些答案有解释，甚至还有代码示例。滚动到页面底部查看详细内容。记住，这些都是可以运行的代码，使用了真实的 URL，所以你可以尝试复制粘贴这些代码看看效果。</p>
<h2 id="1-ben-di-huan-jing">1. 本地环境</h2>
<p>如果你要在本地机器上使用你设置好的本地环境运行测试，比如在 <a href="http://localhost:3000/?ref=blog.martioli.com">http://localhost:3000/</a> ，你会如何处理测试运行期间的本地环境设置？</p>
<p>可能的答案：</p>
<ul>
<li>在运行测试之前启动你的本地环境</li>
<li>在 package.json 中编写脚本来启动本地环境并运行测试</li>
<li>使用 webServer</li>
</ul>
<h4 id="da-an">答案</h4>
<p>所有可能的答案都是有效的，但推荐使用 <a href="https://playwright.dev/docs/api/class-testconfig?ref=blog.martioli.com#test-config-web-server">webServer</a> 配置</p>
<p><a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/#content-below-is-visible-to-members-only"><strong>查看解释</strong></a></p>
<hr />
<h2 id="2-bao-han-bi-jiao">2. 包含比较</h2>
<p>除了一个接受 <code>locator</code> 而另一个接受 <code>value</code> 之外，以下两者之间的主要区别是什么：</p>
<p><code>await expect(locator).toContainText()</code></p>
<p>和</p>
<p><code>await expect(value).toContain()</code></p>
<h4 id="da-an-1">答案</h4>
<p>第一个是一个 <a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#auto-retrying-assertions">自动重试</a> 断言，意味着它会在 5 秒内重试，直到元素出现，而第二个只会尝试断言一次。</p>
<hr />
<h2 id="3-yan-chi-jia-zai">3. 延迟加载</h2>
<p>在以下 URL 中，文本“加载完成”将在 10 秒后出现。我们的测试在 <code>expect</code> 步骤中失败，错误为 <code>Expected: visible , Received: hidden</code>。你如何修复这个测试？</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The visible methods</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://webdriveruniversity.com/Accordion/index.html</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">LOADING COMPLETE.</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<h4 id="da-an-2">答案</h4>
<p>默认的 <code>expect</code> 超时时间为 5 秒，如果元素在此时间内不可见，测试将失败。为修复此测试，我们将仅在此步骤中延长超时时间，超过已知的 10 秒延迟，如下所示：<code>await expect(page.getByText("LOADING COMPLETE.")).toBeVisible({ timeout: 12000 })</code></p>
<hr />
<h2 id="4-zi-yu-self-healing">4. 自愈(self-healing)</h2>
<p>知道 magento.softwaretestingboard.com 有一个名为“Sale”的菜单项，点击后会导航到新页面。完成以下测试，编写一个新的步骤来点击“Sale”菜单选项，但为该元素创建一个 <strong>自愈定位器</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The self-healing</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://magento.softwaretestingboard.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Consent</span><span style="color:#ffffff;">"</span><span>, { exact: </span><span style="color:#ff8942;">true </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span>});
</span></code></pre>
<h4 id="da-an-3">答案</h4>
<p>自愈定位器是当你将多个定位器指向同一个元素时，你使用帮助方法或 OR 操作符将它们链接在一起。使用 <a href="https://playwright.dev/docs/api/class-locator?#locator-or">or 操作符</a> 可以提供多个定位器指向同一个元素，如果由于应用程序更改其中一个失效，它可以尝试使用另一个</p>
<p><a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/#content-below-is-visible-to-members-only"><strong>查看代码</strong></a></p>
<p><strong>来自乙醇的解释 👀：作者的示例代码是要会员才能访问的，不过没关系，我从官网找了个一样的例子，可以得到同样的效果，出于对原创的尊重，我把作者的原始链接也放在这里</strong></p>
<p><img src="https://playwright.dev/docs/locators#matching-one-of-the-two-alternative-locators" alt="Matching one of the two alternative locators" /></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newEmail </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">New</span><span style="color:#ffffff;">" </span><span>});
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">dialog </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Confirm security settings</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">newEmail</span><span>.</span><span style="color:#8cdaff;">or</span><span>(</span><span style="color:#e9fdac;">dialog</span><span>).</span><span style="color:#8cdaff;">first</span><span>()).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dialog</span><span>.</span><span style="color:#8cdaff;">isVisible</span><span>())
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dismiss</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">newEmail</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span></code></pre>
<hr />
<h2 id="5-yi-guan-bi-de-liu-lan-qi">5. 已关闭的浏览器</h2>
<p>这段代码会做什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The closed browser</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">About</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">about</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试会失败，因为 About 是一个按钮，而不是链接</li>
<li>测试会报错，关于目标页面</li>
<li>测试会失败，因为传递给 .toHaveURL() 的参数</li>
</ul>
<h4 id="da-an-4">答案</h4>
<p>测试会报错，关于目标页面。错误：<code>expect.toHaveURL: 目标页面、上下文或浏览器已关闭</code></p>
<p><a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/#content-below-is-visible-to-members-only"><strong>查看解释</strong></a></p>
<p><strong>乙醇的解释 👀：上面的示例也是要开会员的，我来给个省流的版本</strong></p>
<p>这是因为 <code>toHaveURL</code> 是一个异步操作，需要等待（<code>await</code>）其完成。因此，正确的代码应如下：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The closed browser</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">About</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">about</span><span style="color:#ffffff;">/</span><span>); </span><span style="color:#6d6d6d;">// 这里添加了 await
</span><span>});
</span></code></pre>
<hr />
<h2 id="6-yin-yong">6. 引用</h2>
<p>知道在第二步中点击的元素是页面上的一个反向链接，这段代码会做什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The reference</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://blog.martioli.com/playwright-tips-and-tricks-1/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">section</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">p</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">a</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">buy me a coffee</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">blog</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">martioli</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">com</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试会失败，因为“buy me a coffee”是一个链接，我们已经离开了 martioli.com</li>
<li>测试会通过</li>
<li>测试会失败，因为你不能混合使用 locator().locator().locator()</li>
</ul>
<h4 id="da-an-5">答案</h4>
<p>测试会通过，因为点击一个 <a href="https://backlinko.com/hub/seo/backlinks?ref=blog.martioli.com">反向链接</a> 会生成一个包含我们初始来源（blog.martioli.com）reference 的 URL</p>
<p><a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/#content-below-is-visible-to-members-only"><strong>查看解释</strong></a></p>
<p><strong>乙醇的解释 👀：我不懂，反正我没在真实的项目中遇到过这种情况</strong></p>
<hr />
<h2 id="7-qi-ta-yu-yan-huan-jing">7. 其他语言环境</h2>
<p>修改以下测试并使其在不同的语言环境下运行，例如德语。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The locale</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.google.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<h4 id="da-an-6">答案</h4>
<p>你可以在用例里直接修改。 <a href="https://playwright.dev/docs/emulation#locale--timezone">文档</a>。只需在测试前添加 <code>test.use({locale: 'de-DE'})</code></p>
<hr />
<h2 id="8-css-shu-xing">8. CSS 属性</h2>
<p>给定以下代码，如何提高其可读性和简洁性。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The css properties</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://magento.softwaretestingboard.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Consent</span><span style="color:#ffffff;">"</span><span>, { exact: </span><span style="color:#ff8942;">true </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">element </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Shop New Yoga</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">backgroundColor </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">element</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">el</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>window.</span><span style="color:#8cdaff;">getComputedStyle</span><span>(</span><span style="color:#e9fdac;">el</span><span>).</span><span style="color:#8cdaff;">getPropertyValue</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">background-color</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">backgroundColor</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">rgb(25, 121, 195)</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<h4 id="da-an-7">答案</h4>
<p>当你已经有内置方法 <a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-css">toHaveCSS()</a> 时，不需要调用 evaluate。记住 <code>toHaveCSS()</code> 具有自动重试功能，这在你等待某些元素属性延迟出现时至关重要。</p>
<p><a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/#content-below-is-visible-to-members-only"><strong>查看代码</strong></a></p>
<p><strong>乙醇的解释 👀，参考<a href="/blog/what-the-hex-or-how-i-check-colors-with-playwright/">这篇文章</a></strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Shop New Yoga</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">toHaveCSS</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">background-color</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">rgb(25, 121, 195)</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<hr />
<h2 id="9-chang-an-dian-ji">9. 长按点击</h2>
<p>给定以下代码，如何修改点击步骤来模拟按住左键 3 秒然后松开鼠标键。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The long click</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.clickspeedtester.com/mouse-test/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Second Clicker</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span>});
</span></code></pre>
<h4 id="da-an-8">答案</h4>
<p>Click 可以选择性地接受一个带有 <a href="https://playwright.dev/docs/api/class-mouse?ref=blog.martioli.com#mouse-click">delay</a> 属性的对象，值以毫秒为单位。像这样：<code>.click({delay: 3000})</code> 配合一个元素，它将在该元素上按住 3 秒钟，然后释放鼠标键</p>
<hr />
<h2 id="10-qiang-zhi-dian-ji">10. 强制点击</h2>
<p>页面上有一个数据同意弹出框，你必须同意才能继续。搜索按钮隐藏在这个弹出框后面。给定以下代码。会发生什么？</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The force</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.google.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 搜索输入字段
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textarea</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">first</span><span>().</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">martioli</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 搜索按钮
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[type=submit][name="btnK"]</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">last</span><span>()
</span><span> .</span><span style="color:#6699cc;">click</span><span>({ force: </span><span style="color:#ff8942;">true </span><span>});
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试会通过。我使用了 <code>{force:true}</code> ，它会点击按钮，结果会显示在弹出框后面</li>
<li>测试会通过，但没有结果显示在弹出框后面</li>
<li>测试会失败，超时，因为无法点击隐藏在弹出框后的按钮</li>
</ul>
<h4 id="da-an-9">答案</h4>
<p>测试会通过，但没有结果显示在弹出框后面。<code>force:true</code> 在元素被另一个元素覆盖时不会点击，但也不会报错（playwright 中的一个 bug？）。这与 <code>fill()</code> 不同。如果你检查输入字段，它在输入时没有问题。</p>
<hr />
<h2 id="11-base-url">11. Base URL</h2>
<p>我在配置文件中设置了 baseUrl。这段代码会做什么：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The baseurl</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试会失败。我忘记了引号之间的 <code>/</code></li>
<li>测试会失败，因为 <code>.goto()</code> 需要双引号</li>
<li>测试会通过</li>
</ul>
<h4 id="da-an-10">答案</h4>
<p>测试会通过，空字符串与 "/" 效果相同。它会导航到在 playwright.config.js 中配置的 baseUrl</p>
<hr />
<h2 id="12-workders">12. workders</h2>
<p>给定以下关于 workers 的配置。如果我运行一个包含 100 个测试的套件，它们会如何运行：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> testDir: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./tests</span><span style="color:#ffffff;">"</span><span>,
</span><span> workers: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">5%</span><span style="color:#ffffff;">"</span><span>,
</span><span>
</span><span> projects: [
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">chromium</span><span style="color:#ffffff;">"</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">"</span><span>] },
</span><span> },
</span><span> ],
</span><span>});
</span></code></pre>
<p>可能的答案：</p>
<ul>
<li>测试会运行得非常慢，因为只有 5% 的 workers 工作量</li>
<li>测试会在你拥有的 CPU 核心数的 5% 上运行</li>
<li>测试不会开始，因为你不能以百分比设置 workers 数量</li>
</ul>
<h4 id="da-an-11">答案</h4>
<p>测试会在你拥有的 CPU 核心数的 5% 上运行。例如，如果你有 4 个核心，100% 就是 4 个，每个核心占 25%。在我们的例子中，5% 小于 25%，所以你只会得到一个 <a href="https://playwright.dev/docs/api/class-testconfig#test-config-workers">worker</a></p>
<hr />
<p>如果你觉得这有用，请点击赞同按钮。或者如果你想进一步激励我，可以 <a href="https://ko-fi.com/adrianmaciuc?ref=blog.martioli.com">请我喝杯咖啡</a>。</p>
<p>我的博客有一个 <strong>会员</strong> 部分。免费加入，没有垃圾邮件，你可以访问仅限会员的内容。 <a href="https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/#/portal/signup/free">现在成为会员</a> ，你还将是第一个在我发布新文章时收到电子邮件的人。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://blog.martioli.com/playwright-interview-questions-that-you-are-going-to-hate/</p>
<p>发布时间: 2024-05-05</p>
Playwright 技巧与诀窍 #3
2024-04-04T00:00:00+00:00
2024-04-04T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-tips-and-tricks-3/
<p>让我们深入了解 Playwright 的内部机制,掌握一些细节,从而提升我们的创造力。</p>
<h2 id="1-zai-ce-shi-yun-xing-qi-jian-huo-qu-geng-duo-ce-shi-xiang-qing">1. 在测试运行期间获取更多测试详情</h2>
<p>你可以实时访问与测试相关的特定值。假设你有一个复杂项目,其配置基于环境、测试数据或其他细节而动态变化,你想在测试运行时查看具体设置的值。可以通过在测试中访问 <code>testInfo</code> 对象来实现。以下是一个代码示例:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试套件名称</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试名称</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">testInfo</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">测试名称: ${</span><span style="color:#e9fdac;">testInfo</span><span style="color:#fbe3bf;">.title}</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">并行索引:${</span><span style="color:#e9fdac;">testInfo</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">parallelIndex</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">分片索引: ${</span><span style="color:#ecfdb9;">JSON</span><span style="color:#fbe3bf;">.</span><span style="color:#6699cc;">stringify</span><span style="color:#fbe3bf;">(</span><span style="color:#e9fdac;">testInfo</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">config</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">shard</span><span style="color:#fbe3bf;">)}</span><span style="color:#ffffff;">`</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>下面是通过 <code>testInfo</code> 可以访问的其他值的截图</p>
<p><img src="https://playwright.itest.info/blog/playwright-tips-and-tricks-3/img/1730512585.557697image.png" alt="图片 1" /></p>
<p><img src="https://playwright.itest.info/blog/playwright-tips-and-tricks-3/img/1730512588.1221068image-1.png" alt="图片 2" /></p>
<p>我的<a href="https://blog.martioli.com/full-parallelization-with-playwright/">关于并发执行的文章</a>展示了如何利用这个对象来显示特定值。</p>
<hr />
<h2 id="2-ru-he-shi-yong-playwright-ce-shi-duo-ge-liu-lan-qi-chuang-kou">2. 如何使用 Playwright 测试多个浏览器窗口?</h2>
<p>以下是测试多个窗口的方法。注意,这里指的是多个窗口,而不是同一窗口中的多个标签页。每个窗口都有自己的存储和 cookie。一个用例可能是测试网站的聊天功能,你想验证消息是否正确传递。你可以用两个浏览器分别登录两个用户,让他们互相聊天。如何在 Playwright 的单个测试中实现这一点呢?</p>
<p>我们可以使用 <code>browser</code> 和 <code>page</code> 对象。下面是一个代码示例:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">两用户聊天功能</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 打开两个浏览器,每个都有自己的存储和 cookie
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">user1Context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">user1Page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">user1Context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">user2Context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">user2Page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">user2Context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 打开聊天页面
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">user1Page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.yourweb.com/chat</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">user2Page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.yourweb.com/chat</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 这里还需要添加登录凭证等详细信息
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 按顺序进行对话
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">user1Page</span><span>.</span><span style="color:#8cdaff;">getById</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">input</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">type</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你好,用户2</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">user1Page</span><span>.</span><span style="color:#8cdaff;">getById</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">sendMsgBtn</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">user2Page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你好,用户2</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">user2Page</span><span>.</span><span style="color:#8cdaff;">getById</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">input</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">type</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">哦!你好,用户1</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">user2Page</span><span>.</span><span style="color:#8cdaff;">getById</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">sendMsgBtn</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">user1Page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">哦!你好,用户1</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<p>当然,聊天只是一个例子,你可以根据需要应用到其他场景。</p>
<h2 id="3-playwright-ru-he-chu-li-tong-yi-liu-lan-qi-zhong-de-duo-ge-biao-qian-ye">3. Playwright 如何处理同一浏览器中的多个标签页?</h2>
<p>对于某些元素具有 <code>target="_blank"</code> 属性,点击后会打开新标签页的情况,可以参考 <a href="https://playwright.dev/docs/pages?ref=blog.martioli.com#handling-new-pages">Playwright 文档中的这部分</a>。如果你觉得 <code>const pagePromise = context.waitForEvent('page')</code> 难以理解,可以将其视为一个事件监听器,它不会阻塞测试,只是在监听。在执行打开新标签页的点击操作后,立即添加 <code>const newPage = await pagePromise</code>,之后就可以像使用上面例子中的 <code>user2Page</code> 一样使用 <code>newPage</code> 了。现在你可以在 <code>newPage</code> 对象或初始页面对象之间切换,无需额外操作。熟悉 Selenium 的人可能记得使用 <code>driver.switchTo().window(actual)</code> 来回切换,在 Playwright 中不再需要这样做。这里每个页面都有自己的对象。</p>
<p>如果你想完全理解这种"监听"事件(如新页面打开)的技巧,建议仔细阅读第 6 点。这不是一个简单的概念,但我相信你读完解释后就能掌握它。</p>
<p>请记住:</p>
<ul>
<li>
<p>browser.newContext() = 新窗口 (还不是完整的浏览器,还需要一个标签页)</p>
</li>
<li>
<p>context.newPage() = 新标签页</p>
</li>
</ul>
<p>下面是更多示例用来帮助理解。请仔细阅读注释。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">默认方式的多窗口和标签页</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// Playwright 的默认使用方式
</span><span> </span><span style="color:#6d6d6d;">// page 包含了你在配置中设置的浏览器信息
</span><span> </span><span style="color:#6d6d6d;">// 可以直接使用,无需额外操作
</span><span> </span><span style="color:#6d6d6d;">// 这会打开一个窗口(context)和一个标签页(page)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://duckduckgo.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">多窗口和标签页</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 这创建了一个新窗口,但你还不能对 page2Context 执行操作
</span><span> </span><span style="color:#6d6d6d;">// 因为它还不完整,还需要一个标签页
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page2Context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 我们有了浏览器和窗口,只需要一个标签页。这样做:
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page2 </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page2Context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>});
</span></code></pre>
<p>尝试混合使用:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">混合使用多窗口和标签页</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">context</span><span>, </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 这会正常打开一个完整的浏览器,包含窗口和标签页(默认方式)
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://duckduckgo.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 这会在同一个窗口(context)中创建一个新标签页
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page2</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 这会设置一个新的浏览器窗口和标签页
</span><span> </span><span style="color:#6d6d6d;">// 独立于上面的操作
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page3Context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page3 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page3Context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page3</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://github.com/adrianmaciuc</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<hr />
<h2 id="4-ru-he-zai-yi-ge-ce-shi-zhong-chu-li-duo-chong-lei-xing-de-liu-lan-qi">4. 如何在一个测试中处理多种类型的浏览器?</h2>
<p>下面我要展示的不是测试多个浏览器的方法。有更高效的方式来做这件事。我不确定是否会写关于这个的文章,因为它相当简单,网上也有很多这样的教程。但为了让我们深入了解浏览器实例是如何创建的,看看下面如何直接在测试范围内操作各种浏览器。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">webkit</span><span>, </span><span style="color:#e9fdac;">firefox</span><span>, </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">多浏览器驱动</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">webkit</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">firefox</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser2</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context2</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page2</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>注意这里没有使用 { browser, page }。我们把 webkit 和 firefox 对象直接引入了测试范围。这样做有点牵强,但为了理解原理并可能在未来开发一些创新想法,了解它的工作方式是有好处的。</p>
<p>记住,在正常设置中,当你只使用 <code>test</code> 并解构 <code>{ page }</code> 时,这个对象会带有你在 Playwright 配置文件中设置的浏览器信息,或者可以通过终端命令或流水线动态设置的值。</p>
<p>对 JAVA 爱好者来说,还记得下面这些代码吗?</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">org</span><span>.</span><span style="color:#e9fdac;">openqa</span><span>.</span><span style="color:#e9fdac;">selenium</span><span>.</span><span style="color:#e9fdac;">chrome</span><span>.</span><span style="color:#e9fdac;">ChromeDriver</span><span>;
</span><span>
</span><span style="color:#e9fdac;">WebDriver driver</span><span> = </span><span style="color:#e9fdac;">new ChromeDriver</span><span>()
</span><span style="color:#e9fdac;">driver</span><span>.</span><span style="color:#e9fdac;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.martioli.com</span><span style="color:#ffffff;">"</span><span>)
</span></code></pre>
<p>如果你有 Java 和 Selenium 的背景,那么我上面所有关于如何实例化和处理驱动程序的解释对你来说都很有意义。你也会理解,我们不再需要编写任何其他代码来使 driver 对象准备就绪。我们不是必须这样做,但如果想要也没有问题。</p>
<hr />
<h2 id="5-wo-ke-yi-zai-ce-shi-zhong-fu-gai-playwright-de-pei-zhi-xiang-ma">5. 我可以在测试中覆盖 Playwright 的配置项吗?</h2>
<p>我们都知道 <strong>playwright.config</strong> 文件<a href="https://playwright.dev/docs/test-configuration?ref=blog.martioli.com">包含了配置</a>,帮助我们进行项目的设置,所有测试都会使用这些配置运行。但如果<strong>我想仅为一个测试或一组测试覆盖配置</strong>呢?</p>
<p>如果我想让一组测试使用一套配置,另一组使用另一套配置,该怎么办?</p>
<p>你可以通过<strong>两种方式</strong>实现:</p>
<p><strong>简单方法: 创建一个<a href="https://playwright.dev/docs/test-projects?ref=blog.martioli.com">项目</a>,并为该项目编写所有<a href="https://playwright.dev/docs/test-use-options?ref=blog.martioli.com">use 选项</a></strong></p>
<p>第一种方法的示例如下:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> projects: [
</span><span> </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">项目名称</span><span style="color:#ffffff;">")</span><span>,
</span><span> </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ff5e5e;">: </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...</span><span>devices[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#e9fdac;">colorScheme</span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dark</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#e9fdac;">locale</span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fr-FR</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#e9fdac;">httpCredentials</span><span style="color:#ff5e5e;">: </span><span>{
</span><span> </span><span style="color:#e9fdac;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你的用户名</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#e9fdac;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你的密码</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> </span><span style="color:#e9fdac;">testIdAttribute</span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">data-testid</span><span style="color:#ffffff;">"</span><span>,
</span><span> }</span><span style="color:#ffffff;">)</span><span>,
</span><span> </span><span style="color:#6d6d6d;">// 这里可以添加任何其他配置
</span><span> ],
</span><span>});
</span></code></pre>
<p>默认情况下,运行测试时会对所有项目执行所有测试。所以请确保使用 <code>--project=项目名称</code> 指定要运行的项目。</p>
<p><strong>非正式方法: 在测试中覆盖配置值</strong></p>
<p>对于第二种方法,假设你希望特定的测试集或 spec 文件中的测试用例使用特殊的地理位置或 window 设置,或者某个测试需要绕过登录过程。换句话说,<a href="https://playwright.dev/docs/test-use-options?ref=blog.martioli.com">这里列出的</a>任何值都可以在测试中进行操作。实现方法如下:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({
</span><span> geolocation: { longitude: </span><span style="color:#fdb082;">36.095388</span><span>, latitude: </span><span style="color:#fdb082;">28.0855558 </span><span>},
</span><span> userAgent: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">我的超级秘密代理值</span><span style="color:#ffffff;">"</span><span>,
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">覆盖配置</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>这将保留其他设置,只覆盖你需要的部分。</p>
<p><strong>彩蛋 -> 告诉我这里地理位置对应的地点名称,你将赢得我的金牌读者称号</strong></p>
<p>如果你想在同一个 spec 文件中有多个测试集,每个测试集都有自己的额外配置,可以这样做:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">webkit</span><span>, </span><span style="color:#e9fdac;">firefox</span><span>, </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">覆盖套件 1</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({
</span><span> viewport: { width: </span><span style="color:#fdb082;">400</span><span>, height: </span><span style="color:#fdb082;">810 </span><span>},
</span><span> geolocation: { longitude: </span><span style="color:#fdb082;">36.095388</span><span>, latitude: </span><span style="color:#fdb082;">28.0855558 </span><span>},
</span><span> userAgent: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">我的超级秘密代理值</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">覆盖测试 1</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">覆盖套件 2</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({
</span><span> viewport: { width: </span><span style="color:#fdb082;">768</span><span>, height: </span><span style="color:#fdb082;">1024 </span><span>},
</span><span> geolocation: { longitude: </span><span style="color:#fdb082;">36.095388</span><span>, latitude: </span><span style="color:#fdb082;">28.0855558 </span><span>},
</span><span> userAgent: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">我的第二个超级秘密代理值 2</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">覆盖测试 2</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>如果你想在 spec 文件级别应用相同的覆盖配置,只需将 test.use() 移到文件顶部,它就会应用于文件中的所有套件。</p>
<p>配置也可以通过 <a href="https://playwright.dev/docs/test-configuration?ref=blog.martioli.com#advanced-configuration">globalSetup</a> 完成。这是一种更优雅和高级的方法。我可能会在未来写一篇关于它的博文。</p>
<p>虽然不那么优雅,但还有另一种方法,你可以使用 context 传入配置覆盖。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">覆盖测试 1</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">iPhone 13</span><span style="color:#ffffff;">"</span><span>],
</span><span> isMobile: </span><span style="color:#ff8942;">true</span><span>,
</span><span> });
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://martioli.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<hr />
<h2 id="6-playwright-zhong-de-promise-all">6. Playwright 中的 Promise.all</h2>
<p>我想讨论这个问题,因为我经常看到人们在使用 Playwright 进行项目开发时,并不完全理解何时应该使用 Promise.all()。我会引用一个最佳解释(不是我的原话):</p>
<p>我将用 <code>waitForResponse()</code> 方法来举例说明</p>
<p>假设我们有一个搜索输入框和一个触发搜索的按钮,最终会向 API 发送请求(<a href="https://example.com/api/search?ref=blog.martioli.com">https://example.com/api/search</a>,搜索词在请求体中)</p>
<p>你可能会这样写代码:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>(); </span><span style="color:#6d6d6d;">// 搜索按钮
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForResponse</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/api/search</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p>上面的代码存在一个(很高的)可能性:在我们执行到 <code>await page.waitForResponse("https://example.com/api/search")</code> 这一行之前,我们已经收到了来自 <a href="https://example.com/api/search?ref=blog.martioli.com"><code>https://example.com/api/search</code></a> 的响应。<code>.click()</code> 方法不会立即 resolve,而是在 resolve await promise 并继续到下一行之前执行一系列(耗时的)步骤。</p>
<p><strong>敲黑板，乙醇的评论 👀。上面是原文的翻译，我尽力了，不过大家可能还是看不懂。其实作者的意思是上面的代码里<code>waitForResponse()</code>只有等到<code>click()</code>运行结束之后才会执行，而我们的目标是让这两行代码同时执行</strong></p>
<p>Await 按顺序异步执行代码,一个接一个。</p>
<p>我们真正想要的是 <code>await page.locator("button").click()</code> 和 <code>await page.waitForResponse("https://example.com/api/search")</code> 同时执行 - 这样两者都能正确完成各自的工作。</p>
<p>这就是 Promise.all() 发挥作用的地方。</p>
<p>Promise.all() 并发执行 promises,这意味着,</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>[</span><span style="color:#e9fdac;">response</span><span>] </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">all</span><span>([
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>(),
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForResponse</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com/api/search</span><span style="color:#ffffff;">"</span><span>),
</span><span>]);
</span></code></pre>
<p>同时执行 <code>.click()</code> 和 <code>.waitForResponse()</code>。整个 await Promise.all() 只有在所有传入的 promise 参数都 resolve 后才会 resolve。我们在这里遇到的问题被称为竞态条件。</p>
<p>许多 Playwright 事件 <code>(.waitForRequest(), .waitForResponse(), .waitForEvent(), ...)</code> 必须使用 Promise.all 与它们的触发器并发执行。</p>
<p>这里是<a href="https://github.com/microsoft/playwright/issues/5470?ref=blog.martioli.com#issuecomment-1285640689">完整解释的链接</a>,感谢 <a href="https://github.com/advename?ref=blog.martioli.com">advename</a></p>
<p>如果你觉得这篇文章有用,请点击鼓掌按钮。或者如果你想给我更多动力,<a href="https://ko-fi.com/adrianmaciuc?ref=blog.martioli.com">给我买杯咖啡</a>也行。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://blog.martioli.com/playwright-tips-and-tricks-3/">URL Source</a></p>
<p>Published Time: 2024-04-04</p>
如何使用 Playwright 进行LLM的提示词注入测试
2024-04-04T00:00:00+00:00
2024-04-04T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/testing-ai-how-to-create-automated-prompt-testing-with-playwright/
<h2 id="wo-fan-yi-de-hao-tong-ku-joy-xie-zai-qian-mian">我翻译的好痛苦 😂 写在前面</h2>
<p>这篇文章一开始看的我云山雾绕，后来我看了一下<a href="https://github.com/stuart-thomas-zoopla/LlmTestingWithPlaywright/tree/main/tests">作者的代码</a>，大概用一句话总结就是：作者用 playwright 调用 llm 的 api，然后实现了一些断言，用来检查 llm 是否存在注入的问题。</p>
<p>也就是说：<strong>不用 playwright，用其他的测试框架去测试也是没问题的。</strong></p>
<hr />
<p>欢迎来到我的 AI 测试系列的第二篇文章。本系列文章的灵感来源于 <strong><a href="https://www.ministryoftesting.com/events/30-days-of-ai-in-testing">Ministry of Testing 30 天 AI 测试活动</a></strong>。如果您还没有阅读系列的第一篇文章，请查看 – <a href="https://www.thequalityduck.co.uk/testing-ai-how-to-run-the-llama-2-large-language-model-locally/"><strong>测试 AI – 如何在本地运行 Llama 2 LLM</strong></a>。在本文中，我将讨论如何使用 Playwright 为大型语言模型 (LLM) 创建自动化提示测试框架。</p>
<h2 id="shi-yong-playwright-zi-dong-hua-llm-ce-shi">使用 Playwright 自动化 LLM 测试</h2>
<p>在我写完 <strong><a href="https://www.thequalityduck.co.uk/testing-ai-how-to-run-the-llama-2-large-language-model-locally/">上篇文章</a></strong> 后，我已经在本地运行了一个 LLM。接下来的问题是如何编写自动化测试？答案是使用 Playwright 进行提示测试。</p>
<h3 id="shen-me-shi-ti-shi-ce-shi">什么是提示测试？</h3>
<p>提示测试，有时称为提示工程，是向 LLM 提供提示并评估其响应的过程。在本文中，我不会详细讨论提示测试的细节，而是专注于如何创建可靠的自动化测试。</p>
<h3 id="zi-dong-hua-ti-shi-ce-shi-gong-ju">自动化提示测试工具</h3>
<p>在本文中，我将使用以下工具：</p>
<ul>
<li><strong><a href="https://llama.meta.com/llama2/">LLama 2</a></strong> – 由 Meta 创建的大型语言模型</li>
<li><strong><a href="https://github.com/ollama/ollama/blob/main/docs/api.md">Ollama</a></strong> – 用于本地运行 Llama 2 的工具</li>
<li><strong><a href="https://playwright.dev/">Playwright</a></strong> – 支持多种语言的测试框架</li>
</ul>
<p>Ollama 提供了一个用于与 LLM 交互的 API，这使得创建自动化提示测试变得简单。</p>
<p>对于测试，我选择使用 TypeScript 编写。我在 <strong><a href="https://github.com/stuart-thomas-zoopla/LlmTestingWithPlaywright">GitHub</a></strong> 上提供了我的示例测试框架。</p>
<p>虽然我们在进行 API 调用，但提示测试与 API 测试有显著区别。</p>
<h3 id="ti-shi-ce-shi-yu-api-ce-shi-de-qu-bie">提示测试与 API 测试的区别</h3>
<p>使用 API 进行测试使得 LLM 测试与其他 API 测试非常相似，但有一个关键区别。我们永远不能百分之百确定从 LLM 接收到的响应。为了解决这个问题，我们必须编写基于期望响应中包含的关键字或短语的断言，而不是对完整响应进行断言。我有一些关于如何改进这方面的方法 – <a href="https://www.thequalityduck.co.uk/testing-ai-how-to-create-automated-prompt-testing-with-playwright/#improving" title="稍后会详细介绍"><strong>稍后会详细介绍</strong></a>。</p>
<h3 id="jin-zhi-ci">“禁止词”</h3>
<p>我还尝试了一种“禁止词”的概念。这些是任何回复中都不应该包含的词，并且在所有测试中都要断言它们不在响应中。</p>
<p>根据 LLM 部署的上下文，这种用例会有所不同。我假设 LLM 是一个面向公众的服务。在这种情况下，有很多事情是您希望聊天机器人不要说的。从使用攻击性语言到评论竞争对手等。我们可以在所有测试中进行断言，并创建专门测试 <strong><a href="https://owasp.org/www-project-top-10-for-large-language-model-applications/Archive/0_1_vulns/Prompt_Injection.html">提示注入</a></strong> 的测试。</p>
<h3 id="shen-me-shi-llm-de-ti-shi-zhu-ru">什么是 LLM 的提示注入</h3>
<p><strong>描述:</strong> 提示注入涉及使用精心制作的提示绕过过滤器或操纵 LLM,使模型忽略先前的指令或执行非预期的操作。这些漏洞可能导致意外后果,包括数据泄露、未授权访问或其他安全漏洞。</p>
<p><strong>常见的提示注入漏洞:</strong></p>
<ul>
<li>制作能够操纵 LLM 泄露敏感信息的提示。</li>
<li>通过使用特定的语言模式或标记绕过过滤器或限制。</li>
<li>利用 LLM 的分词或编码机制中的弱点。</li>
<li>通过提供误导性上下文,误导 LLM 执行非预期操作。</li>
</ul>
<p><strong>如何预防:</strong></p>
<ul>
<li>对用户提供的提示实施严格的输入验证和清理。</li>
<li>使用上下文感知的过滤和输出编码来防止提示操纵。</li>
<li>定期更新和微调 LLM,以提高其对恶意输入和边缘情况的理解。</li>
<li>监控和记录 LLM 交互,以检测和分析潜在的提示注入尝试。</li>
</ul>
<p><strong>攻击场景示例:</strong></p>
<ul>
<li>
<p>场景 #1:_ 攻击者制作一个提示,通过让模型认为请求是合法的,从而欺骗 LLM 泄露敏感信息,如用户凭证或内部系统细节。</p>
</li>
<li>
<p>场景 #2:_ 恶意用户通过使用特定的语言模式、标记或编码机制绕过内容过滤器,而 LLM 未能识别这些内容为受限内容,从而允许用户执行原本应该被阻止的操作。</p>
</li>
</ul>
<h3 id="duan-yan-shi-xian">断言实现</h3>
<p>我将 <code>checkForForbiddenWords</code> 函数包含在 <code>checkResponseIncludes</code> 函数中，因为我不想在每个测试中专门调用它。但是，我也希望能够绕过它，因此我添加了一个变量来实现这一点。</p>
<p>Ollama API 提供了一种自动化单一提示和端到端对话的方法。对于端到端对话，我们提供用户和 LLM 的响应，直到最终响应。您可以在 <strong><a href="https://github.com/stuart-thomas-zoopla/LlmTestingWithPlaywright">GitHub</a></strong> 上看到这两种测试类型的示例。</p>
<h2 id="gai-jin-duan-yan">改进断言</h2>
<p>我决定以两种方式处理断言。第一种是对响应内容进行断言，这对任何做过 API 测试的人来说都很熟悉。</p>
<h3 id="dui-xiang-ying-nei-rong-jin-xing-duan-yan">对响应内容进行断言</h3>
<p>对于这部分测试，我只是断言响应包含某个关键字或短语。我为此创建了一个可重用的助手函数。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">word </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">expectedWords</span><span>) {
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">responseString</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#e9fdac;">word</span><span>)).</span><span style="color:#8cdaff;">toBeTruthy</span><span>();
</span><span>}
</span></code></pre>
<p>该函数设计为可以提供单个字符串或多个字符串（作为数组）。这使我能够创建检查响应中是否包含单词或短语的断言，或者它们的组合。</p>
<p>需要以允许 LLM 响应变化的方式进行断言，这使我们可能会遇到不稳定的测试结果。我们真正需要的是评估答案是否传达了我们预期的信息。</p>
<h3 id="shi-yong-llm-ce-shi-llm">使用 LLM 测试 LLM</h3>
<p>我们可以使用 LLM 来测试预期响应和实际响应在语义上是否相似，我称这种方法为评估 LLM。这样我们就不需要知道将要收到的确切响应，只需了解 LLM 对提示的回答大致会是什么样。</p>
<p>为此，我们提供一个类似这样的提示。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>If the following 2 statements appear to give accurate and corroborating answers to the same question respond 'Yes, the statements are similar'.
</span><span>Statement 1 - {{originalResponse}} - end of statement 1. Statement 2 - {{expectedResponse}} - end of statement2
</span></code></pre>
<p>当然，这意味着我们在用另一个黑箱测试一个黑箱。在我的示例中，我们实际上使用相同的 LLM 进行比较。尽管这并不理想，但可以用来演示概念。这确实可能会导致 LLM 的不正确评估，但提供了另一种检查响应的方法。需要指出的是，我创建的这个提示可能远非完美，需要随着时间的推移不断改进，但它可以用于概念演示。</p>
<p><img src="https://www.thequalityduck.co.uk/wp-content/uploads/2024/04/image-12.png" alt="Image 3" /></p>
<h3 id="wei-shen-me-bu-liang-zhe-jian-yong">为什么不两者兼用？</h3>
<p>我认为目前这种测试的最佳方法是结合传统断言和评估 LLM 的方法。这样，您可以使用传统断言检查响应中是否包含（或不包含）特定关键字，并使用评估 LLM 提供对预期答案语义相似度的信心。</p>
<p>在 <strong><a href="https://github.com/stuart-thomas-zoopla/LlmTestingWithPlaywright">GitHub</a></strong> 上，我提供了一个使用评估 LLM 的示例测试。在这个示例中，我再次使用 Llama 2 评估其提供的答案质量，并将其与已知答案进行对比。</p>
<h2 id="zhuan-yong-llm-ce-shi-gong-ju">专用 LLM 测试工具</h2>
<p>市面上有专门的 LLM 测试工具，我在使用 Playwright 之前也看过几个。</p>
<h3 id="promptize">promptize</h3>
<p>其中一个我想进一步调查的是 <strong><a href="https://github.com/preset-io/promptimize">promptize</a></strong>，因为它提供了一些使用 Playwright 这样的工具时不存在的额外功能。不幸的是，它专门支持 OpenAI，经过快速研究后，我决定重构它以支持其他工具和模型需要投入更多时间和精力，这超出了我目前的能力范围。也许将来会有机会继续研究。</p>
<h3 id="promptfoo">promptfoo</h3>
<p>我还发现了 <strong><a href="https://github.com/promptfoo/promptfoo">promptfoo</a></strong>，看起来很有前途。它比 promptize 更开放，并且提供了一些不错的原生功能，包括创建测试矩阵。</p>
<p>我尚未投入足够的时间来研究 promptfoo。相对于我的 Playwright 解决方案，使用这样的工具确实更有吸引力，因此我肯定会在未来继续研究。我预计要获得一致的结果，我需要比目前更多地定制我的配置。</p>
<h3 id="trulens">Trulens</h3>
<p><strong><a href="https://www.trulens.org/">Trulens</a></strong> 类似于 promptfoo。它提供了一种评估 LLM 质量的方法，而不是严格的测试工具。在撰写本文时，我仍在研究 Trulens，但它看起来很有前途，我会很快写一篇关于它的完整文章。</p>
<h2 id="zong-jie">总结</h2>
<p>自动化提示测试感觉就像是 web 应用程序的自动化 UI 测试。它不需要了解底层的运行机制，并且类似于最终用户体验应用程序的方式。然而，由于不同的原因，它也具有一些相同的缺点，主要是运行成本高昂。在 LLM 的情况下，这是因为当它们托管在云上时，您会因每次提示而被收费。</p>
<p>自动化提示测试是我们开始自动化测试的一个很好的起点，但我们绝对需要深入了解底层机制，以最有效地进行测试。在未来的文章中，我希望进一步探索专用的 LLM 测试工具，以及研究专业的可观测性工具，敬请期待！</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://www.thequalityduck.co.uk/testing-ai-how-to-create-automated-prompt-testing-with-playwright/">来源</a></p>
<p>发布时间: 2024-04-04</p>
如何用标签来优化你的 Playwright 测试套件
2024-03-18T00:00:00+00:00
2024-03-18T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/strategic-tagging-optimizing-your-playwright-test-suit/
<p>你是否发现自己每次都在运行完整的自动化测试套件?利用标签(tags)可以精准过滤一部分用例来加速这一过程。</p>
<p>随着软件项目的发展和自动化项目的扩展,测试数量通常会随着新功能的引入而增加。此时,只运行某些测试的子集变得非常有用。尽管 Playwright 允许测试并行运行,但将测试分割成更小的组别在某些时候会更有益。虽然维护一个强大的自动化测试套件对产品质量至关重要,但不谨慎的测试自动化可能会显著降低团队的进度。一个有效的策略是通过标签来分类你的自动化测试,并在软件开发过程的不同阶段只执行完整测试套件的一个子集。</p>
<p><strong>考虑以下示例:</strong></p>
<p>◾ 在非工作时间运行整个测试套件而不打扰团队,并在 pull request 上有选择地运行测试子集,以保持 <strong>CI 流水线</strong> 的速度和效率。<br />
◾ 允许特定团队(如 QA 或功能团队)只运行他们负责的测试。<br />
◾ 在生产发布期间运行只涉及读取操作(没有写入操作)的冒烟测试。</p>
<p>标签用于在 HTML 报告、UI 模式或 VSCode 扩展中过滤测试。</p>
<p>使用标签系统允许你将测试分类为逻辑集合。标签使用测试描述中的 <strong>@tag</strong> 语法定义。虽然技术上任何字符串都可以作为标签,但文档更倾向于使用 <strong>@tag</strong> 语法,所以建议遵循这个规则。</p>
<p><strong>如何安装 Playwright?</strong></p>
<p>npm init playwright@latest</p>
<p>更多详细信息请访问官方 <a href="https://playwright.dev/docs/intro">Installation | Playwright</a> 文档。</p>
<p><strong>如何运行 Playwright 测试?</strong></p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p><strong>旧的 Playwright 语法:</strong></p>
<p>过去,标签被整合到测试标题中,这仍然是一种受支持的方法。然而,这种方法会导致 HTML 报告不好看。Playwright 会自动从标题中提取标签并将其显示为标签,以提高可见性,从而消除了在标题内进行冗余标签的需求。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright Landing page - Has title @Smoke</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.dev/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveTitle</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Playwright</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span></code></pre>
<p><strong>如何按标签运行测试?</strong></p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>npx playwright test --grep @Smoke
</span></code></pre>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*sh8nQ1APLG4vq_0T7DshFw.png" alt="图片 4" /></p>
<p>👆 旧的 Playwright 标签语法示例</p>
<p><strong>新的 Playwright 语法:</strong></p>
<p>根据官方文档所述,引入新的标签语法的原因源于先前语法在 HTML 报告中显得有些冗余，而且也看不太出来。正如我们在旧的 Playwright 语法部分所展示的那样。这种标签方式可能导致混淆和显著的重复,尤其是在处理大量标签时。</p>
<p>要采用新语法,只需生成一个包含标签的数组或单个标签的标签对象:</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">test</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright Landing page - Has title</span><span style="color:#ffffff;">"</span><span>,
</span><span> { tag: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@Smoke</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@UI</span><span style="color:#ffffff;">"</span><span>] },
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.dev/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveTitle</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Playwright</span><span style="color:#ffffff;">/</span><span>);
</span><span> }
</span><span>);
</span></code></pre>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*ldDx5Z4uAqPunnQ9ZzFJHw.png" alt="图片 5" /></p>
<p>👆 新的 Playwright 标签语法示例</p>
<p>从新语法可以看出,标签不再显示在测试名称内,从而显著提高了可读性。</p>
<p>标签也适用于 describe 语法块:</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Group Example</span><span style="color:#ffffff;">"</span><span>, { tag: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@Group</span><span style="color:#ffffff;">" </span><span>}, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright Landing page - Has title</span><span style="color:#ffffff;">"</span><span>,
</span><span> { tag: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@Smoke</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@UI</span><span style="color:#ffffff;">"</span><span>] },
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwright.dev/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveTitle</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Playwright</span><span style="color:#ffffff;">/</span><span>);
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright Github</span><span style="color:#ffffff;">"</span><span>,
</span><span> { tag: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@Smoke</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@UI</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@Fast</span><span style="color:#ffffff;">"</span><span>] },
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://github.com/microsoft/playwright</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span> );
</span><span>});
</span></code></pre>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*Ry1DaYod_eLcC-HfEP9aKw.png" alt="图片 6" /></p>
<p>⬆️ Describe 块标签语法示例</p>
<p>使用以下命令将 Playwright 更新到最新版本:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> install</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> @playwright/test@latest
</span></code></pre>
<p>同时下载新的浏览器二进制文件及其依赖项:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright install</span><span style="font-style:italic;color:#fc9354;"> --with-deps
</span></code></pre>
<p>要验证你机器上安装的版本,请使用以下命令:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright</span><span style="font-style:italic;color:#fc9354;"> --version
</span></code></pre>
<h2 id="zai-ce-shi-guan-li-zhong-shi-yong-tag-de-you-shi">在测试管理中使用 @tag 的优势:</h2>
<p><strong>简化测试用例管理:</strong> <strong>@tag</strong> 通过对测试用例进行分类来简化测试管理。这种分类允许根据标签快速过滤和识别相关的测试用例。你可以轻松根据特定标签执行的具体的测试用例。</p>
<p><strong>标签统计热图:</strong> 分析仪表板上提供的标签统计热图提供了有价值的总览。它允许你跟踪与标签相关的指标,如标签总数和带有特定标签的测试用例数量。然而,跟踪按标签划分的测试自动化覆盖率也很重要。</p>
<p><strong>自定义测试场景:</strong> 你可以灵活地为任何自定义测试场景定义有用的标签。这允许来自不同功能、测试套件或功能文件(BDD)的场景一起执行。例如,你可以执行所有标签为 <strong>@Smoke</strong> 的测试,同时排除那些标签为 <strong>@Regression</strong> 的测试。</p>
<h2 id="yi-xie-ju-ti-de-fen-lei-shi-li">一些具体的分类示例</h2>
<p><strong>冒烟测试</strong> 是一种在软件构建完成后执行的软件测试技术,用于验证软件的关键功能是否正常工作。它在执行任何详细的功能或回归测试之前进行。冒烟测试的主要目的是拒绝存在错误的软件应用,以便 QA 工程团队不会浪费时间测试一个有问题的软件应用。</p>
<p><strong>健全性测试</strong> 是一种在收到软件的中间版本后执行的软件测试类型,通常涉及对代码或功能的微小更改。其目的是确保错误已被修复,并且这些更改没有引入新的问题。目标是验证预期的功能大致按预期工作。如果正确性测试给出错误结果,构建将被拒绝,以避免在更广泛的测试上花费时间和资源。</p>
<p><strong>回归测试</strong> 是在代码更新后进行的一种软件测试,以确保更新没有引入新的错误。这是因为新代码可能带来与现有代码冲突的新逻辑,导致缺陷。通常,QA 团队会为重要功能准备一系列回归测试用例,每次发生这些代码更改时都会重新执行这些用例,以节省时间并最大化测试效率。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:553/1*hirQV3d8tQpEWEuZq-wiCQ.png" alt="图片 7" /></p>
<p>因此,组织好你的测试标签策略非常重要。当你想只运行特定的测试集而不是整个套件时,你就处于更有利的位置。在 Smoke 标签名下,你可以只运行冒烟测试,或者单独运行回归测试。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://medium.com/@merisstupar11/strategic-tagging-optimizing-your-playwright-test-suit-4ab109343fed">URL 来源</a></p>
<p>发布时间: 2024-03-18</p>
如何让playwright的测试用例运行的更加稳定
2024-03-13T00:00:00+00:00
2024-03-13T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/flaky-tests-playwright/
<p><strong>写在前面 by 乙醇 💡: 英文里有个专用名词叫做 flaky test，也就是易碎的测试用例的意思，中文直接翻译过来不太好听，我一般喜欢翻译成不稳定的测试用例，大家以后看到这个词大概知道是什么意思就好了</strong></p>
<p>Flaky test 是指在不同运行时产生不同结果的测试。有时它会通过，有时又会失败，原因不明。可以想象，导致这种行为背后一定有一些原因。这个问题在 UI 和 E2E 工具如 Playwright 上尤为明显。</p>
<p>Playwright 中的 flaky tests 是 CI 流水线的最大敌人之一，因为它们会导致看似随机的流水线任务失败。因此，一定要想办法避免不稳定的测试用例出现！</p>
<p>在本指南中，你将了解什么是 flaky test 及其主要原因。然后，你将探索一些避免在 Playwright 中出现 flaky tests 的最佳实践。</p>
<p>让我们开始吧！</p>
<h2 id="shen-me-shi-playwright-zhong-de-flaky-test-bu-wen-ding-de-ce-shi-yong-li">什么是 Playwright 中的 Flaky Test(不稳定的测试用例)？</h2>
<p>Flaky test 是指在同一个 <a href="https://docs.github.com/en/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/about-commits#about-commits">commit SHA</a> 上，测试结果不一致的测试。识别这种测试的另一个规则是“如果它在分支上通过，但在合并后失败，它可能是 flaky test。”在 Playwright 中，当一个测试第一次失败但重试之后通过时，这个测试就耀被标记为“flaky”。</p>
<p>Playwright 中的 flaky tests 在 CI 流水线中的影响尤为显著，因为它们的不一致性导致了同一次代码提交在不同尝试中出现不可预测的失败。为了确保成功部署，流水线需要在失败时多次运行。这会让 ci 的效率变低，并打击开发人员的信心，因为每次部署似乎都受到看似随机的测试不通过的影响。</p>
<h2 id="ce-shi-wei-he-hui-bian-de-flaky-de-yuan-yin">测试为何会变得 Flaky 的原因</h2>
<p>以下是导致测试变得 flaky 的一些重要原因：</p>
<ul>
<li><strong>竞争条件</strong>：并发操作导致动态页面产生变化，然后就造成了意外的行为。</li>
<li><strong>被测应用太慢</strong>：如果被测应用程序运行在性能不好的机器上，测试中使用的超时可能会导致测试间歇性失败。</li>
<li><strong>测试中的 bug</strong>：测试脚本中的特定选择器，如不可靠的节点定位器，可能是测试不稳定的原因。</li>
</ul>
<p>这些因素可以单独或共同导致测试变得 flaky。现在，让我们看看如何通过一些最佳实践来防止这些问题！</p>
<h2 id="zai-playwright-zhong-bi-mian-bian-xie-flaky-tests-de-ce-lue">在 Playwright 中避免编写 Flaky Tests 的策略</h2>
<p>在开始之前，请记住，你可以在 <a href="https://github.com/microsoft/playwright.git">Playwright 的 GitHub 仓库</a> 中找到一些 Playwright 示例测试来练习。Clone 仓库，安装 Playwright，并使用以下命令启动测试：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">git</span><span> clone https://github.com/microsoft/playwright.git
</span><span style="color:#6699cc;">cd</span><span> playwright/examples/todomvc/
</span><span style="color:#e9fdac;">npm</span><span> install </span><span style="color:#ff5e5e;">&& </span><span style="color:#e9fdac;">npx</span><span> playwright install
</span><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p>现在，我们去官方文档里看一下官方推荐的避免 flaky tests 的最佳策略。</p>
<h3 id="zai-ti-jiao-zhi-qian-yun-xing-he-diao-shi-ce-shi">在提交之前运行和调试测试</h3>
<p>避免 Playwright flaky tests 的最简单和直观的方法是尝试预防它们。这个想法是在本地彻底检查所有测试，然后再提交。这样，你可以确保它们在不同情况下都是健壮的并且按预期工作。</p>
<p>由于 flaky test 比较鬼魅，不是每次都会报错，你应该尝试多次运行每个测试，并在与生产服务器类似资源的机器上进行测试。在本地测试中更改环境会产生与 CI/CD 流水线结果不一致的结果。</p>
<p>在正确设置环境和配置 Playwright 后，你可以使用以下命令在本地运行所有测试：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p>一旦测试运行完毕，如果有些测试失败，<a href="https://playwright.dev/docs/test-reporters#html-reporter">Plawright HTML 报告</a> 将自动打开，你也可以使用以下命令手动打开报告：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright show-report
</span></code></pre>
<p>生成的 HTML 文件将显示所测试执行的完整报告。详细来说，它允许你通过 flaky tests 过滤结果：</p>
<p><img src="blob:https://semaphoreci.com/f5cac92d0c758d8aba7147f0dca557df" alt="Image 1" /></p>
<p>请记住，当一个测试第一次失败但在另一尝试中通过时，它会被标记为“faulty”。换句话说，如果你想在本地检测 flaky tests，你需要配置 Playwright 在失败时自动重试（retry）测试。</p>
<p>在识别出 flaky test 后，你可以使用 <a href="https://playwright.dev/docs/debug">Playwright 提供的许多调试工具</a> 中的任意工具进行调试。例如，假设检测到的 flaky test 定义在 <code>landing-page.spec.ts</code> 文件第 15 行的 <a href="https://playwright.dev/docs/api/class-test"><code>test()</code></a> 函数中。用下面的命令进行调试：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>npx playwright test landing-page.spec.ts:15 --debug
</span></code></pre>
<p>另外强烈推荐使用 <a href="https://playwright.dev/docs/test-ui-mode">UI 模式</a> 进行调试，因为它提供了一种时间旅行体验，使你能够直观地检查和浏览测试执行的所有操作：</p>
<p><img src="blob:https://semaphoreci.com/f76b32e76d6f5786a90be088d7c98470" alt="Image 2: Debugging tools for Playwright" /></p>
<h3 id="shi-yong-locators-er-fei-selectors">使用 Locators 而非 Selectors</h3>
<p>编写健壮的 E2E(ui 自动化) 测试用例的关键点之一是为 HTML 节点编写稳定的定位策略。虽然你可能熟悉 XPath 和 CSS 选择器，但在测试中它们并不是最佳解决方案。问题在于使用 JavaScript 的现代页面里，很多 DOM 是动态的，这种静态选择器可能导致测试不稳定。</p>
<p>这就是为什么 Playwright 推荐使用 <a href="https://playwright.dev/docs/locators">locators</a>，它们更接近用户对页面的感知。你应该 <a href="https://playwright.dev/docs/locators#locate-by-test-id">定位自定义的 testID</a> 或使用 <a href="https://playwright.dev/docs/locators#locate-by-role">Role Locator</a>，而不是编写 CSS 选择器。Locators 代表一种在任何时刻进行查找页面元素的方法，它们是 Playwright 自动等待和重试能力的核心。</p>
<p>以下是你应该使用的推荐内置定位器函数：</p>
<ul>
<li><a href="https://playwright.dev/docs/locators#locate-by-role"><code>page.getByRole()</code></a>：按显式和隐式可访问性属性定位元素。</li>
<li><a href="https://playwright.dev/docs/locators#locate-by-text"><code>page.getByText()</code></a>：按文本内容定位节点。</li>
<li><a href="https://playwright.dev/docs/locators#locate-by-label"><code>page.getByLabel()</code></a>：通过关联标签的文本定位表单控件。</li>
<li><a href="https://playwright.dev/docs/locators#locate-by-placeholder"><code>page.getByPlaceholder()</code></a>：按占位符定位输入。</li>
<li><a href="https://playwright.dev/docs/locators#locate-by-alt-text"><code>page.getByAltText()</code></a>：通过其 <code>alt</code> 文本替代项定位元素，通常是图像。</li>
<li><a href="https://playwright.dev/docs/locators#locate-by-title"><code>page.getByTitle()</code></a>：通过其 <code>title</code> 属性定位元素。</li>
<li><a href="https://playwright.dev/docs/locators#locate-by-test-id"><code>page.getByTestId()</code></a>：基于其 <code>data-testid</code> 属性定位元素。</li>
</ul>
<p>现在，考虑以下 CSS 选择器：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>.</span><span style="color:#e9fdac;">btn</span><span style="color:#ff5e5e;">-</span><span style="color:#e9fdac;">primary</span><span>.</span><span style="color:#e9fdac;">submit
</span></code></pre>
<p>这很容易理解，但它显然没有以下表达式健壮和具有表现力：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Submit</span><span style="color:#ffffff;">" </span><span>});
</span></code></pre>
<p>虽然 HTML 元素在 DOM 中的 <code>class</code> 属性可以动态更改，但其在页面上的文本和 role 不太可能轻易更改。</p>
<p>如果你绝对必须使用 CSS 或 XPath，请尽量编写一致且通用的选择器。XPath 和 CSS 选择器很容易与页面的 dom 结构绑在一起，这就非常恶心了，因为当页面结构发生一点点改变时测试就会不通过。记住，一长串的 CSS 或 XPath 选择器是不好的，这会导致测试变得 flaky 且难以维护。</p>
<h3 id="yong-yuan-bu-yao-yi-lai-ying-deng-dai">永远不要依赖硬等待</h3>
<p>在测试中，硬等待是指在测试逻辑中添加固定时间延迟。其想法是暂停测试执行一段时间，以等待特定操作完成。虽然这是一种直接的等待方法，但它是导致 flaky tests 的主要原因之一。</p>
<p>例如这个例子:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">"Load More" button loads new products</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 导航到要测试的页面
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">https://localhost:3000/products</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 选择“Load More”按钮
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loadMoreButton </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">'</span><span>, { name: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Load More</span><span style="color:#ffffff;">' </span><span>});
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 点击“Load More”按钮
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loadMoreButton</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 暂停测试执行 10 秒等待
</span><span> </span><span style="color:#6d6d6d;">// 新产品加载到页面上
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForTimeout</span><span>(</span><span style="color:#fdb082;">10000</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 计算页面上的产品元素数量
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productNodes </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.product</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">count</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 验证页面上有
</span><span>
</span><span style="color:#fdb082;">10 </span><span style="color:#e9fdac;">个新产品
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productNodes</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">10</span><span>);
</span><span>});
</span></code></pre>
<p>用例假设页面上的产品将会在 10 秒内加载完毕。如果页面的性能低于预期，这种硬等待时间将导致测试失败。同样，如果应用程序在预期时间之前就加载完成了，10 秒的延迟将使测试变得更慢且效率低下。</p>
<p>Playwright 通过其 <a href="https://playwright.dev/docs/api/class-page#page-wait-for"><code>page.waitFor()</code></a> 方法提供了更好的替代方案。这个方法允许你明确的等待元素满足特定条件：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">"Load More" button loads new products</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 导航到要测试的页面
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/products</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 选择“Load More”按钮
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loadMoreButton </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Load More</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 点击“Load More”按钮
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loadMoreButton</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 等待 10 个产品元素出现在页面上
</span><span> </span><span style="color:#6d6d6d;">// 来自乙醇的注释⚡️ waitForSelector方法已经不推荐使用了，请使用locator.waitFor()来替代
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForSelector</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.product:nth-of-type(10)</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 计算页面上的产品元素数量
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productNodes </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.product</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">count</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 验证页面上有 10 个新产品
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productNodes</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">10</span><span>);
</span><span>});
</span></code></pre>
<p><code>page.waitForSelector()</code> 方法会自动轮询 DOM，直到满足指定条件。这使得测试更具确定性并减少了硬等待带来的风险。</p>
<p>来自乙醇的注释：👆 上面的方法已经不推荐使用了，现在应该使用<a href="https://playwright.dev/docs/api/class-locator#locator-wait-for">locator.waitFor()</a> 方法来替代。</p>
<h3 id="li-yong-playwright-nei-zhi-zhong-shi">利用 Playwright 内置重试</h3>
<p>正如你在前一节中看到的，当测试失败时，Playwright 会标记它为 flaky。这会在生成报告中用黄色条目高亮显示 flaky tests。为了减少 CI/CD 流水线中的 flaky tests 干扰，你可以使用 Playwright 的 <a href="https://playwright.dev/docs/test-configuration#retries"><code>retries</code></a> 选项来设置测试的重试测试：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> retries: </span><span style="color:#fdb082;">2</span><span>, </span><span style="color:#6d6d6d;">// 当测试失败时自动重试
</span><span> use: {
</span><span> baseURL: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>});
</span></code></pre>
<p>配置后，当一个测试失败时它将自动重试两次。在本地，你可以设置更高的重试次数来检测 flaky tests。</p>
<p>Playwright 的重试功能通过确保测试用例在因为</p>
<ul>
<li>短暂的网络问题</li>
<li>或其他外部因素</li>
</ul>
<p>运行失败后，最终还可以获得正确的结果，是一种建议掌握和设置的保底方式。</p>
<h3 id="diao-zheng-chao-shi-she-zhi">调整超时设置</h3>
<p>为了更好地控制 Playwright 的行为，你可以配置各种超时设置。调整这些超时值可以帮助你避免由于应用程序响应时间慢或网络延迟而导致的 flaky tests。</p>
<ul>
<li><strong>测试超时</strong>：通过 <a href="https://playwright.dev/docs/test-configuration#test-timeout">testTimeout</a> 配置单个测试的超时时间。例如：</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> timeout: </span><span style="color:#fdb082;">60000</span><span>, </span><span style="color:#6d6d6d;">// 单个测试的超时时间为 60 秒
</span><span>});
</span></code></pre>
<ul>
<li><strong>浏览器上下文</strong>：配置 <a href="https://playwright.dev/docs/api/class-browser#browser-launch"><code>launch</code></a> 方法的 <code>timeout</code> 参数以控制启动浏览器的超时时间：</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">chromium</span><span>.</span><span style="color:#8cdaff;">launch</span><span>({
</span><span> headless: </span><span style="color:#ff8942;">true</span><span>,
</span><span> timeout: </span><span style="color:#fdb082;">30000</span><span>, </span><span style="color:#6d6d6d;">// 启动浏览器的超时时间为 30 秒
</span><span> });
</span><span>})();
</span></code></pre>
<ul>
<li><strong>等待页面加载</strong>：通过 <a href="https://playwright.dev/docs/api/class-page#page-goto"><code>page.goto()</code></a> 的 <code>timeout</code> 参数控制页面加载的超时时间：</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/products</span><span style="color:#ffffff;">"</span><span>, {
</span><span> timeout: </span><span style="color:#fdb082;">45000</span><span>, </span><span style="color:#6d6d6d;">// 页面加载的超时时间为 45 秒
</span><span>});
</span></code></pre>
<p>调整这些超时配置确保了 Playwright 在不同情景中能够满足你测试的实际情况，从而减少了由于超时问题导致的 flaky tests。</p>
<h3 id="bao-chi-ce-shi-shu-ju-du-li-xing">保持测试数据独立性</h3>
<p>在 E2E 测试中，数据隔离是一个关键问题。共享状态会导致意外行为，尤其是在测试用例之间共享同一数据集时。为避免此问题，你应该确保每个测试都在干净和独立的状态下执行。</p>
<p>Playwright 提供了内置的 <a href="https://playwright.dev/docs/test-fixtures">Fixtures</a> 支持，可以用于确保每个测试都有独立的测试数据。例如，你可以使用 Fixtures 来创建测试用户并在每个测试之后清除它们。</p>
<p>假设你有一个包含用户登录的测试集。你可以通过以下方式设置 Fixtures， 这样每个测试都会独立运行：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 创建一个新的用户对象
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">user</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 注册新的测试用户
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/register</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[name="username"]</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testuser</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[name="password"]</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password123</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button[type="submit"]</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 在测试中使用新用户
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>({ username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testuser</span><span style="color:#ffffff;">"</span><span>, password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password123</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 清除测试用户
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/admin</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">button[aria-label="Delete testuser"]</span><span style="color:#ffffff;">`</span><span>);
</span><span> },
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">User can login</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">user </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[name="username"]</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#e9fdac;">user</span><span>.</span><span style="color:#e9fdac;">username</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[name="password"]</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#e9fdac;">user</span><span>.</span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">click</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">button[type="submit"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/dashboard</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>通过确保测试数据的独立性，你可以避免由于共享状态导致的 flaky tests。</p>
<h3 id="he-li-shi-yong-browsercontext">合理使用 BrowserContext</h3>
<p><a href="https://playwright.dev/docs/api/class-browsercontext"><code>BrowserContext</code></a> 是 Playwright 中的一个强大概念。它允许在单个浏览器实例中创建独立的浏览器会话。这意味着你可以并行运行多个测试而不会相互干扰。</p>
<p>通过为每个测试创建新的 <code>BrowserContext</code>，你可以确保测试的独立性。例如：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Run tests in isolated context</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">chromium</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 为第一个测试创建新的 BrowserContext
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context1 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page1 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context1</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page1</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/products</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 执行第一个测试的操作...
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 为第二个测试创建新的 BrowserContext
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page2 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context2</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page2</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://localhost:3000/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 执行第二个测试的操作...
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#6699cc;">close</span><span>();
</span><span>});
</span></code></pre>
<p>通过使用 <code>BrowserContext</code>，你可以在单个浏览器实例中创建多个隔离的会话，从而减少 flaky tests 的发生。</p>
<h2 id="xiao-jie">小结</h2>
<p>编写稳定的 E2E 测试是确保持续交付流水线高效和可靠的关键。虽然 Playwright 是一个强大的测试工具，但它也容易受到 flaky tests 的影响。然而，通过遵循本文中讨论的最佳实践，你可以显著减少 flaky tests 并得到更一致和可靠的测试结果。</p>
<p>总而言之，避免 flaky tests 的关键在于：</p>
<ul>
<li>通过本地反复的检查和调试，多次运行测试用例来进行预防。</li>
<li>使用 Playwright 的内置重试策略和调整超时配置。</li>
<li>避免硬等待，使用 Playwright 的 <code>waitFor</code> 方法。</li>
<li>利用 Playwright 的定位器(locator)，而非静态选择器(css/xpath selector)。</li>
<li>保持测试数据的独立性。</li>
<li>合理使用 BrowserContext 创建独立的浏览器会话。</li>
</ul>
<p>这些策略将帮助你编写更健壮和可靠的 E2E 测试，从而提高 CI/CD 流水线的效率和稳定性。</p>
<h2 id="zuo-zhe-alexandra-zlate">作者：Alexandra Zlate</h2>
<p>Alexandra 是 Test Automation 的成员。她热衷于帮助团队提高测试自动化的成熟度并使用最佳实践。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://semaphoreci.com/blog/flaky-tests-playwright">URL Source</a></p>
<p>发布日期: 2024-03-13</p>
全面的基于 Playwright 的ui自动化测试，使用页面对象模型的模块化框架
2024-03-12T00:00:00+00:00
2024-03-12T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/comprehensive-playwright-powered-end-to-end-testing-modular-framework-using-page-object-model-5143db40a15b/
<h2 id="guan-jian-te-xing">关键特性</h2>
<ul>
<li><strong>模块化设计</strong>：通过为“操作”和“断言”创建单独的类，促进代码的重用性和可维护性。</li>
<li><strong>数据生成</strong>：支持使用工具函数和 API 调用生成测试数据。</li>
<li><strong>页面对象模型</strong>：用于维护页面元素定位器的通用类。</li>
<li><strong>Fixture</strong>：提供一致且高效的统一配置和钩子函数。</li>
</ul>
<h2 id="he-xin-zu-jian-jie-shao">核心组件介绍</h2>
<h3 id="ye-mian-dui-xiang-mo-xing-pom">页面对象模型（POM）</h3>
<p>页面对象模型是一种设计模式，鼓励更好的测试维护并减少代码重复。它将页面细节抽象为对象，使测试人员能够编写更具可读性和更强健的测试用例，尤其适用于 Web 应用程序测试。</p>
<h3 id="ye-mian-dui-xiang-pages">页面对象（pages/）</h3>
<p>页面对象代表被测试的 Web 应用程序的页面元素定位符。</p>
<h3 id="cao-zuo-actions">操作（actions/）</h3>
<p>我们为操作创建了单独的类，这些操作使用页面对象与 UI 进行交互。</p>
<h3 id="duan-yan-assertions">断言（assertions/）</h3>
<p>我们为断言创建了单独的类，这些断言在执行操作后验证应用程序的状态，确保应用程序表现如预期。</p>
<h3 id="gong-ju-utils">工具（utils/）</h3>
<p>工具函数提供可在测试中重复使用的通用功能，例如生成随机图书数据。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*5qFbO9ZPFhouSWgPwAeE-Q.png" alt="Image 3" /></p>
<h3 id="ce-shi-yong-li-tests-e2e">测试用例（tests/e2e/）</h3>
<p>测试用例定义 ui 自动化的测试场景，聚焦于应用程序的特定功能或特性。</p>
<p><strong>用例 1</strong>：在此测试中，我们调用“generateRandomBookData”函数生成测试数据，并将其作为参数传递到测试中。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../fixtures/addBooks_fixture.js</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">generateRandomBookData </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../utils/generateRandomBookData.js</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#e9fdac;">describe</span><span>.</span><span style="color:#8cdaff;">serial</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">添加图书功能</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">title</span><span>, </span><span style="color:#e9fdac;">isbn</span><span>, </span><span style="color:#e9fdac;">genre</span><span>, </span><span style="color:#e9fdac;">summary</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 在所有测试之前生成一次图书数据
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookData </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">generateRandomBookData</span><span>();
</span><span> ({ </span><span style="color:#e9fdac;">title</span><span>, </span><span style="color:#e9fdac;">isbn</span><span>, </span><span style="color:#e9fdac;">genre</span><span>, </span><span style="color:#e9fdac;">summary </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">bookData</span><span>); </span><span style="color:#6d6d6d;">// 解构并分配给局部变量
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:3000/books</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证-> 新书添加</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">addBookActions</span><span>, </span><span style="font-style:italic;color:#fc9354;">addBookAssertions </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 在我们的测试中使用生成的图书数据
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">addBookAssertions</span><span>.</span><span style="color:#8cdaff;">nodataValidationisPresent</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">addBookActions</span><span>.</span><span style="color:#8cdaff;">clickaddBook</span><span>(</span><span style="color:#e9fdac;">title</span><span>, </span><span style="color:#e9fdac;">genre</span><span>, </span><span style="color:#e9fdac;">isbn</span><span>, </span><span style="color:#e9fdac;">summary</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">addBookAssertions</span><span>.</span><span style="color:#8cdaff;">verifyBookInTable</span><span>(</span><span style="color:#e9fdac;">title</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">addBookAssertions</span><span>.</span><span style="color:#8cdaff;">nodataValidationisNotPresent</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<p><strong>用例 2</strong>：在此测试中，当我们无法在 UI 中生成数据，并且需要通过 API 调用获取测试数据时，可以在 before hooks 中调用 API。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../fixtures/updateBooks_fixture.js</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">generateRandomBookData </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../utils/generateRandomBookData.js</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">addBookViaAPI </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../requests/addBooks.js</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#e9fdac;">describe</span><span>.</span><span style="color:#8cdaff;">serial</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">查看更多，编辑，删除功能</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 使用requests/addBooks.js文件生成图书数据
</span><span> </span><span style="color:#8cdaff;">addBookViaAPI</span><span>(</span><span style="color:#8cdaff;">generateRandomBookData</span><span>());
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:3000/books</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证-> 查看更多功能</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">updateBookActions </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookActions</span><span>.</span><span style="color:#8cdaff;">clickviewMore</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证-> 编辑功能</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> </span><span style="color:#e9fdac;">updateBookActions</span><span>,
</span><span> </span><span style="color:#e9fdac;">updateBookAssertions</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookActions</span><span>.</span><span style="color:#8cdaff;">clickeditBook</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookAssertions</span><span>.</span><span style="color:#8cdaff;">verifyUpdatedBookInTable</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_editText</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证-> 删除功能</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> </span><span style="color:#e9fdac;">updateBookActions</span><span>,
</span><span> </span><span style="color:#e9fdac;">updateBookAssertions</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookActions</span><span>.</span><span style="color:#8cdaff;">clickdeleteBook</span><span>(); </span><span style="color:#6d6d6d;">// 删除在此测试中添加的书籍
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookAssertions</span><span>.</span><span style="color:#8cdaff;">verifyBookNotIntable</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_editText</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookActions</span><span>.</span><span style="color:#8cdaff;">clickdeleteBook</span><span>(); </span><span style="color:#6d6d6d;">// 删除剩余的另一书籍
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">updateBookAssertions</span><span>.</span><span style="color:#8cdaff;">nodataValidationisPresent</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="tong-guo-fixture-zeng-qiang-ce-shi">通过 Fixture 增强测试</h3>
<p>Fixture 管理测试的配置和解变量的过程，初始化数据、配置测试环境或分配测试可能需要的资源。</p>
<h3 id="shi-yong-fixture-de-hao-chu">使用 Fixture 的好处</h3>
<ul>
<li><strong>一致性</strong>：确保每个测试在相同条件下运行。</li>
<li><strong>效率</strong>：智能管理资源，加快测试过程。</li>
</ul>
<h3 id="shi-xian-fixture">实现 Fixture</h3>
<p>我们的框架利用 Playwright 的 Fixture 来增强测试工作流，管理 BrowserContext、页面对象、操作和断言的自定义 Fixture。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">baseTest </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">AddBookActions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/addBooks/addBooks_actions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">AddBooksAssertions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/addBooks/addBooks_assertions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">AddBookPageObjects </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/addBooks/addBooks_pageObjects</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">baseTest</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">context</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">context</span><span>);
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">page</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">context </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">addBookActions</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#ff5e5e;">new </span><span>AddBookActions(</span><span style="color:#ff5e5e;">new </span><span>AddBookPageObjects(</span><span style="color:#e9fdac;">page</span><span>)));
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">addBookAssertions</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#ff5e5e;">new </span><span>AddBooksAssertions(</span><span style="color:#ff5e5e;">new </span><span>AddBookPageObjects(</span><span style="color:#e9fdac;">page</span><span>)));
</span><span> },
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">test</span><span>;
</span></code></pre>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">baseTest </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">UpdateBookActions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/UpdateBooks/UpdateBooks_actions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">UpdateBooksAssertions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/UpdateBooks/UpdateBooks_assertions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">UpdateBookPageObjects </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../pages/UpdateBooks/UpdateBooks_pageObjects</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 使用附加属性扩展基础测试Fixture以支持UpdateBookActions和UpdateBooksAssertions
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">baseTest</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">context</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">context</span><span>);
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">page</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">context </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">updateBookActions</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#ff5e5e;">new </span><span>UpdateBookActions(</span><span style="color:#ff5e5e;">new </span><span>UpdateBookPageObjects(</span><span style="color:#e9fdac;">page</span><span>)));
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">updateBookAssertions</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#ff5e5e;">new </span><span>UpdateBooksAssertions(</span><span style="color:#ff5e5e;">new </span><span>UpdateBookPageObjects(</span><span style="color:#e9fdac;">page</span><span>)));
</span><span> },
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">test</span><span>;
</span></code></pre>
<h3 id="ce-shi-shu-ju-sheng-cheng">测试数据生成</h3>
<p>项目使用定义在 utils/generateRandomBookData.js 中的工具函数生成随机图书数据。此函数利用 randomatic 包生成随机字符串和数字，然后将它们组合形成图书数据，包括“标题、类型、ISBN 和摘要”。以下是数据生成的简要概述：</p>
<ul>
<li><strong>标题</strong>：一个以“Book ”为前缀，后跟 5 个字母和数字组成的字符串。</li>
<li><strong>类型</strong>：从预定义的类型列表中随机选择。</li>
<li><strong>ISBN</strong>：一个表示为字符串的随机 13 位数字。</li>
<li><strong>摘要</strong>：一个包含生成标题的简单字符串。</li>
</ul>
<p>这些生成的数据用于测试中，以添加、更新或验证应用程序中的书籍，确保测试具有多样性的数据点。</p>
<h2 id="lai-yuan">来源</h2>
<p>https://medium.com/@kbalaji.kks/comprehensive-playwright-powered-end-to-end-testing-modular-framework-using-page-object-model-5143db40a15b</p>
<p>发布时间: 2024-03-12</p>
如何在Playwright中使用分片
2024-03-01T00:00:00+00:00
2024-03-01T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/using-sharding-with-playwright/
<p>大家好，在这篇简短的文章中，我们将探讨如何在 Playwright 中使用分片功能，将我们的测试分配到不同的分片上，以加快测试执行速度并减少 CI 流程中的总体运行时间。让我们开始吧，但首先我想介绍一下 Playwright 中的并行性。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/0*GOWzNZR8Lzry7bA4.jpeg" alt="Image 3" /></p>
<h2 id="bing-xing-xing">并行性</h2>
<p>在 Playwright 中，我们可以并行运行测试，这在 playwright.config.js 文件中默认设置为 true。启用此功能后，它会同时运行多个工作进程。单个文件中的测试按顺序在同一工作进程中运行。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*_b_72yxV15dfqt3y5lN3Wg.png" alt="Image 4" /></p>
<p>并行测试还会在单独的工作进程中执行，无法共享任何状态或全局变量。还有很多方法可以配置测试以并行运行，如下所述：</p>
<ol>
<li>使用 test.describe.configure({ mode: ‘parallel’ });</li>
<li>我们可以使用 fullyParallel: true 来为所有测试启用并行性</li>
<li>或者我们可以为某些项目（如 chromium、firefox、webkit 等）启用 fullyParallel: true</li>
</ol>
<p>要禁用并行性，我们可以通过配置文件将工作进程设置为 1，或者在使用 npx playwright test — workers=1 时从命令行传递相同的参数。</p>
<p>有关并行性的更多信息，请参阅此<a href="https://playwright.dev/docs/test-parallel">页面</a>。</p>
<h2 id="shen-me-shi-fen-pian">什么是分片？</h2>
<p>“分片”这个词源自数据库架构概念，在该概念中，我们将大型数据库分成多个块或分片，以分散负载、优化工作负载、提高系统的效率和可扩展性。这有点类似于水平扩展，每个分片作为独立的单元，有自己的资源，并相应地管理数据，以提高查询性能，消除单独数据库服务器处理大量数据时的单点故障。</p>
<blockquote>
<p>您可以在<a href="https://www.geeksforgeeks.org/database-sharding-a-system-design-concept/?ref=lbp">这里</a>阅读更多关于分片的信息，此外，Gaurav Sen 有一个很棒的视频解释了这一点，请参考<a href="https://www.youtube.com/watch?v=5faMjKuB9bc">视频</a>。</p>
</blockquote>
<p>现在，回到 Playwright 世界，这里的分片概念可以用于通过将测试数量分散到多个分片或多台机器上同时运行来提高整体测试执行时间。我们可以使用 shard 参数来实现这一点，即 shard=x/y，其中 x 是分片索引，y 是总分片数。</p>
<p>npx playwright test --shard=1/4<br />
npx playwright test --shard=2/4<br />
npx playwright test --shard=3/4<br />
npx playwright test --shard=4/4</p>
<p><em>在这里，我们将总测试分成 4 个分片，因此配置的工作进程将分别处理这些分片，以显著减少总体测试执行时间。</em></p>
<p><em>为了演示，我在本地机器上安装了 playwright，并将使用 tests-examples 文件夹中提供的示例代码进行测试，其中配置了一些测试在 playwright to-do mvc 网站上运行（URL:</em> <a href="https://demo.playwright.dev/todomvc"><em>https://demo.playwright.dev/todomvc</em></a><em>)。我们有大约 24 个测试，在 3 个浏览器上运行，总共 72 个测试文件，我复制了相同的文件两次，所以 3 个规范文件中有 216 个测试，分别在 3 个浏览器—chromium、firefox 和 webkit 上运行。我根据下图重命名了这些规范文件。</em></p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*tieN5wq7GB8dLZf0VJtTJg.png" alt="Image 5" /></p>
<p>在 playwright.config.js 中，我设置了以下配置，将并行设置为 true，工作进程数量为 6。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>fullyParallel: trueworkers: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">6 </span><span style="color:#ff5e5e;">: </span><span style="color:#fdb082;">6</span><span>;
</span></code></pre>
<p>这意味着当我运行命令：npx playwright test 时，所有 216 个测试将在我的本地和 CI 中使用 6 个工作进程运行。以下测试在本地机器上使用 6 个工作进程运行。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*L_yIK08NCHk74_SbErufnw.png" alt="Image 6" /></p>
<p>现在，如果我运行命令 npx playwright test，并指定总分片数为 4，首先将 216 个测试分为 4 个块，每个块包含 54 个测试。然后，这些 54 个测试将在分片 1 中使用 6 个工作进程执行，54 个测试在分片 2 中使用 6 个工作进程执行，如下所示。由于每个分片将在其自己的代理机器上执行，并行级别更深，我们的测试将显著更快地执行，而不仅仅是使用默认配置的 6 个工作进程。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*tAoX6kbSn1njJs6d3EXLHA.png" alt="Image 7" /></p>
<p>但是使用分片时，我们会遇到默认 html 报告选项的报告问题。测试执行后，当我们运行命令'npx playwright show-report'时，我们会看到生成的报告只显示最后运行的分片的详细信息，仅包含 54 个测试，如下所示。那么之前分片中执行的其余测试呢？</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*0h9DJZmMPoLbe4QOJ15y5g.png" alt="Image 8" /></p>
<p>为了解决这个问题，当我们使用分片时，需要将报告配置为‘blob’。默认情况下，每个分片会在一个名为 blob-report 的文件夹中生成自己的 blob 报告，然后我们需要合并所有这些分片的 blob 报告，以获取所有测试的综合报告。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> reporter: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">blob</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>,
</span><span>});
</span></code></pre>
<p>要合并多个分片的报告，将 blob 报告文件放入一个目录，例如在我们的例子中<code>all-blob-reports</code>，然后最终 HTML 报告将在 playwright-report 文件夹中可用。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright merge-reports</span><span style="font-style:italic;color:#fc9354;"> --reporter</span><span> html ./all-blob-reports
</span></code></pre>
<h2 id="zai-ci-zhong-shi-yong-github-actions-jin-xing-fen-pian">在 CI 中使用 Github Actions 进行分片</h2>
<p>现在，为了有效地使用分片，我们可以利用 CI 工具如 Github Actions，在这些工具中我们可以轻松设置并在多台代理机器上运行测试。为此，我们需要在 Github Actions 工作流文件中包括以下几点：</p>
<ol>
<li>在作业中添加一个带有矩阵选项的策略，包含 shardIndex 和 shardTotal 值。</li>
<li>运行 npx playwright test 命令，指定 shardindex 和 shardTotal 选项。</li>
<li>将单个分片的 blob 报告上传到 Github Actions 工作流工件中，以便 merge-report 作业可以拾取并生成综合 HTML 报告。</li>
</ol>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Sharding Tests
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">push</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>: </span><span style="color:#fbe3bf;">\[ main, master \]
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>: </span><span style="color:#ff5e5e;">\[ main, master \]jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">run-tests</span><span>:
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">60
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span> </span><span style="color:#ff5e5e;">strategy</span><span>:
</span><span> </span><span style="color:#ff5e5e;">fail-fast</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">matrix</span><span>:
</span><span> </span><span style="color:#ff5e5e;">shardIndex</span><span>: </span><span style="color:#fbe3bf;">\[1, 2, 3, 4, 5, 6 \]
</span><span> </span><span style="color:#ff5e5e;">shardTotal</span><span>: </span><span style="color:#fbe3bf;">\[6\]
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">20
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install dependencies
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install Playwright Browsers
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload blob report to GitHub Actions Artifacts
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">blob-report-${{ matrix.shardIndex }}
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">blob-report
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">1
</span></code></pre>
<p>对于作业“run-tests”，我们将使用在矩阵下指定的总共 6 个分片，并将 fail-fast 设置为 false。然后我们将使用特定的 shardIndex 和 shardTotal 值执行 npx playwright test，例如 1/6、2/6 等。最后，一旦分片执行完毕，单个分片的 blob 报告将上传到 actions 工件中，名称为 blob-report 并带有 shardIndex 后缀。</p>
<p>接下来，我们需要添加一个“merge-reports”作业，该作业将依赖于 run-tests 作业。此作业将下载所有单个分片的 blob 报告到一个指定的文件夹中，名为 all-blob-reports，然后运行 merge-reports 命令以获取综合 HTML 报告并将其上传到 GitHub Actions 工件选项卡中。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">merge-reports</span><span>:
</span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span style="color:#ff5e5e;">needs</span><span>: </span><span style="color:#ff5e5e;">\[run-tests\]runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span style="color:#ff5e5e;">steps</span><span>:
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">18
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install dependencies
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Download blob reports from GitHub Actions Artifacts
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/download-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">all-blob-reports
</span><span> </span><span style="color:#ff5e5e;">pattern</span><span>: </span><span style="color:#fbe3bf;">blob-report-\*
</span><span> </span><span style="color:#ff5e5e;">merge-multiple</span><span>: </span><span style="color:#ff8942;">true
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Merge into HTML Report
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright merge-reports --reporter html ./all-blob-reports
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload HTML report
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">html-report--attempt-${{ github.run\_attempt }}
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">7
</span></code></pre>
<blockquote>
<p>这是我的完整工作流文件及其所有作业 👇</p>
</blockquote>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Playwright tests using sharding
</span><span style="color:#ff8942;">on</span><span>:
</span><span style="color:#ff5e5e;">push</span><span>:
</span><span style="color:#ff5e5e;">branches</span><span>: </span><span style="color:#fbe3bf;">\[ main, master \]
</span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span style="color:#ff5e5e;">branches</span><span>: </span><span style="color:#fbe3bf;">\[ main, master \]
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span style="color:#ff5e5e;">run-tests</span><span>:
</span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">60
</span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span style="color:#ff5e5e;">strategy</span><span>:
</span><span style="color:#ff5e5e;">fail-fast</span><span>: </span><span style="color:#ff8942;">false
</span><span style="color:#ff5e5e;">matrix</span><span>:
</span><span style="color:#ff5e5e;">shardIndex</span><span>: </span><span style="color:#fbe3bf;">\[1, 2, 3, 4, 5, 6 \]
</span><span style="color:#ff5e5e;">shardTotal</span><span>: </span><span style="color:#fbe3bf;">\[6\]
</span><span style="color:#ff5e5e;">steps</span><span>:
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">20
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install dependencies
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install Playwright Browsers
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}- name</span><span>: </span><span style="color:#fbe3bf;">Upload blob report to GitHub Actions Artifacts
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">blob-report-${{ matrix.shardIndex }}
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">blob-report
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">1
</span><span>
</span><span style="color:#ff5e5e;">merge-reports</span><span>:
</span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span style="color:#ff5e5e;">needs</span><span>: </span><span style="color:#fbe3bf;">\[run-tests\]
</span><span>
</span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span style="color:#ff5e5e;">steps</span><span>:
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">18
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install dependencies
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Download blob reports from GitHub Actions Artifacts
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/download-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">all-blob-reports
</span><span> </span><span style="color:#ff5e5e;">pattern</span><span>: </span><span style="color:#fbe3bf;">blob-report-\*
</span><span> </span><span style="color:#ff5e5e;">merge-multiple</span><span>: </span><span style="color:#ff8942;">true
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Merge into HTML Report
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright merge-reports --reporter html ./all-blob-reports
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload HTML report
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">html-report--attempt-${{ github.run\_attempt }}
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">7
</span></code></pre>
<p>一旦工作流文件被推送到 Github，所有总测试：216 将被分布并在我们的案例中 6 台机器上的特定分片机器上运行。如下所示，36 个测试在 run-tests (1,6)机器上执行。同样，其他分片代理机器上也会使用 6 个工作进程执行 36 个测试。一旦所有测试执行完毕，merge report 作业将被触发，然后生成我们的综合 HTML 报告。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*_prdug4U48kZ06C-voWX_Q.png" alt="Image 9" /></p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*8ZCSRXOpVrQaSaTsvzFj1Q.png" alt="Image 10" /></p>
<p>👇 以下是作为工作流运行的一部分上传的工件，单个分片的 blob 报告和最终的综合 html 报告。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*vkESn66s1bdwGXg5MqryBw.png" alt="Image 11" /></p>
<p>下载并打开报告后，您会发现完整的测试运行报告，👇 其中包含在 6 台分片机器上执行的 216 个测试。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*rVylBxPlPxcdyeJv5LkfNg.png" alt="Image 12" /></p>
<p>这就是您可以在您的 Playwright 设置中使用分片的方法。感谢阅读，希望您觉得这篇文章有用！</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://blog.devops.dev/using-sharding-with-playwright-a94e54314b75?gi=f1526f73b9b4">原文</a></p>
<p>发布时间: 2024-03-01</p>
Playwright 视觉测试终极指南
2024-02-28T00:00:00+00:00
2024-02-28T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/ultimate-guide-visual-testing-playwright/
<p>随着 Web 应用的不断完善,确保每次更新不会破坏前端展示变得愈发具有挑战性。面对众多浏览器、设备以及每个组件的无数状态,单元测试可以保证代码的一致性,ui 自动化测试可以确保系统的一致性,但它们都无法捕捉到视觉异常、布局问题或平台兼容性问题。</p>
<p>这就是视觉测试发挥作用的地方。视觉测试会存储被测应用 ui 的截图,并将其与应用的当前状态进行比较。不再有意外的 bug,不再需要在三种不同的浏览器和 12 种不同的 viewport 上进行开发。视觉测试自动化了这个过程,确保你的应用始终看起来完全正确。</p>
<p>本文将帮助你从视觉测试新手成长为专家。即使是专家也能在后面的章节中找到一些好处,因为我们将深入探讨测试、本地开发和 CI/CD 流程的独特策略。</p>
<p>本文的实现基于<a href="https://playwright.dev/">Playwright</a>,这是一个出色的开源 ui 自动化测试工具,支持所有浏览器和多种编程语言。它非常适合进行视觉测试。如果你还没有用过 Playwright,你应该尝试一下。</p>
<h2 id="shi-jue-ce-shi-chang-jian-wen-ti">视觉测试常见问题</h2>
<p>让我们先探讨一些关于视觉测试的常见问题。如果你只想要代码,可以直接跳到<a href="https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright#getting-started-with-visual-testing">视觉测试入门</a>。</p>
<h3 id="shen-me-shi-shi-jue-ce-shi">什么是视觉测试?</h3>
<p>视觉测试是一种通过比较应用当前截图与基准图像截图来自动验证应用视觉完整性的做法。它确保代码的更改不会在用户界面中引入意外结果。它还可以用于确保在不同浏览器和设备之间的一致性,以及确保你的应用保持可访问性和美观性。</p>
<p>视觉测试有时也被称为视觉回归测试、自动化视觉测试和截图测试。</p>
<h3 id="shi-jue-ce-shi-you-shen-me-hao-chu">视觉测试有什么好处?</h3>
<p>视觉测试可以确保你的应用在快速开发期间保证站点的质量稳定。视觉测试可以捕捉到其他测试方法完全遗漏的 bug。而且由于这个过程是自动化的,视觉测试在回溯和修复 bug 方面可以节省大量的时间和精力。</p>
<h3 id="shi-jue-ce-shi-de-zui-jia-shi-jian-shi-shen-me">视觉测试的最佳实践是什么?</h3>
<p>视觉测试是一个简单的过程。你只需要在各种状态下存储应用和组件的截图,然后在代码更改后将这些截图与应用进行比较。只要你定期运行测试并使用良好的策略来更新截图,视觉测试就会非常管用。</p>
<h3 id="shi-jue-ce-shi-he-dan-yuan-ce-shi-you-shen-me-qu-bie">视觉测试和单元测试有什么区别?</h3>
<p>单元测试专注于特定代码接口的输入和输出,而视觉测试则关注用户界面本身。单元测试非常适合验证核心行为和边缘情况,但只有视觉测试才能确保用户可以使用这些功能并看到结果。</p>
<h3 id="shi-jue-ce-shi-he-zi-dong-hua-ce-shi-you-shen-me-qu-bie">视觉测试和自动化测试有什么区别?</h3>
<p>自动化测试确保应用的视图和组件按预期运行,而视觉测试确保这些视图和组件按预期显示。</p>
<p>端到端测试(自动化测试)使用 DOM 选择器定位元素,而人类使用眼睛。因此,虽然端到端测试可以确认按钮是否可点击,但只有视觉测试才能确认按钮是否可见并且在正确的位置上。</p>
<h3 id="shen-me-shi-hou-ying-gai-shi-yong-shi-jue-ce-shi">什么时候应该使用视觉测试?</h3>
<p>随着应用的发展,视觉测试变得越来越有价值。在开发初期,你的 UI 处于不断变化中,所以视觉测试并不能提供很大的价值。但一旦你的应用开始稳定下来,视觉测试就成为了改变游戏规则的工具。</p>
<p>我建议逐步为那些几个月没有改变但今天需要修改的视图或组件添加视觉测试。在开始编码之前,为那些不应该因为你当前的工作而改变的组件添加视觉测试。然后你就可以自信地编码了!</p>
<h3 id="shi-jue-ce-shi-zhi-de-zuo-ma">视觉测试值得做吗?</h3>
<p>是的,值得。随着 web 应用的发展,视觉测试是提升效能的重要尝试。例如,你可以开发一个测试套件,简单地比较同一个视图在不同浏览器和屏幕尺寸下的表现。有了这些测试,你就可以自信地对应用进行更改,而不需要同时打开三个浏览器。</p>
<h3 id="shi-jue-ce-shi-zui-hao-de-gong-ju-shi-shen-me">视觉测试最好的工具是什么?</h3>
<p><a href="https://playwright.dev/">Playwright</a>被广泛认为是浏览器自动化和集成测试的最佳测试框架。视觉测试也不例外。凭借强大的配置选项、对所有浏览器和多种编程语言的支持、直观的 API 以及庞大的社区,playwright 就是第一选择。</p>
<h2 id="shi-jue-ce-shi-ru-men">视觉测试入门</h2>
<p>让我们从设置你的代码库开始,然后我们将编写一些测试。</p>
<p>这一部分应该不到 10 分钟就能开始。在继续阅读之前,我强烈建议你先完成 playwright 的安装工作,因为在指南的后面部分,你将能够亲自实践一些高级技巧。</p>
<h3 id="1-an-zhuang-yi-lai">1. 安装依赖</h3>
<p>如果你已经安装了 Playwright,可以跳过这一步。</p>
<p>否则,安装你的依赖并创建一个示例测试文件:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># Install node dependencies
</span><span style="color:#e9fdac;">npm</span><span> install</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> @playwright/test
</span><span style="color:#e9fdac;">npm</span><span> install</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> typescript
</span><span>
</span><span style="color:#6d6d6d;"># Install playwright browsers
</span><span style="color:#e9fdac;">npx</span><span> playwright install
</span><span>
</span><span style="color:#6d6d6d;"># Create the test file
</span><span style="color:#e9fdac;">mkdir</span><span style="font-style:italic;color:#fc9354;"> -p</span><span> tests
</span><span style="color:#e9fdac;">touch</span><span> tests/homepage.spec.ts
</span></code></pre>
<h3 id="2-bian-xie-ni-de-di-yi-ge-shi-jue-ce-shi-yong-li">2. 编写你的第一个视觉测试用例</h3>
<p>打开<code>tests/homepage.spec.ts</code>并添加以下代码:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">home page visual test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>();
</span><span>});
</span></code></pre>
<h3 id="3-yun-xing-ni-de-shi-jue-ce-shi">3. 运行你的视觉测试</h3>
<p>使用以下命令运行你的测试:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p>第一次运行测试时,它们会失败并显示类似这样的错误消息:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">Error:</span><span> A snapshot doesn</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">t exist at {TEST_OUTPUT_PATH}, writing actual.
</span></code></pre>
<p>这是符合预期的。因为 Playwright 之前没有保存过结果。<code>expect(page).toHaveSnapshot()</code>这段没东西可以比较,所以它必须使测试失败。但不用担心,下次运行测试时,Playwright 会将页面的当前状态与之前存储的截图进行比较。</p>
<p>所以再次运行你的测试:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p>成功了!你应该看到类似这样的消息:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">Running</span><span> 1 test using 1 worker
</span><span> </span><span style="color:#e9fdac;">1</span><span> passed (6.6s)
</span></code></pre>
<p>如果你的测试失败了,花几分钟时间看看能否解决问题。如果不能,请继续阅读。我在本文后面介绍了许多故障排除技巧。</p>
<h4 id="jie-tu-cun-chu-zai-na-li">截图存储在哪里?</h4>
<p>默认情况下,测试截图与创建它们的测试文件存储在一起。</p>
<p>当视觉测试失败时,Playwright 会将"之前"图像、"之后"图像和"差异"图像存储在<code>./test-results</code>目录中。这些在后面调试失败的测试时会很有用。</p>
<p>(继续阅读以获取有关设置这些截图位置的建议。你可能不希望测试的截图散布在你的代码库中。)</p>
<h3 id="4-geng-xin-ce-shi-jie-tu">4. 更新测试截图</h3>
<p>太棒了!你的测试现在可以确认页面没有任何变化,但如果你真的想做一些更改怎么办?</p>
<p>要更新你的截图,请使用<code>--update-snapshots</code>(或<code>-u</code>)标志运行你的测试:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> -u
</span></code></pre>
<p>这个命令将运行你的测试用例并更新截图并保存当前的截图作为基准图像。如果你现在运行这个命令,所有用例应该正常通过。</p>
<p>警告:这个命令会更新所有截图。你要非常小心,因为这很容易意外更新你不打算更新的截图。</p>
<h4 id="wo-ru-he-zhi-geng-xin-bu-fen-jie-tu">我如何只更新部分截图?</h4>
<p>要更新一部分测试的截图,我们可以从 CLI 过滤测试。只有匹配的测试用例会被更新。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># Update tests with matching file name
</span><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> -u </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/home*.spec.ts</span><span style="color:#ffffff;">"
</span><span>
</span><span style="color:#6d6d6d;"># Update tests with matching test name
</span><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> -u --grep </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">home</span><span style="color:#ffffff;">"</span><span style="font-style:italic;color:#fc9354;"> --grep-invert </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">zzz</span><span style="color:#ffffff;">"
</span><span>
</span><span style="color:#6d6d6d;"># Updates tests within project
</span><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> -u --project </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">chromium</span><span style="color:#ffffff;">"
</span></code></pre>
<p>我们稍后会深入探讨截图管理,但现在,让我们专注于调试...</p>
<h3 id="5-diao-shi-shi-jue-ce-shi">5. 调试视觉测试</h3>
<p>我们知道如何更新失败测试的截图,但如果测试因为 bug 而失败时，我们该怎么办?</p>
<p>为了探索这种情况,让我们更新我们的测试用例,使截图比较断言失败:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">home page visual test</span><span style="color:#ffffff;">'</span><span>, async ({page}) </span><span style="color:#ff5e5e;">=> </span><span>{
</span><span> await page.goto(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">'</span><span>);
</span><span> await expect(page).toHaveScreenshot({
</span><span> // crop the screenshot to a specific area
</span><span> clip: {x: 0, y: 0, width: 500, height: 500},
</span><span> });
</span><span>})</span><span style="color:#ff5e5e;">;
</span></code></pre>
<p>现在让我们运行测试,要求 playwright 生成 HTML 报告:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> --reporter</span><span> html
</span></code></pre>
<p>运行该命令后,你的浏览器会自动打开测试报告。它应该显示失败的具体结果。</p>
<p>滚动到页面底部,你会看到这个小东西:</p>
<p>视觉测试差异</p>
<p>"差异"视图提供了预期和实际截图之间的鲜明对比。然而,我发现"滑块"视图对于实际修复问题最有用。</p>
<h4 id="wo-ru-he-jie-shi-chai-yi-shi-tu">我如何解释"差异"视图?</h4>
<p>"差异"视图显示了预期和实际截图之间的差异。</p>
<p>黄色像素表示截图之间的变化,但它们在允许的差异阈值内。</p>
<p>红色像素超出了允许的差异阈值。默认情况下,即使只有一个红色像素也会导致测试失败。</p>
<p>有关配置这些阈值的建议,请跳转到<a href="https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright#make-visual-tests-more-forgiving">使视觉测试阈值更宽松这篇文章</a>。</p>
<h4 id="wo-bi-xu-shi-yong-html-bao-gao-ma">我必须使用 HTML 报告吗?</h4>
<p>这不是必须的(尽管我建议使用)。无论你是否生成 HTML 报告,失败的视觉测试都会自动将"之前"、"之后"和"差异"图像输出到<code>./test-results</code>目录。</p>
<p>我经常在工作时直接在 VSCode 中打开"之前"图像。这样我就可以让浏览器专注于我的测试用例。</p>
<h3 id="6-shi-yong-ui-mo-shi-jin-xing-kuai-su-shi-jue-ce-shi">6. 使用 UI 模式进行快速视觉测试</h3>
<p>Playwright 有一个行业领先的"UI 模式",它使处理测试变得非常简单。</p>
<p>虽然它有许多杀手级功能,但我最喜欢的是它在每一个步骤之后自动去截图的能力。这允许你快速调试你的测试。它还使得在正确的地方插入视觉断言变得非常容易。</p>
<p>要在 UI 模式下运行你的测试,使用以下命令:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> --ui
</span></code></pre>
<p>我鼓励你探索 UI 模式,因为它很有用，而且功能丰富。</p>
<p><img src="https://res.cloudinary.com/browsercat/image/upload/c_fill,w_768/dpr_auto/f_auto/q_auto/v1/articles/pw-snapshot-ui-mode.png?_a=DATAdtTEZAA0" alt="图1: Playwright UI模式" /></p>
<p>好了!现在你已经对使用视觉测试有了初步了解,现在让我们带你从白带升级道黑带。在这个过程中,我们将使用一些 Playwright 的高级功能,编写出稳定的测试用例,微调我们的配置文件等等。</p>
<h2 id="ye-mian-jie-tu-vs-yuan-su-jie-tu">页面截图 vs 元素截图</h2>
<p>Playwright 的视觉测试 API 允许你对整个页面或特定元素进行截图。</p>
<p>但什么时候应该使用前者，什么时候该使用后者呢?</p>
<h3 id="shen-me-shi-hou-ying-gai-shi-yong-ye-mian-jie-tu">什么时候应该使用页面截图?</h3>
<p>页面截图非常适合验证整个页面是否按预期工作。使用页面截图来测试布局、响应是否正确和可访问性。</p>
<p>但要注意:页面截图的用例可能不是那么稳定。毕竟,如果 viewport 内的任何内容发生变化,整个截图都会失败。我们稍后会介绍最小化这些影响的策略,但现在,明智的做法是将页面截图视为一种强大但粗糙的工具。</p>
<p>你已经看到了页面截图的实际应用。这里是一个例子:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">page snapshot</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>();
</span><span>});
</span></code></pre>
<h3 id="shen-me-shi-hou-ying-gai-shi-yong-yuan-su-jie-tu">什么时候应该使用元素截图?</h3>
<p>元素截图,正如你所期望的,专注于单个页面元素。这使它们非常适合测试单独的组件，或者验证元素在特定上下文中行为是否符合预期。元素截图比页面截图更不容易出现问题,但它们需要更多的前期工作来配置。毕竟,它们覆盖的范围比较有限，这也意味着你需要更多的截图才能覆盖与页面截图相同的范围。</p>
<p>以下是一个元素截图的例子:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">element snapshot</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">$button </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">first</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">$button</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>();
</span><span>});
</span></code></pre>
<h2 id="shi-yong-ye-mian-jie-tu">使用页面截图</h2>
<p>让我们探索一些页面截图的有用功能和常见用例...</p>
<h3 id="cai-jian-ye-mian-jie-tu">裁剪页面截图</h3>
<p>有时候，验证测试结果不需要用到整个屏幕。因为屏幕的部分设计常常会变化，这可能导致原本稳定的测试变得不可靠。</p>
<p>在这些情况下,最好将你的截图裁剪到具体的区域。这里有一个例子:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cropped snapshot</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">width</span><span>, </span><span style="color:#e9fdac;">height </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">viewportSize</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// square at the center of the page
</span><span> clip: {
</span><span> x: (</span><span style="color:#e9fdac;">width </span><span style="color:#ff5e5e;">- </span><span style="color:#fdb082;">400</span><span>) </span><span style="color:#ff5e5e;">/ </span><span style="color:#fdb082;">2</span><span>,
</span><span> y: (</span><span style="color:#e9fdac;">height </span><span style="color:#ff5e5e;">- </span><span style="color:#fdb082;">400</span><span>) </span><span style="color:#ff5e5e;">/ </span><span style="color:#fdb082;">2</span><span>,
</span><span> width: </span><span style="color:#fdb082;">400</span><span>,
</span><span> height: </span><span style="color:#fdb082;">400</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// top slice, maximum possible width
</span><span> clip: { x: </span><span style="color:#fdb082;">0</span><span>, y: </span><span style="color:#fdb082;">0</span><span>, width: </span><span style="color:#ff8942;">Infinity</span><span>, height: </span><span style="color:#fdb082;">16 </span><span>},
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="dui-zheng-ge-ye-mian-jin-xing-jie-tu-er-bu-shi-dang-qian-ping-mu-jie-tu">对整个页面进行截图，而不是当前屏幕截图</h3>
<p>默认情况下,Playwright 会对当前屏幕进行截图。</p>
<p>我们也可以对整个页面截图（自动滚动到页面的最下方），具体使用场景是: 例如,如果你要测试一个页面在不同浏览器中看起来是否相同,最简单的解决方案就是对整个页面进行截图。而且对于这种测试,你不会存储之前运行的截图,所以你的用例相对稳定。</p>
<p>以下是如何进行完整页面截图:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">full page snapshot</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> fullPage: </span><span style="color:#ff8942;">true</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="zai-jin-xing-ye-mian-jie-tu-zhi-qian-gun-dong">在进行页面截图之前滚动</h3>
<p>在使用页面截图时,你经常会想在视觉断言之前把页面滚动到某个具体的元素。</p>
<p>以下是方法:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scroll before snapshot</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> document
</span><span> .</span><span style="color:#6699cc;">querySelector</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#your-element</span><span style="color:#ffffff;">"</span><span>)
</span><span> ?.</span><span style="color:#6699cc;">scrollIntoView</span><span>({ behavior: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">instant</span><span style="color:#ffffff;">" </span><span>});
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>();
</span><span>});
</span></code></pre>
<p>注意:虽然 Playwright 有一个<code>.scrollIntoViewIfNeeded()</code>方法,但它不会将元素滚动到 viewport 的顶部。所以我推荐上面的解决方案。它将充分利用你的 viewport 并确保你的截图在不同运行之间保持一致。</p>
<h2 id="shi-yong-yuan-su-jie-tu">使用元素截图</h2>
<p>元素截图比页面截图更"深入细节"。它们带来了很多力量和灵活性。</p>
<p>让我们探索一些例子...</p>
<h3 id="ce-shi-yuan-su-jiao-hu-xing">测试元素交互性</h3>
<p>随着你的组件库的增长,越来越难跟踪库中每个元素的每种状态。</p>
<p>在下面的例子中,我们对表单输入在各种状态下进行截图:</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>test('element states', async ({page}) => {
</span><span> await page.goto('https://www.browsercat.com/contact');
</span><span> const $textarea = page.locator('textarea').first();
</span><span>
</span><span> await expect($textarea).toHaveScreenshot();
</span><span> await $textarea.hover();
</span><span> await expect($textarea).toHaveScreenshot();
</span><span> await $textarea.focus();
</span><span> await expect($textarea).toHaveScreenshot();
</span><span> await $textarea.fill('Hey, cool cat!');
</span><span> await expect($textarea).toHaveScreenshot();
</span><span>});
</span></code></pre>
<h3 id="ce-shi-yuan-su-xiang-ying-xing">测试元素响应性</h3>
<p>在处理响应式设计时,确保你的元素在全范围的屏幕尺寸下看起来都很好是很重要的。</p>
<p>使用元素截图来确保你的组件在各种断点下看起来都很好。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>test('element responsiveness', async ({page}) => {
</span><span> const viewportWidths = [960, 760, 480];
</span><span> await page.goto('https://www.browsercat.com/blog');
</span><span> const $post = page.locator('main article').first();
</span><span>
</span><span> for (const width of viewportWidths) {
</span><span> await page.setViewportSize({width, height: 800});
</span><span> await expect($post).toHaveScreenshot(`post-${width}.png`);
</span><span> }
</span><span>});
</span></code></pre>
<h2 id="gao-ji-jie-tu-ji-qiao">高级截图技巧</h2>
<p>页面和元素截图共享许多常见的配置选项。让我们探讨其中最有用的...</p>
<h3 id="ping-bi-jie-tu-de-bu-fen-nei-rong">屏蔽截图的部分内容</h3>
<p>有时,你会想要排除截图的某些部分。一个子元素或子区域可能经常变化,包含敏感信息,或者与测试无关。例如,时间戳、动画、用户电子邮件地址或轮换广告。</p>
<p>Playwright 提供了"屏蔽"这些区域的能力,用一种不太可能与你网站内容混淆的鲜艳颜色替换它们。</p>
<p>这里有一个例子:</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>test('masked snapshots', async ({page}) => {
</span><span> await page.goto('https://www.browsercat.com');
</span><span> const $hero = page.locator('main > header');
</span><span> const $footer = page.locator('body > footer');
</span><span>
</span><span> await expect(page).toHaveScreenshot({
</span><span> mask: [
</span><span> $hero.locator('img[src$=".svg"]'),
</span><span> $hero.locator('a[target="_blank"]'),
</span><span> ],
</span><span> });
</span><span>
</span><span> await expect($footer).toHaveScreenshot({
</span><span> mask: [
</span><span> $footer.locator('svg'),
</span><span> ],
</span><span> });
</span><span>});
</span></code></pre>
<p>这是第一个屏蔽截图的样子:</p>
<p><img src="https://res.cloudinary.com/browsercat/image/upload/c_fill,w_768/dpr_auto/f_auto/q_auto/v1/articles/pw-snapshot-masked.png?_a=DATAdtTEZAA0" alt="图2: 屏蔽截图" /></p>
<h3 id="zai-jie-tu-qi-jian-bao-chi-yang-shi-bu-bian">在截图期间保持样式不变</h3>
<p>视觉测试之所以有价值，是因为它们可以捕捉到应用外观的意外变化。但有些页面元素本身就不稳定，无法直接包含在测试中。</p>
<p>幸运的是,我们可以在截图期间加载一些基本的 CSS,以限制或隐藏页面中的有问题元素或者难搞定的元素。</p>
<p>这里是方法:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">consistent styles</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">$hero </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main > header</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> stylePath: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./hide-dynamic-elements.css</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./disable-scroll-animations.css</span><span style="color:#ffffff;">"</span><span>,
</span><span> ],
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">$hero</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> stylePath: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./hide-dynamic-elements.css</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./disable-scroll-animations.css</span><span style="color:#ffffff;">"</span><span>,
</span><span> ],
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="zi-dong-zhong-shi-bu-wen-ding-de-yong-li">自动重试不稳定的用例</h3>
<p>在处理动画或动态内容时，视觉测试可能会变得不稳定。特别是大型页面截图容易受到影响。</p>
<p>Playwright 可以在一定时间内自动重试失败的视觉测试，直到找到有效的匹配。启用该功能的方法如下：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">retry snapshots</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">$hero </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main > header</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// retry snapshot until timeout is reached
</span><span> timeout: </span><span style="color:#fdb082;">1000 </span><span style="color:#ff5e5e;">* </span><span style="color:#fdb082;">60</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">$hero</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// retry snapshot until timeout is reached
</span><span> timeout: </span><span style="color:#fdb082;">1000 </span><span style="color:#ff5e5e;">* </span><span style="color:#fdb082;">60</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="xia-zai-tu-pian-jin-xing-bi-jiao-duan-yan">下载图片进行比较断言</h3>
<p>在 99.9%的情况下，页面和元素截图可以满足你的需求。但有时你可能需要断言任意图像在不同测试运行之间保持一致。</p>
<p>例如，你的应用可能生成二维码或社交分享卡片，或者你可能需要压缩和转换用户上传的头像。在这些情况下，你会希望确保这些功能运行正常，不会出问题。</p>
<p>对此使用<code>expect().toMatchSnapshot()</code>:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">buffer </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">stream/consumers</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">arbitrary snapshot</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// generates custom avatars — fun!
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://getavataaars.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main form button</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">first</span><span>().</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// download the avatar
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">avatar </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">waitForEvent</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">download</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">dl</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">dl</span><span>.</span><span style="color:#8cdaff;">createReadStream</span><span>())
</span><span> .</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">stream</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">buffer</span><span>(</span><span style="color:#e9fdac;">stream</span><span>));
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">avatar</span><span>).</span><span style="color:#8cdaff;">toMatchSnapshot</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">avatar.png</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<h3 id="bi-jiao-bu-tong-liu-lan-qi-zhi-jian-de-jie-tu">比较不同浏览器之间的截图</h3>
<p>到目前为止，我们编写的所有测试都是比较代码更改前后应用的状态。但如果你想比较应用在不同浏览器和设备之间的状态呢？</p>
<p>为了实现这一点，我们将利用 Playwright 的“项目”功能。项目允许你定义具有独特配置的自定义测试套件。在成熟的代码库中，你可能会有很多这样的项目用于不同的设备、环境和测试策略。</p>
<p>让我们来点魔法！</p>
<p>首先，更新你的 playwright.config.ts。如果你还没有，请在项目根目录创建它：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">crossBrowserConfig </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> testDir: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./tests/cross-browser</span><span style="color:#ffffff;">"</span><span>,
</span><span> snapshotPathTemplate: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.test/cross/{testFilePath}/{arg}{ext}</span><span style="color:#ffffff;">"</span><span>,
</span><span> expect: {
</span><span> toHaveScreenshot: { maxDiffPixelRatio: </span><span style="color:#fdb082;">0.1 </span><span>},
</span><span> },
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// other config here...
</span><span>
</span><span> projects: [
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cross-chromium</span><span style="color:#ffffff;">"</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Desktop Chrome</span><span style="color:#ffffff;">"</span><span>] },
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">crossBrowserConfig</span><span>,
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cross-firefox</span><span style="color:#ffffff;">"</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Desktop Firefox</span><span style="color:#ffffff;">"</span><span>] },
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cross-chromium</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">crossBrowserConfig</span><span>,
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cross-browser</span><span style="color:#ffffff;">"</span><span>,
</span><span> use: { </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">devices</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Desktop Safari</span><span style="color:#ffffff;">"</span><span>] },
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cross-firefox</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">crossBrowserConfig</span><span>,
</span><span> },
</span><span> ],
</span><span>});
</span></code></pre>
<p>在配置 snapshotPathTemplate 以确保所有浏览器的截图存储在相同的位置后，每个测试都将其截图与相同的源图像进行比较。</p>
<p>接下来，在 ./tests/cross-browser/homepage.spec.ts 创建一个新的测试文件：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cross-browser snapshots</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">:has(> a figure)</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">$el</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">$el</span><span>.</span><span style="color:#6699cc;">remove</span><span>());
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">home-page.png</span><span style="color:#ffffff;">`</span><span>, {
</span><span> fullPage: </span><span style="color:#ff8942;">true</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<p>为了避免失败,让我们初始化我们的新截图:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> --project</span><span> cross-browser</span><span style="font-style:italic;color:#fc9354;"> -u
</span></code></pre>
<p>然后让我们运行测试:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright test</span><span style="font-style:italic;color:#fc9354;"> --project</span><span> cross-browser
</span></code></pre>
<p>你的所有测试都通过了吗？可能并没有，因为在不同环境下，不同的浏览器会以不同方式渲染字体、颜色和图像，即使你的应用表现正常。</p>
<p>如果你的测试失败了，你可能需要调整截图的 <code>maxDiffPixelRatio</code> 和 <code>threshold</code> 选项。想要调试这个问题，请查看<a href="https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright#make-visual-tests-more-forgiving">如何使视觉测试更宽松</a>。</p>
<h2 id="shi-jue-ce-shi-de-ge-chong-xuan-xiang">视觉测试的各种选项</h2>
<p>因为视觉测试非常敏感,所以掌握它们的配置很重要。让我们探讨一些最有用的选项...</p>
<h3 id="zi-ding-yi-jie-tu-wen-jian-ming">自定义截图文件名</h3>
<p>Playwright 根据测试的名称自动命名你的截图。如果你只将截图用于视觉测试,那就没问题。</p>
<p>然而,许多用户喜欢将这些图像重新用于文档和测试报告。这些任务久需要自定义文件名。</p>
<p>这样命名你的截图:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">custom snapshot names</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">$hero </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main > header</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">home-page.png</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">$hero</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">home-hero.png</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">$footer </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">body > footer</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">footImg </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">$footer</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">footImg</span><span>).</span><span style="color:#8cdaff;">toMatchSnapshot</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">home-foot.png</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>注意:自定义截图名称并不能完全控制文件名,除非你还配置了自定义目录。使用默认配置,Playwright 会在你的文件名后添加一个后缀,以确保它们在不同项目中是唯一的。</p>
<h3 id="zi-ding-yi-jie-tu-mu-lu">自定义截图目录</h3>
<p>默认情况下,Playwright 将截图存储在创建它们的测试文件所在的目录中。这种方法有许多缺点:</p>
<ul>
<li>你的代码库会变得很乱。</li>
<li>很难从版本控制中排除截图文件。</li>
<li>不容易在 CI/CD 运行之间缓存结果。</li>
<li>对自定义截图文件名不友好。</li>
</ul>
<p>所以让我们告诉 Playwright 将我们的截图存储在一个自定义目录中。更新你的<code>playwright.config.ts</code>文件:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> snapshotPathTemplate: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.test/snaps/{projectName}/{testFilePath}/{arg}{ext}</span><span style="color:#ffffff;">"</span><span>,
</span><span>});
</span></code></pre>
<p>使用上面的配置,如果我们的测试文件路径是<code>./tests/homepage.spec.ts</code>,Playwright 会将我们的截图存储如下:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">.test/
</span><span> </span><span style="color:#e9fdac;">snaps/
</span><span> </span><span style="color:#e9fdac;">tests/
</span><span> </span><span style="color:#e9fdac;">homepage.spec.ts/
</span><span> </span><span style="color:#e9fdac;">home-page.png
</span><span> </span><span style="color:#e9fdac;">home-hero.png
</span><span> </span><span style="color:#e9fdac;">home-foot.png
</span></code></pre>
<p>使用这种模式,你可以从版本控制中排除你的截图,可以在 CI/CD 中缓存你的结果,并且可以在它们出现时轻松查看失败的测试。</p>
<p>阅读 Playwright 文档中关于<a href="https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-path-template">截图路径模板</a>中提供的更多选项。</p>
<h3 id="shi-shi-jue-ce-shi-geng-kuan-song">使视觉测试更宽松</h3>
<p>默认情况下,视觉测试非常严格。如果有一个像素失败,你的测试就会失败。幸运的是,Playwright 提供了多个选项来调整你的视觉测试的敏感度。</p>
<p>具体选项有:</p>
<ul>
<li><code>threshold</code>: 单个像素必须变化多少才被认为是不同的。值是从<code>0</code>到<code>1</code>的百分比,默认为<code>0.2</code>。</li>
<li><code>maxDiffPixels</code>: 在测试仍然通过的情况下可以不同的最大像素数。默认情况下,此选项是禁用的。</li>
<li><code>maxDiffPixelRatio</code>: 在测试仍然通过的情况下可以不同的最大像素百分比。值是从<code>0</code>到<code>1</code>的百分比,但默认情况下此选项是禁用的。</li>
</ul>
<p>你可以全局或基于每个断言去调整这些选项。</p>
<h4 id="quan-ju-pei-zhi-yu-zhi">全局配置阈值</h4>
<p>还是在<code>playwright.config.ts</code>文件:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> expect: {
</span><span> toHaveScreenshot: {
</span><span> threshold: </span><span style="color:#fdb082;">0.25</span><span>,
</span><span> maxDiffPixelRatio: </span><span style="color:#fdb082;">0.025</span><span>,
</span><span> maxDiffPixels: </span><span style="color:#fdb082;">25</span><span>,
</span><span> },
</span><span> toMatchSnapshot: {
</span><span> threshold: </span><span style="color:#fdb082;">0.25</span><span>,
</span><span> maxDiffPixelRatio: </span><span style="color:#fdb082;">0.025</span><span>,
</span><span> maxDiffPixels: </span><span style="color:#fdb082;">25</span><span>,
</span><span> },
</span><span> },
</span><span>});
</span></code></pre>
<h4 id="zhong-xie-mei-ge-duan-yan-de-yu-zhi">重写每个断言的阈值</h4>
<p>这样做可以重写全局截图设置的值:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">forgiving snapshots</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.browsercat.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">$hero </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main > header</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> maxDiffPixelRatio: </span><span style="color:#fdb082;">0.15</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">$hero</span><span>).</span><span style="color:#8cdaff;">toHaveScreenshot</span><span>({
</span><span> maxDiffPixels: </span><span style="color:#fdb082;">100</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<h4 id="wo-ru-he-diao-zheng-zhe-xie-xuan-xiang">我如何调整这些选项?</h4>
<p>要找到适合你应用的最佳设置，请仔细查看测试生成的"差异"图像。在这些图像中，黄色像素表示在可接受范围内的差异，而红色像素则表示导致测试失败的差异。</p>
<p>首先，尝试提高<code>threshold</code>值，看是否能消除截图中的红色像素。但要谨慎：过高的<code>threshold</code>可能会导致错误地忽略重要差异。建议不要将其设置超过<code>0.35</code>，这已经是相当高的值了。</p>
<p>如果调整<code>threshold</code>没有效果，就重点关注<code>maxDiffPixelRatio</code>和<code>maxDiffPixels</code>这两个参数。在使用这些选项时，要权衡利弊。</p>
<p><code>maxDiffPixelRatio</code>是相对于图像大小的比例，因此更可能在各种不同大小的图像中都能产生良好的结果。这使它成为全局设置的理想选择——但前提是要谨慎设置！毕竟，允许整个页面图像 10%的差异可能会导致过大的变化被忽视。</p>
<p>相比之下，<code>maxDiffPixels</code>是一个固定的像素值，可以让你更精确地控制单个测试。但如果将其应用于全局设置，即使数值很小也可能带来风险。对于小图像来说，较高的<code>maxDiffPixels</code>可能会占据图像的很大比例。</p>
<p>在调整这些参数时，要根据你的具体需求和图像特征，找到最佳平衡点。</p>
<h2 id="ci-cd-zhong-de-shi-jue-ce-shi">CI/CD 中的视觉测试</h2>
<p>太棒了!你已经在本地成功运行了视觉测试,并对结果很有信心。现在是时候将这些测试整合到你的 CI/CD 流程中了。</p>
<p>你可能会觉得这听起来不太容易。毕竟,你需要一种方法在不同的测试运行期间保存截图,还需要让你的 CI/CD 流程知道何时应该更新截图缓存。</p>
<p>不过别担心,我已经为你准备好了解决方案。:)</p>
<p>在这个例子中,我们假设你使用的是 GitHub Actions。不过即使你使用其他 CI/CD 服务提供商,操作步骤也大同小异。</p>
<p>那么,让我们开始吧!</p>
<h3 id="1-wei-ci-cd-pei-zhi-playwright">1. 为 CI/CD 配置 Playwright</h3>
<p>你的 CI/CD 环境与本地开发环境存在差异,我们需要在 Playwright 配置中对此作出相应调整。</p>
<p>请使用以下设置 来更新你的 <code>playwright.config.ts</code> 文件。你可以将这些新选项与你之前设置的其他选项自由组合:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">= !!</span><span>process.env.</span><span style="color:#e9fdac;">CI</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> timeout: </span><span style="color:#fdb082;">1000 </span><span style="color:#ff5e5e;">* </span><span style="color:#fdb082;">60</span><span>,
</span><span> workers: </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">1 </span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">50%</span><span style="color:#ffffff;">"</span><span>,
</span><span> retries: </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">2 </span><span style="color:#ff5e5e;">: </span><span style="color:#fdb082;">0</span><span>,
</span><span> forbidOnly: </span><span style="color:#e9fdac;">isCI</span><span>,
</span><span>
</span><span> outputDir: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.test/spec/output</span><span style="color:#ffffff;">"</span><span>,
</span><span> snapshotPathTemplate:
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.test/spec/snaps/{projectName}/{testFilePath}/{arg}{ext}</span><span style="color:#ffffff;">"</span><span>,
</span><span> testMatch: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">*.spec.{ts,tsx}</span><span style="color:#ffffff;">"</span><span>,
</span><span>
</span><span> reporter: [
</span><span> [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>,
</span><span> {
</span><span> outputFolder: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.test/spec/results</span><span style="color:#ffffff;">"</span><span>,
</span><span> open: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">never</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> ],
</span><span> </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">? </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">github</span><span style="color:#ffffff;">"</span><span>] </span><span style="color:#ff5e5e;">: </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">line</span><span style="color:#ffffff;">"</span><span>],
</span><span> ],
</span><span>});
</span></code></pre>
<p>这些配置选项主要考虑了以下几个方面:</p>
<ol>
<li>
<p>CI 环境资源限制:
CI 环境通常资源有限,这会导致测试运行速度变慢,稳定性降低。因此,我们需要调整相关参数来适应这种情况。</p>
</li>
<li>
<p>测试输出整理:
我们将所有测试输出都组织到<code>.test</code>目录中,这样可以方便进行缓存管理。记得将<code>.test/</code>添加到你的<code>.gitignore</code>文件中,因为这些内容不应该提交到代码仓库。</p>
</li>
<li>
<p>报告生成:
在 CI/CD 环境中,我们会生成两种类型的报告:</p>
<ul>
<li><code>html</code>报告: 这种报告对于深入调试非常有用。</li>
<li><code>github</code>报告: 这种报告提供简洁的输出,便于快速查看结果。</li>
</ul>
</li>
</ol>
<h3 id="2-zai-ci-cd-zhong-yun-xing-ni-de-ce-shi">2. 在 CI/CD 中运行你的测试</h3>
<p>接下来,让我们创建一个基本的流水线。它还不能做所有事情,但它是一个很好的快速开始模版。</p>
<p>在<code>.github/workflows/visual-tests.yml</code>创建一个文件:</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Visual Tests
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">push</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>:
</span><span> - </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">*</span><span style="color:#ffffff;">"
</span><span>
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>:
</span><span> - </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">*</span><span style="color:#ffffff;">"
</span><span>
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">run-tests</span><span>:
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">15
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Checkout
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v4
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set up Node
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">cache</span><span>: </span><span style="color:#fbe3bf;">pnpm
</span><span> </span><span style="color:#ff5e5e;">node-version-file</span><span>: </span><span style="color:#fbe3bf;">.nvmrc
</span><span> </span><span style="color:#ff5e5e;">check-latest</span><span>: </span><span style="color:#ff8942;">true
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install deps
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> npm install
</span><span style="color:#fbe3bf;"> npx playwright install
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Test
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test --ignore-snapshots
</span></code></pre>
<p>注意我们使用<code>--ignore-snapshots</code>标志运行测试。由于我们没有办法在测试运行之间存储截图,这实际上是让我们的测试通过的唯一方法。</p>
<p>如果你现在将你的代码推送到 Github,工作流将直接运行,并且它会通过,但它不会做任何的测试验证。</p>
<p>让我们来解决这个问题...</p>
<h3 id="3-zai-yun-xing-zhi-jian-cun-chu-jie-tu">3. 在运行之间存储截图</h3>
<p>为了确保我们的视觉测试能够正常运行，我们需要在不同的测试运行之间保存截图。为此，我们将利用 GitHub 的"artifacts"功能来缓存这些截图。</p>
<p>其次，我们还要编写一个步骤，用于在截图不存在时生成新的截图。这样可以解决我们的测试在新分支上首次运行时可能出现的失败问题。</p>
<p>最后，我们将重新启用截图断言，让视觉测试发挥其应有的作用。</p>
<p>以下是具体的更新内容：</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install deps
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> npm install
</span><span style="color:#fbe3bf;"> npx playwright install
</span><span style="color:#fbe3bf;">
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set up cache
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">cache
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">cache/${{github.repository}}/${{github.ref}}
</span><span> </span><span style="color:#ff5e5e;">restore-keys</span><span>: </span><span style="color:#fbe3bf;">cache/${{github.repository}}/refs/heads/master
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">.test/**
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Initialize snapshots
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">${{steps.cache.outputs.cache-hit != 'true'}}
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test --update-snapshots
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Test
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test
</span></code></pre>
<p>请注意，我们的缓存键不仅包含当前分支的信息，还包括了对<code>master</code>分支的回退机制。这样设计的好处是，当新分支首次推送时，它也能有一些基本的东西可以使用。</p>
<p>如果你现在触发 CI/CD 流程，你会观察到以下情况：</p>
<ol>
<li>
<p>在第一次运行时：</p>
<ul>
<li>系统会生成新的截图</li>
<li>测试会通过</li>
<li>缓存会被更新</li>
</ul>
</li>
<li>
<p>在后续的运行中：</p>
<ul>
<li>系统会命中缓存</li>
<li>不会生成新的截图</li>
<li>测试仍然会通过</li>
</ul>
</li>
</ol>
<p>到目前为止，一切看起来都很顺利。但是，我们还需要考虑一个重要问题：当截图需要更新时，我们该如何处理呢？</p>
<h3 id="4-hong-fa-jie-tu-geng-xin">4. 触发截图更新</h3>
<p>现在我们有了真正有效的视觉测试,让我们更新我们的工作流,以便我们可以按需更新截图。</p>
<p>首先,让我们参数化我们的工作流...</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">push</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>:
</span><span> - </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">*</span><span style="color:#ffffff;">"
</span><span>
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>:
</span><span> - </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">*</span><span style="color:#ffffff;">"
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Allow updating snapshots during manual runs
</span><span> </span><span style="color:#ff5e5e;">workflow_call</span><span>:
</span><span> </span><span style="color:#ff5e5e;">inputs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">update-snapshots</span><span>:
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Update snapshots?</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">type</span><span>: </span><span style="color:#fbe3bf;">boolean
</span><span>
</span><span> </span><span style="color:#6d6d6d;"># Allow updating snapshots during automatic runs
</span><span> </span><span style="color:#ff5e5e;">workflow_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">inputs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">update-snapshots</span><span>:
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Update snapshots?</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">type</span><span>: </span><span style="color:#fbe3bf;">boolean
</span></code></pre>
<p><code>workflow_call</code>允许我们手动触发工作流,选择是否更新截图。<code>workflow_dispatch</code>允许其他 Github 工作流使用相同的配置。</p>
<p>以下是手动小组件的样子:</p>
<p><img src="https://res.cloudinary.com/browsercat/image/upload/c_fill,w_768/dpr_auto/f_auto/q_auto/v1/articles/pw-snapshot-github-trigger.png?_a=DATAdtTEZAA0" alt="图3: 手动Github工作流" /></p>
<p>让我们对"Initialize snapshots"（初始化截图）步骤进行更新，使其能够在特定参数启用时触发截图更新。具体更新如下：</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Initialize snapshots
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">${{steps.cache.outputs.cache-hit != 'true' || inputs.update-snapshots == 'true'}}
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test --update-snapshots --reporter html
</span></code></pre>
<p>最后，让我们把生成的 HTML 报告作为 artifact 上传。这样做有两个重要的好处：</p>
<ul>
<li>在决定是否需要更新工作流中的截图之前，我们可以先参考这份报告。</li>
<li>如果遇到问题需要调试，这份报告也会成为很有价值的参考资料。</li>
</ul>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Test
</span><span> </span><span style="color:#ff5e5e;">continue-on-error</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload test report
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v4
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">playwright-report
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">.test/spec/results/
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">30
</span><span> </span><span style="color:#ff5e5e;">overwrite</span><span>: </span><span style="color:#ff8942;">true
</span></code></pre>
<p>注意我们的"Test"步骤现在启用了<code>continue-on-error</code>,这样即使测试失败,我们也可以上传我们的报告。</p>
<p>我们新增了一个"Upload test report"（上传测试报告）步骤，它的作用是将报告作为 artifact 上传。这样做之后，你会发现在工作流的结果页面中出现了一个新的链接。这个链接会直接指向一个 zip 文件，里面包含了我们刚刚生成的测试报告。</p>
<p><img src="https://res.cloudinary.com/browsercat/image/upload/c_fill,w_768/dpr_auto/f_auto/q_auto/v1/articles/pw-snapshot-github-artifact.png?_a=DATAdtTEZAA0" alt="图4: Github工作流报告" /></p>
<h3 id="5-da-fu-ti-sheng-ni-de-ci-cd-liu-shui-xian-su-du">5. 大幅提升你的 CI/CD 流水线速度！</h3>
<p>目前一切进展顺利，但我们还能做一件事让视觉测试更上一层楼：<em>让它们飞速运行</em>！</p>
<p>你可能已经注意到两个步骤正在拖慢你的流水线：</p>
<ol>
<li>安装 Playwright 浏览器。</li>
<li>串行运行测试。</li>
</ol>
<p>幸运的是，我们可以不用花钱而很容易的解决这两个问题。</p>
<p><a href="https://www.browsercat.com/hosted-playwright">BrowserCat</a> 在云端托管了一批 Playwright 浏览器，你只需几行代码就能连接使用。</p>
<p>如果你这样做，就不必在 CI/CD 环境中安装浏览器，而且可以完全并行运行测试。</p>
<p>最棒的是？BrowserCat 提供了一个<em>超赞的</em>永久免费计划。除非你有一个庞大的团队，否则你可能永远不用花一分钱。</p>
<p>那么让我们开始吧！</p>
<p>首先，在 <a href="https://app.browsercat.com/">BrowserCat</a> 注册一个免费账户。</p>
<p>其次，创建一个 <a href="https://app.browsercat.com/keys">API 密钥</a>，并将其作为名为 <code>BROWSERCAT_API_KEY</code> 的秘密存储在你的 Github 仓库中。你可以通过导航到你的仓库，点击"Settings"，然后"Secrets"，再点"Actions"，最后点"New repository secret"来完成这一步。</p>
<p>第三，让我们更新 <code>playwright.config.ts</code> 以使用 BrowserCat：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">= !!</span><span>process.env.</span><span style="color:#e9fdac;">CI</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">useBC </span><span style="color:#ff5e5e;">= !!</span><span>process.env.</span><span style="color:#e9fdac;">BROWSERCAT_API_KEY</span><span>;
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> timeout: </span><span style="color:#fdb082;">1000 </span><span style="color:#ff5e5e;">* </span><span style="color:#fdb082;">60</span><span>,
</span><span> workers: </span><span style="color:#e9fdac;">useBC </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">10 </span><span style="color:#ff5e5e;">: </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">1 </span><span style="color:#ff5e5e;">: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">50%</span><span style="color:#ffffff;">'</span><span>,
</span><span> retries: </span><span style="color:#e9fdac;">useBC </span><span style="color:#ff5e5e;">|| </span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">2 </span><span style="color:#ff5e5e;">: </span><span style="color:#fdb082;">0</span><span>,
</span><span> maxFailures: </span><span style="color:#e9fdac;">useBC </span><span style="color:#ff5e5e;">&& !</span><span style="color:#e9fdac;">isCI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">0 </span><span style="color:#ff5e5e;">: </span><span style="color:#fdb082;">3</span><span>,
</span><span> forbidOnly: </span><span style="color:#e9fdac;">isCI</span><span>,
</span><span> use: {
</span><span> connectOptions: </span><span style="color:#e9fdac;">useBC </span><span style="color:#ff5e5e;">? </span><span>{
</span><span> wsEndpoint: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">wss://api.browsercat.com/connect</span><span style="color:#ffffff;">'</span><span>,
</span><span> headers: {</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Api-Key</span><span style="color:#ffffff;">'</span><span>: process.env.</span><span style="color:#e9fdac;">BROWSERCAT_API_KEY</span><span>},
</span><span> },
</span><span> },
</span><span>});
</span></code></pre>
<p>在上面的更新中，你会注意到我们在使用 BrowserCat 时将并行化增加到了 10 个工作进程。这是一个不错的起点，但你可以毫无问题地大幅增加这个数值。</p>
<p>注意，只要定义了 <code>BROWSERCAT_API_KEY</code>，这个配置就会连接到 BrowserCat。这对于在本地和 CI/CD 中运行测试都很有用。</p>
<p>好了，现在是最后一点魔法...让我们停止每次运行流水线时安装 Playwright 的浏览器：</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install deps
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm install
</span></code></pre>
<p>如果你现在运行你的流水线，即使你的测试套件中只有一个测试，你也会看到显著的速度提升。而且每月 1000 个免费积分，你可以连续运行流水线数小时，还有大量时间剩余。</p>
<h2 id="jie-xia-lai-de-bu-zou">接下来的步骤...</h2>
<p>呼！你已经走了很长的路。</p>
<p>到这一步，你能做的唯一一件提高视觉测试技能的事就是练习。赶紧去截图吧！</p>
<p>这里有一些很棒的链接可以帮助你：</p>
<ul>
<li><a href="https://playwright.dev/docs/test-snapshots">Playwright 视觉比对</a></li>
<li><a href="https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1">expect(page).toHaveScreenshot()</a></li>
<li><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-screenshot-1">expect(locator).toHaveScreenshot()</a></li>
<li><a href="https://playwright.dev/docs/api/class-snapshotassertions#snapshot-assertions-to-match-snapshot-1">expect(image).toMatchSnapshot()</a></li>
<li><a href="https://playwright.dev/docs/api/class-testconfig#test-config-expect">TestConfig.expect</a></li>
<li><a href="https://www.browsercat.com/blog">BrowserCat 博客</a></li>
</ul>
<p>祝你自动化测试愉快！</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright</p>
<p>发布时间: 2024-02-28</p>
提升自动化测试：当 Playwright 遇上 ChatGPT
2024-02-27T00:00:00+00:00
2024-02-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/
<p>由 <a href="https://www.linkedin.com/in/christine-pinto/">Christine Pinto</a>撰写</p>
<p>在快速发展的软件开发领域,<a href="https://playwright.dev/">Playwright</a> 凭借其与 Visual Studio Code 和 GitHub 的强大集成以及不断壮大的社区支持,重塑了自动化测试。我转向使用这个框架的过程因为结合了 ChatGPT 而得到显著的效率提升,标志着我今后编写和调试 UI 测试方式的一个转折点。</p>
<p>我采用 Playwright 和 ChatGPT 的旅程清楚地展示了 AI 在连接不同测试环境和编码语言之间的强大作用。这种组合不仅简化了迁移过程;它还丰富了工程师的工具箱,实现了更流畅和适应性更强的自动化测试方法。自动化工程师的经验和知识仍然至关重要,但 ChatGPT 作为一个强大的盟友,指导我们学习新技术和能力。</p>
<p>通过本文,我们将探讨 ChatGPT 如何促进这些转变,突出其中的优势和挑战。这证明了人类专业知识和人工智能如何在软件测试领域不断发展及协作。</p>
<p>自从 2020 年微软推出 Playwright 以来， 改工具因其对 Google Chrome、Firefox、Microsoft Edge 和 WebKit 等多种浏览器的全面支持而备受赞誉。Playwright 以其无缝集成多种编程语言中，其确保跨浏览器一致性结果的能力非常突出,现在已经成为了现代软件开发工作流程中的主要工具。其快速采纳技术社区的积极反馈得到了广泛的赞誉，这点通过不断增长的用户基础和 GitHub 星标数量可以得到完美的体现。Playwright 对提升自动化测试实践的贡献展示了其在该领域的重要性和创新性,使其成为有追求的测试工程师的首选工具。</p>
<h2 id="zai-ce-shi-zi-dong-hua-zhong-li-yong-chatgpt">在测试自动化中利用 ChatGPT</h2>
<p>在本节中,我将向你展示 ChatGPT-4 如何显著简化我的编码实践。它帮助我找到错误消息的解决方案,将代码片段从一种编程语言转换为另一种,甚至仅根据几个输入和预定义的输出就能提出函数原型。我收集了一些我与 ChatGPT-4 实际对话中最喜欢的例子,向你展示它如何在现实情况下工作。如果你想看这些对话并了解更多关于 ChatGPT-4 如何帮助你编写自己的测试,请继续阅读!</p>
<h2 id="jiang-xiang-fa-he-dai-ma-pian-duan-zhuan-huan-wei-typescript">将想法和代码片段转换为 TypeScript</h2>
<p>由于主要使用 TypeScript 以外的语言,我使用 ChatGPT 帮助我将一些现有的编码项目和想法转换为 typescript。事实证明，它非常有用,指导我转换代码片段并在 TypeScript 中实现了各种概念 。这个 AI 工具平滑了我的学习曲线,使学习和使用 TypeScript 变得更加的高效可控。</p>
<p><em>我的第一个提示:</em></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./1.png" alt="图片 1" /></p>
<p><em>这是 ChatGPT 的结果:</em></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./2.png" alt="图片 2" /></p>
<p>这是一个很好的开始,特别是因为 ChatGPT 包含了 UI 测试所需的 Playwright 库的各种导入。</p>
<p><em>接下来,我寻求一些帮助来完成我想执行的任务:</em></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./3.png" alt="图片 3" /></p>
<p><em>结果非常详细:</em></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./4.png" alt="图片 4" /></p>
<p><em>学习新的编程语言通常意味着要适应不同的数据类型,这可能很棘手。幸运的是,ChatGPT 也能在这方面提供帮助,使学习过程更加的顺畅:</em></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./5.png" alt="图片 5" /></p>
<p>这是三个快速示例,展示了如何借助 ChatGPT 将思路或代码片段转换为 TypeScript。要深入了解对话和逐步过程,请查看此处的完整对话:<a href="https://chat.openai.com/share/9656950e-b8a8-477d-afbc-f555a11db748">https://chat.openai.com/share/9656950e-b8a8-477d-afbc-f555a11db748</a>。</p>
<h2 id="tong-guo-chatgpt-jiang-playwright-yu-github-actions-ji-cheng">通过 ChatGPT 将 Playwright 与 GitHub Actions 集成</h2>
<p>UI 测试启动并运行后,现在是时候通过 GitHub Actions 为我们的代码库建立自动化测试工作流了。这一步确保我们的测试无缝集成到开发周期中,提高 CI/CD 流水线的效率和可靠性。</p>
<p>基于这个目标,我写了以下提示:</p>
<blockquote>
<p>如何使用 GitHub actions 在每次合并到主分支时执行 playwright UI 测试用例</p>
</blockquote>
<p>ChatGPT 提供了一个简单的指南来设置 GitHub Action 工作流,使过程变得简单明了:</p>
<p>为了从 GitHub action 中访问 Playwright 报告,我写了以下提示:</p>
<blockquote>
<p>如何保存在 GitHub action 期间创建的 playwright 报告,以便稍后可以访问它</p>
</blockquote>
<p>ChatGPT 推荐使用 GitHub 的 artifact 上传功能来完成我的任务。然而,我遇到了一个问题,当 UI 测试报错时候,上传任务就不会执行,这促使我问以下问题:</p>
<blockquote>
<p>我想让 GitHub action 在出错时也上传 artifact</p>
</blockquote>
<p><em>ChatGPT 的建议很有帮助,但它导致了一个假阳性问题,那就是即使 UI 测试代码出错而失败,GitHub Action 也显示成功。这需要我进一步完善提示:</em></p>
<blockquote>
<p>如果只想在失败时导出 playwright 报告,如何将其添加到 GitHub action 中</p>
</blockquote>
<p>总结一下,很明显为 UI 测试设置精简的工作流对任何项目都是一个游戏规则的改变者。它不仅确保测试成为开发周期的一个连贯部分,还提高了 CI/CD 流水线的整体效率和可靠性。在整个过程中,与 ChatGPT 的互动在完善设计方案上面被证明非常有价值,突出了清晰沟通和迭代反馈对达成有效解决方案的必要性。这种经历强调了明确测试意图的价值,以及让我们看到了与 ChatGPT 合作解决问题的可能,引导我们实现量身定制的方案，最终达到集成的效果。</p>
<p>要深入了解对话和 ChatGPT 提供的分步指导,请查看此 URL 的聊天:<a href="https://chat.openai.com/share/2998ae7d-3d76-49a4-87ae-f16793c0171e">https://chat.openai.com/share/2998ae7d-3d76-49a4-87ae-f16793c0171e</a>。</p>
<h2 id="shi-yong-chatgpt-jin-xing-cuo-wu-chu-li">使用 ChatGPT 进行错误处理</h2>
<p>我们都经历过这种情况——面对一条错误消息,我们陷入无休止的 Google 搜索、浏览论坛和阅读文章以寻找解决方案的漫长过程。这可能是绝对的浪费时间。幸运的是,ChatGPT 提供了一种更快的方法来应对这些情况。以下是 ChatGPT 如何帮助我解决在设置 GitHub action 工作流时遇到的错误(我继续之前的聊天),证明在高效故障排除方面，使用 ai 的优势十分明显。</p>
<p><em>这是我的错误消息:</em></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./6.png" alt="图片 6" /></p>
<p><img src="https://playwright.itest.info/blog/elevating-automated-testing-playwright-meets-chatgpt/./7.png" alt="图片 7" /></p>
<p><em>ChatGPT 提供了两种解决方案:在无界面模式下运行浏览器和使用 xvfb-run 模拟显示环境。考虑到我的测试涉及 Chrome 扩展,需要在有界面模式下运行,我决定探索 xvfb-run 方法。通常,当我遇到错误消息时,我会深入搜索许多论坛和文章以找到解决方法。这次,ChatGPT 直接切入主题,快速给我两个可靠的选择。我选择了第二个想法,尝试 xvfb-run,并且它成功了!这为我节省了大量时间和精力来弄清楚问题。</em></p>
<h2 id="tan-suo-chatgpt-ji-cheng-de-xie-tong-xiao-ying-he-tiao-zhan">探索 ChatGPT 集成的协同效应和挑战</h2>
<p>将 ChatGPT 与 Playwright 集成带来了丰富的实际应用成果，展示了当前 AI 工具在测试自动化中的潜力和局限性。利用 AI 进行错误处理和将概念性想法转化为可执行的 TypeScript 代码等任务的转变，简化了编程过程的许多方面。这种方法不仅提高了效率，还促进了更动态和响应迅速的开发周期，使迭代更快、质量更高。</p>
<p>尽管取得了这些进展和好处，我在这个过程中也遇到了不少挑战。最大的挑战之一是我最初对完全由 AI 生成的解决方案的依赖。这些解决方案虽然创新，但需要仔细审查以验证其相关性和适用性。这一经历表明，人工监督在解释和完善 AI 生成的输出，以适应各种不同项目的独特需求方面仍然不可或缺。</p>
<p>从这种集成中，我学到了提示工程的重要性——这是一项在优化与 ChatGPT 交互方面至关重要的技能。有效的提示工程涉及制定能引导 AI 产生更准确和相关输出的查询，提高 ChatGPT 在编程任务中的实用性。学习这项技能不仅帮助我克服了与 AI 局限性相关的一些挑战，还极大地提高了利用 ChatGPT 进行测试自动化的效率。</p>
<p>此外，在利用 AI 能力和依赖自动化工程师的批判性思维和经验之间保持平衡的需求变得异常清晰。虽然 AI 可以自动化某些任务，但它无法模仿自动化工程师的细微理解和适应性问题解决技能。因此，利用 AI 导航测试自动化的复杂性需要一个持续的学习过程，其中理解提示工程的复杂性成为充分利用 ChatGPT 等 AI 工具的关键能力。</p>
<h2 id="ai-zai-ce-shi-zi-dong-hua-zhong-de-wei-lai-fang-xiang">AI 在测试自动化中的未来方向</h2>
<p>展望 AI 在测试自动化中的未来，认识到 Auto Playwright 和 <a href="https://zerostep.com/">ZeroStep</a> 等框架的潜力至关重要。这些工具旨在简化测试过程，为没有专门自动化工程师的团队提供了有趣的可能性。然而，重要的是理解，这些框架尽管创新，不能取代自动化工程师的宝贵技能。正如前面提到的，AI 在其当前状态下无法复制人类专家的知识深度、批判性思维和经验。在简要了解这些框架后，我仍然对它们与熟练专业人士相比的表现持怀疑态度，尽管我还没有亲自验证它们。</p>
<p>保持对 AI 进展的了解非常重要，因为在未来，平衡自动化技术和人类专业知识之间的关系将变得更加关键。我毫不怀疑，AI 将继续在识别稳定选择器等任务中发挥越来越多的支持作用，这是测试自动化中的一个常见挑战。任何处理过查找可靠选择器的人都知道这种困境，而 AI 快速识别不稳定选择器并提供有效修复的能力可能会大大改善我们工作的这一方面。这不仅会使过程更快更容易，还会增强自动化工程师向开发人员提供的反馈，从而提高整体软件质量。</p>
<h2 id="jie-lun">结论</h2>
<p>希望通过本文，你能了解 ChatGPT 如何显著加速了我向新测试框架和编程语言的过渡。它在错误处理和简化复杂任务方面的帮助是非常大的，使我进入新领域的旅程变得更快更易管理。使用 ChatGPT 所获得的见解和效率让我相信，在未来的项目中继续使用这个 AI 助手，特别是在错误处理和其他编程挑战方面。</p>
<p>我强烈建议同行的自动化工程师和开发人员亲自测试，探索 AI 助手如 ChatGPT 在测试自动化工作流程中的所有潜力。这些工具在增强成果、减少手动工作和为开发周期注入速度方面的价值不可低估。无论是简化技术之间的过渡、改进错误处理还是生成代码片段，将 AI 集成到测试自动化中的影响只会不断增长。</p>
<p>最后，我很乐意听到你在测试自动化中使用 AI 的经验！你是否发现了类似的好处，或者有自己独特的挑战？AI 助手如何改变了你自己的测试方法？让我们就在测试自动化中使用这些创新实践展开讨论。通过交流我们的故事和策略，我们可以集体推动我们领域的可能性，朝着技术和人类专业知识结合以实现软件质量显著提升和突破的未来迈进。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://adventuresinqa.com/2024/02/27/elevating-automated-testing-playwright-meets-chatgpt/">URL 来源</a></p>
<p>发布时间: 2024-02-27</p>
Playwright 选择器终极指南
2024-01-24T00:00:00+00:00
2024-01-24T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-selectors/
<h2 id="xie-zai-qian-mian">写在前面</h2>
<p><strong>👀 乙醇来自 2024 年的评论。这篇文章不是特别推荐，里面讲了很多 xpath 和 css 选择器的高级应用，不过 xpath 是 playwright 不推荐使用的方式，css 在 playwright 里的地位也不高，playwright 最推荐的定位器其实是<a href="https://playwright.dev/docs/locators#quick-guide">这几个</a></strong></p>
<p>在 Playwright 中,选择器是用于定位和交互网页元素的字符串标识符。它们对于执行表单填写、网页爬取和自动化测试等任务至关重要。</p>
<p>Playwright 是一个开源的自动化库,专为端到端测试、网页爬取和 ui 自动化测试而设计。它支持无头和有头浏览器模式,并通过快速易用的 API 提供出色的性能。</p>
<p>Playwright 兼容多种浏览器,包括 Chrome、Microsoft Edge (使用 Chromium)、Safari (使用 WebKit) 和 Mozilla Firefox。Playwright 提供不同类型的选择器,包括 CSS 选择器、XPath 选择器和文本选择器,每种选择器都有其优势和适用场景。</p>
<p><img src="https://bugbug-homepage.s3.eu-central-1.amazonaws.com/playwright_meme_api_17fe7e4658.jpeg" alt="图片 1: playwright-meme" /></p>
<h2 id="gai-yao"><strong>概要</strong></h2>
<ul>
<li>本指南涵盖了不同类型的选择器,包括 CSS、XPath 和文本选择器,并解释了它们的用法和优势。</li>
<li>还提供了创建可靠和可维护的自动化脚本的最佳实践。</li>
</ul>
<p><strong>另请查看:</strong></p>
<p><a href="https://bugbug.io/blog/software-testing/codeless-automation-testing-tools/">15 大无代码自动化测试工具</a></p>
<p><a href="https://bugbug.io/blog/test-automation-tools/testim-alternatives/">Testim 替代品</a></p>
<p><a href="https://bugbug.io/blog/test-automation-tools/cypress-alternative/">Cypress 替代品</a></p>
<h2 id="playwright-ru-men">Playwright 入门</h2>
<p>要开始使用 Playwright,你需要安装它并设置一个项目。</p>
<p><strong>以下是步骤指南:</strong></p>
<ol>
<li>为你的 Playwright 项目创建一个新文件夹。</li>
<li>在终端或命令行界面中打开该文件夹。</li>
<li>运行命令 <code>npm init -y</code> 来初始化一个新的 Node.js 项目。</li>
<li>通过运行命令 <code>npm install playwright</code> 来安装 Playwright。</li>
<li>导入 Playwright 并创建一个新的浏览器实例。</li>
</ol>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">chromium</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// your code here
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#6699cc;">close</span><span>();
</span><span>})();
</span></code></pre>
<p>安装好 Playwright 后,你就可以开始使用选择器与网页元素进行交互了。如果你想了解更多关于使用 Playwright 的信息,可以查看我们的 <a href="https://bugbug.io/blog/software-testing/playwright-cheat-sheet/">Playwright 速查表</a>。</p>
<h2 id="playwright-zhong-de-ding-wei-qi-api">Playwright 中的定位器 API</h2>
<p>Playwright 的定位器 API 是自动等待和重试功能的核心,使得与网页元素的交互更加稳定。以下是关于它的一些要点:</p>
<ol>
<li><strong>创建定位器</strong>: 定位器使用 <code>page.locator()</code> 方法创建。此方法接受一个描述如何在页面中查找元素的选择器。Playwright 支持 CSS 和 XPath 选择器,如果省略 <code>css=</code> 或 <code>xpath=</code> 前缀,它会自动检测。</li>
<li><strong>可操作性检查</strong>: 在执行操作之前,Playwright 会对元素进行可操作性检查。这包括确保元素是可见的、attached 的和稳定的。例如,在点击一个元素时,Playwright 会等待它变为可点击状态。</li>
<li><strong>具体的操作行为</strong>: 在执行诸如 <code>click</code> 或 <code>dblclick</code> 等操作时,你可以指定各种选项:</li>
</ol>
<ul>
<li><code>position</code>: 相对于元素左上角的 x 和 y 坐标。</li>
<li><code>timeout</code>: 等待操作完成的最长时间(以毫秒为单位)。默认为 30 秒,但你可以传入 0 来禁用超时。</li>
<li><code>trial</code>: 当设置为 true 时,该方法会执行可操作性检查而不执行实际的操作。这对于确保元素已准备好进行交互很有用。</li>
</ul>
<ol start="4">
<li><strong>点击和双击</strong>: <code>click</code> 方法用于点击元素,你可以指定鼠标按钮、点击次数、鼠标按下和释放之间的延迟,以及修饰键(如 Shift、Control)等选项。<code>dblclick</code> 方法类似,但执行双击操作。</li>
<li><strong>元素数量</strong>: <code>count</code> 方法返回匹配给定选择器的元素数量,有助于断言检查页面上特定元素的数量。</li>
<li><strong>通过 text、Alt text titile 以及 testID 定位</strong>: 你以根据元素的文本内容、alt 文本、title 属性或 textID 来定位元素。这对于查找非交互元素(如 <code>div</code>、<code>span</code>、<code>p</code> 等)以及具有特定标题或 textID 的图像和元素特别有用。</li>
<li><strong>Shadow DOM</strong>: Playwright 中的定位器默认可以与 Shadow DOM 中的元素一起工作,但 XPath 选择器 不支持这个特性。</li>
<li><strong>filter</strong>: 你可以通过文本、子元素是否存在或其他条件来过滤定位器。当你需要从列表或一组元素中选择特定项目时,这很有用。</li>
</ol>
<p>Playwright 中的定位器 API 旨在尽可能模仿用户交互,使其成为编写可靠和可维护测试用例的强大工具。如需更详细的信息,你可以参考 Playwright 官方文档中关于<a href="https://playwright.dev/docs/locators">定位器</a>和定位器方法的部分。</p>
<h2 id="playwright-css-xuan-ze-qi">Playwright CSS 选择器</h2>
<p><strong>CSS 选择器</strong>是 Web 开发中的一个主要工具,在 Playwright 中广泛用于定位网页中的元素。这些选择器是代表不同元素的字符串,基于元素的属性、class 或 ID。</p>
<p><strong>Playwright CSS 选择器</strong>与常规 CSS 中的选择器类似,但为 Web 自动化进行了增强,允许精确定位元素。它们能够匹配包含指定属性或类的任何元素,其语法与传统 CSS 非常相似。这包括复杂的选择器,如伪类,它们是 Playwright 中的实验性 CSS 功能。</p>
<p>此外,Playwright 支持属性选择器操作符,并可以解析将多个空格转换为一个空格的行为,确保空格始终被标准化。</p>
<ol>
<li><strong>基本 CSS 选择器用法</strong>:</li>
</ol>
<ul>
<li>
<p>Playwright 可以使用标准 CSS 语法定位元素。</p>
<p><code>await page.locator('css=button').click();</code></p>
</li>
</ul>
<ol start="2">
<li><strong>穿透 Shadow DOM</strong>:</li>
</ol>
<ul>
<li>Playwright 中的 CSS 选择器可以穿透开放的 Shadow DOM,允许访问 shadow dom 元素。</li>
</ul>
<ol start="3">
<li><strong>自定义伪类</strong>:</li>
</ol>
<ul>
<li>Playwright 引入了 <code>:visible</code>、<code>:has-text()</code>、<code>:has()</code>、<code>:is()</code>、<code>:nth-match()</code> 等伪类。</li>
<li><code>:visible</code> 只针对可见元素。</li>
</ul>
<p><code>await page.locator('button:visible').click();</code></p>
<ul>
<li>
<p><code>:has-text()</code> 匹配包含指定文本的元素,对于不区分大小写、去除空格的子字符串匹配很有用。</p>
<p><code>await page.locator('article:has-text("Playwright")').click();</code></p>
</li>
</ul>
<ol start="4">
<li><strong>通过文本匹配</strong>:</li>
</ol>
<ul>
<li>
<p><code>:text()</code> 伪类匹配包含指定文本的元素。</p>
<p><code>await page.locator('#nav-bar :text("Home")').click();</code></p>
</li>
<li>
<p><code>:text-is()</code> 匹配具有完全相同文本的元素。</p>
<p><code>await page.locator('#nav-bar :text-is("Home")').click();</code></p>
</li>
<li>
<p><code>:text-matches()</code> 匹配文本内容符合类似 JavaScript 正则表达式的元素。</p>
<p><code>await page.locator('#nav-bar :text-matches("reg?ex", "i")').click();</code></p>
</li>
</ul>
<ol start="5">
<li><strong>包含其他元素的元素</strong>:</li>
</ol>
<ul>
<li>
<p><code>:has()</code> 伪类是 Playwright 中的实验性 CSS 功能。如果元素包含由选择器指定的其他元素,它会返回该元素。</p>
<p><code>await page.locator('article:has(div.promo)').textContent();</code></p>
</li>
</ul>
<ol start="6">
<li><strong>基于布局匹配元素</strong>:</li>
</ol>
<ul>
<li>Playwright 的布局伪类如 <code>:right-of()</code>、<code>:left-of()</code>、<code>:above()</code>、<code>:below()</code> 和 <code>:near()</code> 可用于根据元素与其他元素的空间关系选择元素。</li>
</ul>
<p><code>await page.locator('input:right-of(:text("Password"))').fill('value');</code></p>
<ol start="7">
<li><strong>从查询结果中选择第 N 个匹配项</strong>:</li>
</ol>
<ul>
<li><code>:nth-match()</code> 伪类从多个匹配项中选择特定实例的元素。</li>
</ul>
<p><code>await page.locator(':nth-match(:text("Buy"), 3)').click();</code></p>
<p>这些功能使 Playwright 中的 CSS 选择器成为 Web 自动化的强大工具,不仅允许基于元素的属性和文本内容精确定位元素,还可以根据它们的可见性、包含关系和相对位置进行定位。</p>
<p>这种多样性在复杂的 Web 应用程序中特别有用,因为标准选择器功能有限，扩展之后才更好用一点。</p>
<h2 id="playwright-zhong-de-xpath-xuan-ze-qi">Playwright 中的 XPath 选择器</h2>
<p><strong>XPath 选择器</strong>为 Playwright 中的元素定位提供了另一种强大的方法。与 CSS 选择器不同,XPath 选择器基于网页的 dom 结构。它们允许你根据元素的位置、属性和其他条件来查找元素,xpath 可以精确地遍历 DOM。这在 CSS 选择器可能不够用的情况下特别有用,比如复杂布局或需要查找包含指定文本的元素的时候。</p>
<p><strong>Playwright 中的 XPath</strong> 还支持自定义选择器引擎,为选择很难通过 CSS 去定位的元素提供了灵活性。</p>
<p>你可以使用 BugBug 的<strong>无代码</strong> <a href="https://bugbug.io/xpath-selector-builder/"><strong>在线 XPath 生成器</strong></a>来创建稳定的 xpath 选择器。</p>
<ul>
<li><strong>通过 XPath 选择元素</strong>:</li>
</ul>
<p>你可以使用元素的 XPath 来选择元素,这允许基于 DOM 结构进行更灵活和精确的定位。</p>
<p><code>const elementByXPath = await page.$x('//div[@class="example"]');</code></p>
<ul>
<li><strong>评估 XPath 表达式</strong>:</li>
</ul>
<p>Playwright 可以解析 XPath 表达式并返回匹配的元素。$x 是 Playwright 为此目的提供的一种简写方法。</p>
<p><code>const elements = await page.$x('//button[contains(text(), "Submit")]');</code></p>
<ul>
<li><strong>在 XPath 中使用 Axes</strong>:</li>
</ul>
<p>XPath 的 Axes 方法可以用于以各种方式遍历 DOM,例如选择相对于当前节点的父元素、兄弟元素或子元素。</p>
<p><code>const siblingElement = await page.$x('//input[@id="username]/following-sibling::input');</code></p>
<ul>
<li><strong>带条件表达式的 XPath</strong>:</li>
</ul>
<p>XPath 选择器可以包含条件来匹配具有特定属性或文本内容的元素。</p>
<p><code>const elementWithCondition = await page.$x('//div[@data-status="active" and text()="Active"]');</code></p>
<ul>
<li><strong>选择 Shadow DOM 内的元素</strong>:</li>
</ul>
<p>虽然 XPath 本身不支持 Shadow DOM,但 Playwright 允许使用 CSS 和 XPath 选择器的组合来实现定位 shadow dom 中的元素。</p>
<p>另外请查看我们的比较: <a href="https://bugbug.io/blog/test-automation/xpath-vs-css-selectors/">XPath vs CSS 选择器</a></p>
<h2 id="playwright-zhong-de-text-xuan-ze-qi">Playwright 中的 text 选择器</h2>
<p>Playwright 中的<strong>text 选择器</strong>专注于根据可见文本内容定位元素。这些选择器非常适合定位包含特定文本节点的元素,或搜索具有精确内容的文本节点。</p>
<p>Playwright 中文本选择器的<strong>语法</strong>非常直观,允许你直接指定要匹配的文本,可以用单引号或双引号转义。这个功能在网页自动化脚本中特别有用,因为通过文本内容识别元素比使用属性或 XPath 更实用。</p>
<h2 id="zai-playwright-zhong-zu-he-xuan-ze-qi">在 Playwright 中组合选择器</h2>
<p>Playwright 还支持多个选择器的组合,这个功能增强了元素选择的精确度。通过将选择器链接在一起,你可以创建更具体的查询。这可能涉及组合 CSS 和 XPath 选择器,或使用同一类型的多个选择器并增加过滤条件来精确定位元素。</p>
<p>例如,你可以根据元素的布局和相对于其他元素的位置来选择元素,或者结合属性选择器和文本选择器来查找包含指定文本的元素。链式选择器解析满足链中所有条件的元素,组合的方式可以非常的灵活。</p>
<p><strong>定位器 API</strong> 在 Playwright 中简化了与网页元素交互的过程,提供了一种更稳定和强大的方式来查询和操作页面元素。这在动态页面应用中,以及需要复杂交互的场景中特别有用。</p>
<h2 id="playwright-zhong-de-gao-ji-xuan-ze-qi">Playwright 中的高级选择器</h2>
<p>除了 CSS 选择器和 XPath 选择器,Playwright 还支持一系列高级选择器,提供更大的灵活性。这些高级选择器包括 React 选择器、可访问性选择器、CSS 伪类和 XPath 函数。</p>
<p><strong>以下是 Playwright 中一些高级选择器的概述:</strong></p>
<ul>
<li><strong>React 选择器</strong>: 用于识别 React 应用程序中的元素。</li>
<li><strong>可访问性选择器</strong>: 用于根据元素的可访问性属性定位元素。</li>
<li><strong>CSS 伪类</strong>: 用于根据各种状态或条件选择元素。</li>
<li><strong>XPath 函数</strong>: 用于使用 XPath 函数执行复杂查询。</li>
</ul>
<p>Playwright 的高级选择器允许你微调元素选择并处理更复杂的场景。</p>
<h2 id="zai-playwright-zhong-shi-yong-xuan-ze-qi-de-zui-jia-shi-jian">在 Playwright 中使用选择器的最佳实践</h2>
<p>为了充分利用 Playwright 选择器,遵循最佳实践很重要。以下是一些需要记住的提示:</p>
<ul>
<li><strong>使用唯一标识符</strong>: 尽可能依赖唯一标识符(如 ID 或数据属性)来定位元素。</li>
<li><strong>避免不稳定的选择器</strong>: 应避免使用容易变化的选择器,比如基于位置关系的选择器。</li>
<li><strong>定期更新选择器</strong>: 定期检查并更新你的选择器,以适应网站结构的任何变化。</li>
</ul>
<p>通过遵循这些最佳实践,你可以确保自动化脚本的稳定性和可靠性。</p>
<h2 id="zai-playwright-zhong-shi-yong-xuan-ze-qi-jin-xing-zi-dong-hua">在 Playwright 中使用选择器进行自动化</h2>
<p>Playwright 选择器对于表单填写、网页爬虫和 ui 自动化测试等任务非常有价值。让我们探讨几个在 Playwright 中使用选择器进行自动化的例子:</p>
<h3 id="biao-dan-tian-xie">表单填写</h3>
<p>这个脚本演示了浏览器自动化的基本套路,特别是启动浏览器、跳转到页面和与网页元素交互。需要注意的是,这个脚本并没有导航到特定的 URL,所以如果你打算将它用于特定网站,你需要添加一行使用 <code>page.goto('被测网站 URL')</code> 来访问该网站。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">playwright</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">chromium</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">usernameInput </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">usernameInput</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">johndoe</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">passwordInput </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">passwordInput</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password123</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#6699cc;">close</span><span>();\
</span><span>})();
</span></code></pre>
<h3 id="wang-ye-pa-chong">网页爬虫</h3>
<p>下面的代码展示了如何使用 Playwright 的自动化功能提取和打印网页上所有链接 'a' 元素的文本内容。</p>
<p>脚本首先从 Playwright 导入 Chromium 模块,然后启动一个 Chromium 浏览器实例并打开一个新页面。它使用 <code>$$eval</code> 函数选择页面上的所有超链接元素,并将它们的文本内容映射到一个数组。然后遍历这个数组,将每个链接的文本内容打印到控制台。</p>
<p>最后,脚本关闭浏览器页面。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">chromium</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">links </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">$$eval</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">a</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">links</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#e9fdac;">links</span><span>.</span><span style="color:#8cdaff;">map</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">link</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">link</span><span>.</span><span style="color:#e9fdac;">textContent</span><span>)
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">linkText </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">links</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">linkText</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">close</span><span>();
</span><span>})();
</span></code></pre>
<h3 id="ui-zi-dong-hua-ce-shi">ui 自动化测试</h3>
<p>下面的代码是一个使用 Chromium 浏览器进行网页登录的 Playwright 脚本。</p>
<p>脚本首先导入 Playwright 模块并启动 Chromium 浏览器。然后它打开一个新的浏览器页面。</p>
<p>接下来,脚本通过各自的 ID <code>#username</code> 和 <code>#password</code> 定位页面上的用户名和密码输入字段,并用预定义的数据 'johndoe' 和 'password123' 填充它们。</p>
<p>填写登录信息后,脚本定位并点击登录按钮 <code>#loginButton</code>。然后它等待退出登录按钮 <code>#logoutButton</code> 出现,把这个当成是成功登录的断言。</p>
<p>最后,脚本关闭浏览器页面。这个自动化脚本是 Playwright 如何用于自动化网页应用登录程序的基本示例。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">chromium </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">playwright</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{\
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">browser </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">chromium</span><span>.</span><span style="color:#8cdaff;">launch</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">usernameInput </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">usernameInput</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">johndoe</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">passwordInput </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">passwordInput</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password123</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginButton </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#loginButton</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginButton</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">logoutButton </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">#logoutButton</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">logoutButton</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">close</span><span>();\
</span><span>})();
</span></code></pre>
<h2 id="zai-playwright-zhong-shi-yong-xuan-ze-qi-chu-li-shadow-dom">在 Playwright 中使用选择器处理 Shadow DOM</h2>
<p>Playwright 的 CSS 和文本引擎可以穿透 Shadow DOM,允许你与元素交互,就像 shadow dom 不存在一样。这种能力简化了在 Shadow DOM 内选择和操作元素的过程。</p>
<p>对于定位 Shadow DOM 中的元素,可以直接使用 Playwright 的标准定位器,如 <code>page.locator()</code>、<code>page.getByText()</code> 等。例如,如果你有一个带有 shadow root 的自定义 Web 组件,想要点击其中的特定元素,你可以使用 <code>page.getByText('Details').click()</code> 来定位文本为 'Details' 的元素。同样,要点击像 <code><x-details></code> 这样的自定义元素,你可以使用 <code>page.locator('x-details', { hasText: 'Details' }).click()</code>。</p>
<p>Playwright 还支持高级选择器策略,比如通过文本、子/后代元素过滤定位器,或使用布局伪类如 <code>:right-of()</code>、<code>:left-of()</code>、<code>:above()</code>、<code>:below()</code> 和 <code>:near()</code> 来根据元素相对于其他元素的布局定位元素。当元素缺乏明显的属性或文本内容时,这些伪类特别有用,允许你指定它们的相对位置以进行更精确的选择。</p>
<p>此外,Playwright 为 React 和 Vue 应用程序提供了专门的定位器,分别以 <code>_react</code> 和 <code>_vue</code> 前缀识别。这些定位器允许你根据组件名称和属性值查找元素,这在测试这些框架的现代 Web 应用程序时特别方便。</p>
<p>重要的是要注意,虽然 XPath 可以在 Playwright 中使用,但它不能穿 shadow root,并且通常不鼓励使用,我们还是要使用更稳定、对用户可见的定位器。</p>
<h2 id="jie-lun">结论</h2>
<p>Playwright 选择器是进行自动化网页测试、网页抓取和用户界面测试任务的强大工具。通过利用 CSS 选择器、XPath 选择器和文本选择器,你可以精确定位网页上的元素并与之交互。</p>
<p>通过遵循最佳实践并利用 Playwright 选择器的高级功能,你可以简化自动化脚本并提高其可靠性。今天就开始使用 Playwright 选择器,释放你的自动化工作的全部潜力。</p>
<p>记住要定期更新你的选择器,使用唯一标识符,并探索 Playwright 选择器引擎中的各种选项,以使你的自动化脚本更加高效和稳健。</p>
<p><strong>祝你(自动化)测试愉快!</strong></p>
<h2 id="chang-jian-wen-ti-jie-da-playwright-xuan-ze-qi-he-ding-wei-qi">常见问题解答: Playwright 选择器和定位器</h2>
<h3 id="playwright-zhi-chi-na-xie-xuan-ze-qi">Playwright 支持哪些选择器?</h3>
<p>Playwright 支持多种选择器来选择元素,以满足不同的 Web 自动化需求。这些包括:</p>
<ul>
<li>CSS 选择器: 根据 CSS 属性定位元素。Playwright 的 CSS 选择器工作方式类似于常规 CSS,但针对自动化进行了增强。</li>
<li>XPath 选择器: 适用于复杂的 DOM 结构,XPath 选择器可以根据元素的 XML 路径导航和查找元素。</li>
<li>文本选择器: 定位包含指定文本的元素,非常适合查找文本节点或具有精确文本内容的元素。</li>
<li>Playwright 特定选择器: 这包括像 data-test-id 这样的选择器,用于以 Playwright 框架特定的方式定位元素。</li>
<li>React 选择器: 为 React 应用程序设计的选择器,允许与 React 组件交互。</li>
<li>属性选择器: 这些选择器使用属性选择器操作符,可以根据属性匹配任何元素。</li>
<li>链式选择器: 组合多个选择器,如 CSS 和 XPath,以解决更复杂的选择场景。</li>
<li>布局选择器: 依赖元素的布局和相对位置,使用诸如边界客户矩形等进行计算。</li>
</ul>
<h3 id="ru-he-zai-playwright-zhong-xuan-ze-yuan-su">如何在 Playwright 中选择元素?</h3>
<p>在 Playwright 中选择元素通常涉及使用代表上述选择器之一的字符串。例如:</p>
<ul>
<li>CSS 选择器: <code>page.$('.className')</code> 根据类选择元素。</li>
<li>XPath 选择器: <code>page.$x('//div')</code> 使用 XPath 语法查找元素。</li>
<li>文本选择器: <code>page.$('text=Example')</code> 查找包含指定文本的元素。</li>
<li>组合选择器: 链接选择器如 <code>page.$('div.className > span')</code> 以定位特定元素内的元素。</li>
</ul>
<h3 id="shen-me-shi-playwright-ding-wei-qi-huo-xuan-ze-qi">什么是 Playwright 定位器或选择器?</h3>
<p>Playwright 定位器或选择器是用于在 Web 自动化脚本中选择元素的基于字符串的工具。选择器是 Playwright 识别要交互的元素的方式,无论是点击、读取内容还是输入数据。它们可以很简单,比如文本选择器,也可以很复杂,比如链接 CSS 和 XPath 的链式选择器。</p>
<h3 id="wo-men-ke-yi-zai-playwright-zhong-shi-yong-xpath-ma">我们可以在 Playwright 中使用 XPath 吗?</h3>
<p>是的,XPath 在 Playwright 框架中得到完全支持。它可以用于执行精确的元素选择,特别是在 CSS 选择器可能不够用的场景中。Playwright 中的 XPath 选择器可以使用各种 Axes、谓词和函数来导航 DOM,定位根据结构和内容(包括文本节点和属性)定位元素非常有用。例如,<code>page.$x('//button[@id="submit"]')</code> 将定位 ID 为 "submit" 的按钮。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://bugbug.io/blog/testing-frameworks/playwright-selectors/</p>
🎭Playwright: 如何正确使用 fixture 构建页面对象
2024-01-22T00:00:00+00:00
2024-01-22T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/
<p>本文适合测试自动化工程师或参与测试的开发人员阅读,特别是那些希望提升测试框架技能,使用页面对象模型来组织、维护测试并处理它们之间关系的人。对于已经在使用这种方法但想听听不同观点的工程师来说,本文也很有价值。</p>
<p>让我们来看一个简单的测试场景:</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./1.png" alt="图片1" /></p>
<p>首先,我们需要打开主页('https://www.saucedemo.com/')。页面打开后,我们对其进行验证。然后,我们需要获取适当的选择器来填写用户名和密码字段,并点击"登录"按钮。
但是,如果我们想添加新的测试用例,使用另一种类型的用户(比如管理员用户)来进行登录的话，我们至少需要复制一次代码。
更糟糕的是,如果前端应用中的定位器发生变化,比如从<strong>data-test="login-button"<strong>变成</strong>data-test="sign-in-button"</strong>,我们就需要检查所有使用这个定位器的测试场景并进行修复。这种错误的修正非常耗时。</p>
<p>这个问题的解决方案就是使用页面对象模型。
简单解释如下:</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./2.png" alt="图片2" /></p>
<p>网上有大量关于页面对象模型的文章、视频和教程。现在,我想分享我对如何正确构建页面的看法。</p>
<p>(如果你需要更多示例,请访问 > <a href="https://github.com/VadimNastoyashchy/playwright-saucedemo.com">https://github.com/VadimNastoyashchy/playwright-saucedemo.com</a>)</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./3.png" alt="图片3" /></p>
<p>👆test.js</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./4.png" alt="图片4" /></p>
<p>👆 登录页面</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./5.png" alt="图片5" /></p>
<p>👆 页面抽象</p>
<p>对于组件,我倾向于使用相同的粒度:</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./6.png" alt="图片6" /></p>
<p>👆header 组件</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./7.png" alt="图片7" /></p>
<p>组件抽象 👆</p>
<p>现在看起来好多了。但是,我们仍然需要在每个测试块中使用{ page }fixture 来初始化我们的页面:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Login with </span><span style="color:#fdb082;">\\</span><span style="color:#ffffff;">'</span><span style="color:#e9fdac;">standard</span><span>\\</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;"> user with set cookies</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">inventoryPage </span><span style="color:#ff5e5e;">= new </span><span>InventoryPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>});
</span></code></pre>
<p>接下来,我将给出类和方法的例子。让我们仔细看看 Fixtures!</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./8.png" alt="图片8" /></p>
<p>首先,我们需要创建一个文件。让我们命名为 FixtureConfig.ts
然后,我们需要定义页面的类型并覆盖项目的 fixture 配置:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">LoginPage </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pages/LoginPage</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">InventoryPage </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pages/InventoryPage</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">ApiService </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./ApiService</span><span style="color:#ffffff;">"</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">type </span><span>MyFixtures </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#e9fdac;">loginPage</span><span style="color:#ff5e5e;">: </span><span>LoginPage,
</span><span> </span><span style="color:#e9fdac;">inventoryPage</span><span style="color:#ff5e5e;">: </span><span>InventoryPage,
</span><span> </span><span style="color:#e9fdac;">apiService</span><span style="color:#ff5e5e;">: </span><span>ApiService,
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#e9fdac;">extend </span><span style="color:#ff5e5e;"><
</span><span> </span><span style="color:#e9fdac;">MyFixtures </span><span style="color:#ff5e5e;">>
</span><span> {
</span><span> loginPage: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">loginPage</span><span>);
</span><span> },
</span><span> inventoryPage: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">inventoryPage </span><span style="color:#ff5e5e;">= new </span><span>InventoryPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">inventoryPage</span><span>);
</span><span> },
</span><span> apiService: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiService </span><span style="color:#ff5e5e;">= new </span><span>ApiService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">apiService</span><span>);
</span><span> },
</span><span> };
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span></code></pre>
<p>最后,你需要在测试文件中更改导入语句
从:</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./9.png" alt="图片9" /></p>
<p>改为:</p>
<p><img src="https://playwright.itest.info/blog/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395/./10.png" alt="图片10" /></p>
<p>现在,你可以在测试中使用 Fixture,通过包含所有在 FixtureConfig.ts 文件中定义的页面的 fixture 对象:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Login and Logout test</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Login with </span><span style="color:#fdb082;">\\</span><span style="color:#ffffff;">'</span><span style="color:#e9fdac;">standard</span><span>\\</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;"> user</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">loginPage</span><span>, </span><span style="font-style:italic;color:#fc9354;">inventoryPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#6699cc;">open</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">getPageUrl</span><span>());
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">logInWithCredentials</span><span>(</span><span style="color:#e9fdac;">Credentials</span><span>.</span><span style="color:#8cdaff;">getUserCredentials</span><span>(</span><span style="color:#e9fdac;">AccountType</span><span>.</span><span style="color:#e9fdac;">Standard</span><span>));
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">inventoryPage</span><span>.</span><span style="color:#8cdaff;">getPageUrl</span><span>());
</span><span>});
</span></code></pre>
<p>文章中使用的资源:</p>
<p><a href="https://playwright.dev/docs/test-fixtures">https://playwright.dev/docs/test-fixtures</a></p>
<p><a href="https://github.com/VadimNastoyashchy/playwright-saucedemo.com">https://github.com/VadimNastoyashchy/playwright-saucedemo.com</a></p>
<h2 id="lai-yuan">来源</h2>
<p>来源 URL: https://medium.com/@vadym_nastoiashhyi/playwright-how-to-build-page-object-correctly-using-fixtures-ff0a8c05b395</p>
<p>发布时间: 2024-01-22T07:01:37.131Z</p>
Playwright 自定义缩进列表测试报告 📖
2024-01-08T00:00:00+00:00
2024-01-08T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/custom-playwright-indent-list-reporter/
<p>你是否曾想要让你的命令行界面更加 🌶️ 呢？好消息是，<a href="https://www.linkedin.com/in/syzanakajtazaj/">Syzana Bicaj</a>发布了一个 npm 包，不仅允许你自定义颜色，还可以在终端中缩进显示 spec 文件，便于阅读！</p>
<p><img src="https://playwrightsolutions.com/content/images/2024/01/image-2.png" alt="图片1" /></p>
<p>要使用默认设置安装该包，你需要在 Playwright 目录下运行以下命令：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> install indent-list-reporter</span><span style="font-style:italic;color:#fc9354;"> --save-dev
</span></code></pre>
<p>这将安装该库，之后你只需要在<code>playwright.config.ts</code>文件中更新<code>["indent-list-reporter"]</code>。我下面的例子使用了三元运算符，首先检查环境变量 CI 是否为 true 或 undefined/false。如果为 true，则运行带有"?"的顶行；如果为 false（从本地机器运行 playwright 命令），则使用"html"和"indent-list-reporter"报告。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span><APIRequestOptions </span><span style="color:#ff5e5e;">& </span><span>TestOptions>({
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#e9fdac;">reporter</span><span>: process.env.</span><span style="color:#e9fdac;">CI
</span><span> </span><span style="color:#ff5e5e;">? </span><span>[[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@currents/playwright</span><span style="color:#ffffff;">"</span><span>]]
</span><span> </span><span style="color:#ff5e5e;">: </span><span>[[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">indent-list-reporter</span><span style="color:#ffffff;">"</span><span>]],
</span><span>});
</span></code></pre>
<p>设置完成后，你可以运行测试，在测试运行完成后看到漂亮的结果。是的，这有一个缺点，原始的测试报告的好处: 是它会在每个测试完成时显示结果，而使用<code>indent-list-reporter</code>，除非用例全部执行完，否则你将无法看到测试结果（除非你同时保留自带的测试报告)。单独使用这个测试报告模版时，这是一个小小的权衡。</p>
<p>你还可以选择更改配色方案，在报告配置的数组中，你可以添加一个包含新基础颜色的对象。查看<a href="https://www.npmjs.com/package/indent-list-reporter">文档</a>了解提供的不同颜色。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span><APIRequestOptions </span><span style="color:#ff5e5e;">& </span><span>TestOptions>({
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#e9fdac;">reporter</span><span>: process.env.</span><span style="color:#e9fdac;">CI
</span><span> </span><span style="color:#ff5e5e;">? </span><span>[[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@currents/playwright</span><span style="color:#ffffff;">"</span><span>]]
</span><span> </span><span style="color:#ff5e5e;">: </span><span>[
</span><span> [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>],
</span><span> [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">indent-list-reporter</span><span style="color:#ffffff;">"</span><span>,
</span><span> {
</span><span> baseColors: {
</span><span> specFileNameColor: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">white</span><span style="color:#ffffff;">"</span><span>,
</span><span> suiteDescriptionColor: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">blue</span><span style="color:#ffffff;">"</span><span>,
</span><span> testCaseTitleColor: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">magenta</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> },
</span><span> ],
</span><span> ],
</span><span> </span><span style="color:#ff5e5e;">...
</span><span>});
</span></code></pre>
<p><img src="https://playwrightsolutions.com/content/images/2024/01/image-1.png" alt="图片2" /></p>
<p>npm 包可以在这里找到：<a href="https://www.npmjs.com/package/indent-list-reporter">indent-list-reporter</a></p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/custom-playwright-indent-list-reporter/</p>
<p>发布时间: 2024-01-08T13:30:14.000Z</p>
Playwright 使用技巧与诀窍 #2
2024-01-08T00:00:00+00:00
2024-01-08T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-tips-and-tricks-2/
<p>我之前写了一篇<a href="https://blog.martioli.com/playwright-tips-and-tricks-1/">关于使用技巧和诀窍的文章</a>,获得了很多好评。因此,我决定再写一篇。</p>
<h3 id="1-ru-he-zai-playwright-zhong-chu-li-ye-mian-wan-quan-jia-zai-hou-cai-chu-xian-de-yuan-su">1. 如何在 Playwright 中处理页面完全加载后才出现的元素</h3>
<p>有时候,即使 Playwright 等待页面完全加载,某些元素可能仍然在之后才出现在 DOM 中。这种情况下,我推荐以下几个技巧:</p>
<ul>
<li>方法一,等待网络空闲: <code>page.goto('https://playwright.dev/', {waitUntil: 'networkidle'})</code></li>
<li>方法二,等待元素达到特定状态。使用 <a href="https://playwright.dev/docs/api/class-locator?ref=blog.martioli.com#locator-wait-for">element.waitFor(state)</a>。默认值是"visible",但你可以更改为等待元素出现在 DOM 中,比如先执行 <code>const element = page.locator('#locator')</code>,然后 <code>await element.waitFor("attached")</code></li>
</ul>
<h3 id="2-zi-ding-yi-expect-xiao-xi">2. 自定义 expect 消息</h3>
<p>你知道吗?当断言失败时,你可以使用<a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#custom-expect-message">自定义的 expect 消息</a>: <code>await expect(locatorOrValue, '执行某操作失败').toBe()</code>。这在自定义方法或页面方法中特别有用,可以提供更详细的失败信息。</p>
<h3 id="3-ru-he-zai-playwright-zhong-duan-yan-shou-dao-liao-you-jian">3. 如何在 Playwright 中断言收到了邮件</h3>
<p>假设你有一个注册表单,提交后会发送一封带确认号/链接的邮件。由于邮件不会立即出现在收件箱,你可以使用 Playwright 的 <a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#expectpoll">expect.poll</a> 进行<a href="https://en.wikipedia.org/wiki/Polling_/(computer_science/)?ref=blog.martioli.com">轮询</a>。请看下面的注释,我会解释其工作原理。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">expect
</span><span> .</span><span style="color:#8cdaff;">poll</span><span>(
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">allEmails </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.email.com/allEmails</span><span style="color:#ffffff;">"
</span><span> );
</span><span> </span><span style="color:#6d6d6d;">// 在这里进行逻辑处理,例如搜索包含注册表单用户名/邮箱的邮件
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="color:#e9fdac;">email </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">allEmails</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">email</span><span>.</span><span style="color:#e9fdac;">to</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">registrationForm@email.com</span><span style="color:#ffffff;">"</span><span>))
</span><span> </span><span style="color:#6d6d6d;">// 找到邮件后,编写逻辑从邮件内容中提取链接/代码
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">emailCode</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">false</span><span>;
</span><span> },
</span><span> {
</span><span> </span><span style="color:#6d6d6d;">// 这部分是轮询配置,都是可选的
</span><span> </span><span style="color:#6d6d6d;">// 自定义错误消息,超时后触发
</span><span> message: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">未能在邮件中找到确认链接</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#6d6d6d;">// 探测, 等待1秒, 探测, 等待2秒, 探测, 等待10秒, 探测, 等待10秒, 探测
</span><span> </span><span style="color:#6d6d6d;">// ... 默认为 [100, 250, 500, 1000]
</span><span> intervals: [</span><span style="color:#fdb082;">1_000</span><span>, </span><span style="color:#fdb082;">2_000</span><span>, </span><span style="color:#fdb082;">10_000</span><span>],
</span><span> </span><span style="color:#6d6d6d;">// intervals 中的最后一个值会重复直到超时。超时后会抛出带有自定义消息的错误
</span><span> timeout: </span><span style="color:#fdb082;">60_000</span><span>,
</span><span> }
</span><span> )
</span><span> .</span><span style="color:#8cdaff;">toBeTruthy</span><span>();
</span></code></pre>
<p>请记住,每次未找到邮件时,expect 都会像循环一样继续执行。只有在 60 秒后仍未返回预期的真值时,才会失败。你可以轻松将 <code>toBeTruthy()</code> 更改为任何 <a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#non-retrying-assertions">jest expect</a> 类型的方法,以满足你的特定需求和返回逻辑。</p>
<h3 id="4-ru-he-rang-duan-yan-shi-bai-dan-bu-dao-zhi-ce-shi-shi-bai">4. 如何让断言失败但不导致测试失败?</h3>
<p>首先,可以看看<a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#soft-assertions">软断言</a>,这可能是你想要的。</p>
<p>或者,你可能在期望某个随机时间间隔出现的东西。Playwright 有一个 expect 方法可以重复执行多个断言,直到全部通过,它叫做 <a href="https://playwright.dev/docs/test-assertions?ref=blog.martioli.com#expecttopass">expect.toPass()</a>。只需将所有断言放在 expect.toPass() 内即可。这个方法的工作原理类似于上面解释的 expect.poll(),但这次我们可以在 expect 方法内执行一个或多个可能失败几次才成功的 expect()。条件是它们必须全部通过。因此,代码块会重复执行,直到满足条件(或超时)。这里有个例子:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">元素在 5 秒后出现</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://webdriveruniversity.com/Accordion/index.html</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">LOADING</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">COMPLETE.</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>({
</span><span> intervals: [</span><span style="color:#fdb082;">1_000</span><span>, </span><span style="color:#fdb082;">5_000</span><span>, </span><span style="color:#fdb082;">10_000</span><span>],
</span><span> timeout: </span><span style="color:#fdb082;">60_000</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<p>注意配置现在放在 toPass({}) 内</p>
<h3 id="5-ru-he-zai-playwright-zhong-lan-jie-wang-luo-diao-yong">5. 如何在 Playwright 中拦截网络调用?</h3>
<p>这里我们不讨论 <a href="https://playwright.dev/docs/api/class-page?ref=blog.martioli.com#page-route">page.route()</a></p>
<p>端到端测试有两种类型:<a href="https://smartbear.com/learn/automated-testing/how-to-perform-end-to-end-testing/?ref=blog.martioli.com#vertical-vs-horizontal-endtoend-testing">水平和垂直</a>。最常见的是水平测试,例如测试购买产品的流程。这是一个用户流程。较少人知道的是垂直测试,它测试 <code>用户操作 -> 前端(UI) -> 后端 -> 数据库</code> 或 <code>数据库 -> 后端 -> 前端 -> 用户所见</code>。</p>
<p>举个例子,假设点击按钮生成发票,值显示在你账户的 UI 层。前端可能对从后端接收的数据进行计算后显示值。如果显示的值不正确,谁该负责?前端开发人员会说是后端问题,后端开发人员会说是前端问题。听起来熟悉吗?要找到这种 bug,你可以这样做:</p>
<ul>
<li>对前端,对将在 UI 中显示的值进行断言</li>
<li>对后端,监听网络调用,在数据到达前端之前断言后端通过 API 发送的内容</li>
</ul>
<p>这将在两个层面上进行验证。那么,我们如何在 Playwright 中拦截调用呢?使用 <a href="https://playwright.dev/docs/api/class-page?ref=blog.martioli.com#page-wait-for-response">waitForResponse</a>。让我给你一段代码作为进一步说明:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 前面的双星号用于在多个环境中实现动态等待
</span><span style="color:#6d6d6d;">// 注意 waitForResponse 前面没有 await。它只是标记从何时开始监听该调用
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">invoiceCall </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForResponse</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/invoices/*</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Generate Invoice</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span style="color:#6d6d6d;">// 默认会等待该调用 30 秒
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">invoiceCall</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 现在将响应转为 json 以便轻松读取
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">responseAsJson </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">responseAsJson</span><span>.</span><span style="color:#e9fdac;">invoice</span><span>.value).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">355</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<blockquote>
<p>为什么要关心"从何时开始"这部分?这在你想拦截来自同一 api 接口 的多个调用时很有用。稍后会详细讨论。</p>
</blockquote>
<h3 id="6-ru-he-zai-playwright-zhong-xiang-zhuan-ye-ren-shi-yi-yang-diao-shi">6. 如何在 Playwright 中像专业人士一样调试?</h3>
<p>这个主题其实值得单独写一篇博文,<a href="https://blog.martioli.com/debugging-tests-with-playwright/">我在这里写过</a>。但我想指出一点,几乎每个人都忽略了 Playwright 自带的调试器,<a href="https://playwright.dev/docs/debug?ref=blog.martioli.com#playwright-inspector">叫做 inspector</a>,能提供比你想象的多得多的信息。让我告诉你我的意思。假设你有一行代码,你就是搞不明白为什么无法达到你想要的效果。你可以这样做,用 <code>npx playwright test path/to/yourTest.spec.js --debug</code> 启动测试,然后进入 inspector,打开你想了解更多的操作,你就会看到 Playwright 在后台执行的所有操作:</p>
<p><img src="https://playwright.itest.info/blog/playwright-tips-and-tricks-2/img/1730512502.104141inspector-under-the-hood.png" alt="Image 1" /></p>
<blockquote>
<p>小提示:我不是很喜欢这个 inspector,因为在目前的 v1.40 版本中,它有点 buggy。但有时它还是很有用的。</p>
</blockquote>
<h3 id="7-ru-he-zai-playwright-zhong-huo-qu-wen-ben-bing-cun-chu-zai-bian-liang-zhong-yi-gong-hou-xu-shi-yong">7. 如何在 Playwright 中获取文本并存储在变量中以供后续使用?</h3>
<p>Playwright 会建议你将元素传给 expect() 并使用其 toHaveText() 方法来断言元素是否包含某个文本,但有时你只需要从元素中获取文本并在之后的操作中重用它。这种情况通常发生在值不是固定的,而是动态生成的时候。你可以通过 <code>const elementText = await page.locator(locator).innerText()</code> 来实现。这会将元素文本作为字符串存储在 elementText 中,供后续使用。</p>
<blockquote>
<p>注意,innerText() 只会给你可见的文本。如果文本在 DOM 中但不可见,它不会返回那个值。要包括隐藏的文本,请使用 textContent()</p>
</blockquote>
<p>如果你觉得这些信息有用,请点赞。如果你想给我更多动力,<a href="https://ko-fi.com/adrianmaciuc?ref=blog.martioli.com">买杯咖啡</a>也是个不错的选择。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://blog.martioli.com/playwright-tips-and-tricks-2/</p>
<p>发布时间: 2024-01-08</p>
使用Playwright进行API契约测试
2023-12-25T00:00:00+00:00
2023-12-25T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/api-contract-testing-on-frontend-with-playwright-4509b74b3008/
<p>有时作为测试工程师,业务对测试的要求可能相当奇怪,你必须在一个测试套件中采用不同类型的测试。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*ZjhaucB1PZLN6UVIKR4A7Q.jpeg" alt="图片2: Midjourney提示" /></p>
<h2 id="shen-me-shi-qi-yue-ce-shi">什么是契约测试</h2>
<p>契约测试是一种软件测试类型,专注于验证单独组件/服务之间的交互(通常是两个微服务)。当两个微服务通过 API 交互时,一个服务以预定义的格式发送请求,另一个以预定义的格式响应。这种格式被称为"契约" - 服务(甚至开发团队)之间关于如何承诺相互通信的协议。</p>
<p>"契约"可以是 API 规范,但更常见的是仅仅是作为 JSON 文件的请求和响应体架构,这些文件在两个服务之间共享,它们都根据这些架构测试自己的 API - 这种方法甚至被区分为一种单独的测试方法"<a href="https://pactflow.io/blog/contract-testing-using-json-schemas-and-open-api-part-1/">基于架构的契约测试</a>"。</p>
<p>在客户端-服务器架构的情况下,前端可以作为各种 API 的消费者或提供者,反之亦然:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*2jB1pd0jqbgO9DqfPDRFww.png" alt="图片3: 前端应用作为契约测试的消费者或提供者" /></p>
<p>在许多文章中(参见文章末尾的链接),契约测试与集成测试或端到端测试相对立。但在本文中,我想展示<strong>契约测试可以是端到端测试的一部分</strong> - 它可以只是特定检查的工具。</p>
<p>这种情况可能发生在<strong>前端自动测试的特定业务需求</strong>的情况下,例如检查你的前端是否以特定格式向第三方 API 发出特定请求。换句话说,确保 UI 发送正确的数据。</p>
<p>此外,这些第三方 API<a href="https://medium.com/@adequatica/layers-of-defense-against-data-modification-d73e9e93bdf7">可能不允许在测试期间被请求</a>。这看起来显然需要用模拟来"关闭"这些第三方 API,但如果你的测试项目上没有任何复杂的模拟基础设施(和/或不想有)怎么办?如果你的<a href="https://adequatica.medium.com/pros-and-cons-of-the-ways-of-end-to-end-automated-testing-in-ci-9bec51e231cb#552a">测试在实时的模拟环境中运行</a>,可能就是这种情况。在这种情况下,你可以在<a href="https://playwright.dev/docs/network">网络级别通过 Playwright</a>来"关闭"对第三方 API 的请求。</p>
<blockquote>
<p>在互联网上找到类似的项目并不是问题。有很多 DeFi 初创公司使用开放 API 作为他们的基础设施,但这些 API 大多是 GraphQL 和 JSON-RPC - 这给示例增加了一点复杂性。描述它们与 REST API 的区别不是本文的主题。</p>
</blockquote>
<h2 id="zen-me-zuo-qi-yue-ce-shi">怎么做契约测试</h2>
<p>至少我找到了<a href="https://www.sushi.com/swap">Sushi</a>加密货币交换页面,其前端只向第三方 API 发出几个所需的 POST 请求(API 的 URL 与当前网站不同):</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*n66Kj3vIydqm_7FfG1Fe2Q.png" alt="图片4: 网站的前端向第三方API发出POST请求" /></p>
<p>同样的情况在图示表示中如下所示:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*DYYfRmMtf_T6Qsz2DFTYGw.png" alt="图片5: 网站的前端向第三方API发出POST请求" /></p>
<blockquote>
<p>让我提醒你,我关注第三方 API 是因为检查内部 API 不是本文的主题 - 你可以通过内部 API 测试和/或集成测试来检查你的内部 API。</p>
</blockquote>
<p>在契约测试中,假定每个组件/服务都是相互隔离的。在这里,你可以使用 Playwright 的网络功能轻松地将前端与第三方 API 隔离:</p>
<ol>
<li>粗略地<a href="https://playwright.dev/docs/network#abort-requests">中止请求</a> - 请求<strong>不会</strong>发送到外部 API;</li>
<li>或者<a href="https://playwright.dev/docs/mock#mock-api-requests">模拟它</a>。</li>
</ol>
<p>对于第二种情况,如果你只使用<a href="https://playwright.dev/docs/api/class-route#route-fulfill">fulfill()</a>类,你可以通过中止请求来修改响应。但如果你将<code>fulfill()</code>与<a href="https://playwright.dev/docs/api/class-route#route-fetch">fetch()</a>一起使用,请求将被发送到外部 API。无论哪种方式,<strong>当你用 JSON 填充响应体时 - 你就在进行契约测试</strong>(检查客户端是否正在处理填充的响应),如果这个 JSON 模式与外部 API 端用于测试的模式相同。</p>
<p>对于这两种情况,<strong>你通过</strong><a href="https://playwright.dev/docs/api/class-page#page-wait-for-request"><strong>waitForRequest()</strong></a><strong>类拦截请求,以测试 POST 的</strong><a href="https://playwright.dev/docs/api/class-request#request-post-data"><strong>请求体</strong></a><strong>是否符合你的契约</strong>(当然,对于 PUT 或 PATCH 方法也是如此):</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*MQiNBfNwaPX0LmbR8anUhw.png" alt="图片6: 通过Playwright拦截HTTP请求" /></p>
<p>如果你的请求体是 JSON 格式(我认为这种情况会占 90%),你可以立即使用<a href="https://playwright.dev/docs/api/class-request#request-post-data-json">postDataJSON()</a>类,通过你喜欢的工具比较 JSON 模式:<a href="https://ajv.js.org/json-schema.html">Ajv</a>, <a href="https://zod.dev/">Zod</a>,或者如果由于某些原因你决定直接比较两个 JSON 对象,可以使用<a href="https://playwright.dev/docs/api/class-genericassertions#generic-assertions-to-equal">toEqual()</a>断言。</p>
<p>当你只检查请求的契约时,你可能不需要响应,可以简单地中止它(注意,正确的行为取决于你的应用,也许你必须模拟响应以防止应用崩溃):</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*auBhQDfBeHiJFU1s_9HVFw.png" alt="图片7: route.abort()在Playwright Inspector中的工作原理" /></p>
<p>这里是这样一个测试的<a href="https://github.com/adequatica/ui-testing/blob/main/tests/sushi-swap-contract-testing.spec.ts">代码示例</a>:</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">type Page</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">z </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">zod</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 契约
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schema </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">object</span><span>({
</span><span> jsonrpc: </span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">string</span><span>(),
</span><span> id: </span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">number</span><span>(),
</span><span> method: </span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">string</span><span>(),
</span><span> params: </span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">array</span><span>(</span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">union</span><span>([</span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">string</span><span>(), </span><span style="color:#e9fdac;">z</span><span>.</span><span style="color:#8cdaff;">boolean</span><span>()])),
</span><span>});
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(
</span><span> </span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">+</span><span style="color:#fbe3bf;">lb</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">drpc</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">org</span><span style="color:#fdb082;">\/</span><span style="color:#fbe3bf;">ogrpc</span><span style="color:#fdb082;">\?</span><span style="color:#fbe3bf;">network=ethereum</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">+</span><span style="color:#ffffff;">/</span><span>,
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">request</span><span>().</span><span style="color:#8cdaff;">method</span><span>() </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#6699cc;">abort</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return</span><span>;
</span><span> }
</span><span> }
</span><span> );
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Open Sushi Swap</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 等待请求应该在.goto()方法之前,
</span><span> </span><span style="color:#6d6d6d;">// 因为所需的请求可能在页面完全加载之前完成。
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">requestPromise </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForRequest</span><span>(
</span><span> </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">request</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">url</span><span>().</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lb.drpc.org/ogrpc?network=ethereum</span><span style="color:#ffffff;">"</span><span>) </span><span style="color:#ff5e5e;">&&
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">method</span><span>() </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/swap</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">request </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">requestPromise</span><span>;
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(
</span><span> </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">schema</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">postDataJSON</span><span>()),
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Should have a request by the contract</span><span style="color:#ffffff;">"
</span><span> ).</span><span style="color:#e9fdac;">not</span><span>.</span><span style="color:#8cdaff;">toThrowError</span><span>();
</span><span>});
</span></code></pre>
<p>其中,</p>
<ul>
<li><code>const schema</code>是<a href="https://zod.dev/">Zod</a>格式的模式声明;</li>
<li>在<code>beforeAll</code>钩子中,所有匹配<code>https://lb.drpc.org/ogrpc?network=ethereum&dkey=Ak765fp4zUm6uVwKu4annC8M80dnCZkR7pAEsm6XXi_w</code>的 POST 请求都被阻止;</li>
<li><code>const requestPromise</code>接收匹配<code>https://lb.drpc.org/ogrpc?network=ethereum&dkey=Ak765fp4zUm6uVwKu4annC8M80dnCZkR7pAEsm6XXi_w</code>的第一个请求的数据;</li>
<li>在<code>expect()</code>断言中,参考模式与请求的数据进行解析。如果解析/验证过程没有失败,测试就通过 - <code>[toThrowError()](https://jestjs.io/docs/expect#tothrowerror)</code>。</li>
</ul>
<p>上面呈现的测试可能包含更多步骤和检查,因为契约检查可能只是端到端套件的一部分。</p>
<p>阅读更多关于契约测试的内容:</p>
<ul>
<li><a href="https://pactflow.io/blog/what-is-contract-testing/">什么是契约测试,为什么我应该尝试它</a>?</li>
<li><a href="https://pactflow.io/blog/contract-testing-vs-integration-testing/">契约测试 vs 集成测试</a>;</li>
<li><a href="https://testsigma.com/blog/api-contract-testing/">API 契约测试完全指南</a>;</li>
<li><a href="https://blog.postman.com/api-contract-testing-4-things-to-validate/">API 契约测试:4 个需要验证以满足期望的事项</a>;</li>
<li><a href="https://www.youtube.com/watch?v=RSl_JcWKE3M">契约测试:解锁 CI/CD 管道中 E2E 测试瓶颈的关键</a>。</li>
</ul>
<p>此外,理论上,相同的模拟方法可以应用于前端的所有 HTTP API 请求:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*3pflE2qXx7QlMt7b4A1enQ.png" alt="图片8: 模拟API" /></p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://adequatica.medium.com/api-contract-testing-on-frontend-with-playwright-4509b74b3008">来源</a></p>
<p>发布时间: 2023-12-25</p>
Playwright 会取代 Cypress 吗?
2023-12-18T00:00:00+00:00
2023-12-18T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-ask-me-anything-debrief-will-playwright-replace-cypress/
<p>上周我有幸参加了由 Ministry of Testing 主办的<a href="https://www.ministryoftesting.com/events/testing-ask-me-anything-on-playwright">Playwright 交流活动</a>。在一小时的活动中,我们收到了大量问题,我认为值得在几篇文章中深入探讨。</p>
<p>今天我计划简要介绍,并回答以下问题:</p>
<blockquote>
<p>Playwright 会取代 Cypress 吗?使用 Playwright 进行 Web 应用自动化测试时,最大的挑战是什么?</p>
</blockquote>
<h2 id="playwright-hui-qu-dai-cypress-ma">Playwright 会取代 Cypress 吗?</h2>
<p>不会的...</p>
<p>为什么呢?过去 5 年里,数以千计的团队已经在项目中采用了 Cypress 作为测试框架。对大多数团队和项目来说,为了获得微小的商业价值而将这些项目转换为 Playwright,成本上并不允许。更有可能的是,团队从切换框架中获得的价值主要是能够并行运行测试,这直接影响开发和质量团队,而不是增加实际的业务价值。在大多数组织中,这样的项目很难获得批准。</p>
<p>只要 Cypress 能提供价值和有用的反馈,我认为它就不会消失。社区已经建立了许多解决方案,包括通过使用<code>cy.task()</code>在 Cypress 测试中运行 Playwright/Selenium 的能力。</p>
<p><a href="https://eleks.com/blog/cypress-framework-playwright-selenium-injections/">增强 Cypress 框架</a></p>
<h2 id="hui-you-geng-duo-de-tuan-dui-zai-kai-shi-xin-xiang-mu-shi-hui-xuan-ze-shi-yong-playwright-ma">会有更多的团队在开始新项目时会选择使用 Playwright 吗?</h2>
<p>是的,我相信会的!Playwright 相对于 Cypress 的优势在于,它允许我按照自己的意愿在任何地方运行测试,使用任何自定义 reporter,这使得选择 使用 playwright 成了一个非常自然的决定。</p>
<p>对我来说,Cypress.io 还有很多未知因素。我们知道他们曾<a href="https://www.prnewswire.com/news-releases/cypressio-raises-40m-in-series-b-to-deliver-the-next-era-of-software-testing-301194275.html">募集 4000 万美元 B 轮融资</a>,我相信他们正在寻找建立可持续开展业务的方法(写这篇文章时,距离 B 轮融资已经过去 3 年了)。</p>
<p>虽然 Playwright 的亲爹是微软,仍有一些未知因素,微软的项目也是有可能被砍掉的。但当我看到他们为开发者社区构建和提供的工具时,<strong>我会把赌注押在微软身上</strong>。看看 TypeScript、VS Code、.Net Core 等,我对 Playwright 的未来并不太担心。</p>
<p>通常不会...</p>
<p>一般情况下除非工具或者框架进入生命周期的末期，我们通常不用担心它会被砍掉!但是，最近的例子是<a href="https://blog.testproject.io/2022/11/17/testproject-end-of-life-your-questions-answered/#:~:text=When%20and%20how%20does%20this,the%20platform%20will%20be%20revoked.">Test Project</a>。该团队宣布这个工具不维护了,并提供了将测试用例迁移到他们拥有的其他工具的方法。这个工具最初是一个用于 Web、移动和 API 测试的免费自动化测试平台。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/12/image-4.png" alt="图片3" /></p>
<h2 id="na-selenium-ni">那 Selenium 呢?</h2>
<p>我不能不提到老牌的 Selenium。实际上,我认为 Selenium 是一个很棒的项目。它不像 Playwright (TS/JS)和 Cypress.io 那样是一个测试框架,selenium 是一个允许你与 Web 浏览器交互的通用工具。如果你想把它用作测试框架,你需要自带测试框架。</p>
<p>有太多项目已经有了数百甚至上千个测试,出于和第一部分相同的原因,迁移 1000 个正在为组织带来价值的 UI 测试并没有业务价值,因此不应该被优先考虑。</p>
<h2 id="ni-de-ce-shi-shi-fou-ti-gong-jia-zhi">你的测试是否提供价值?</h2>
<p>我提到的一个重要问题是...你的测试是否为团队提供了价值?无论它们是用什么语言或框架编写的,重要的是它们是否有价值。</p>
<p>如果答案是否定的,那就放弃它们;如果答案是肯定的,那就想办法来维护它们,并继续让它们发光发热。</p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在<a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a>上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">为我买杯咖啡</a>。如果你想获得更多内容直接发送到你的邮箱,请在下方订阅,别忘了留下 ❤️ 表示支持。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/playwright-ask-me-anything-debrief-will-playwright-replace-cypress/</p>
<p>发布时间: 2023-12-18T13:30:09.000Z</p>
使用 Playwright 的feature map框架改进 UI测试用例的可观测性
2023-12-11T00:00:00+00:00
2023-12-11T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/tracking-automated-ui-testing-using-a-feature-map-with-playwright/
<p>几周前，<a href="https://www.linkedin.com/in/ben-f-44778426/">Ben Fellows</a> 创建了一个 <a href="https://www.linkedin.com/posts/ben-f-44778426_as-a-qa-service-provider-building-automation-activity-7130958531586916352-qygv">LinkedIn 帖子</a>，询问他在工作中经常遇到的问题的解决方案。</p>
<blockquote>
<p>作为构建自动化的 QA 服务提供商，我面临的一个挑战是让客户看到并参与测试计划。我尝试过 TestPad、TestRail、Sheets，甚至是像 Jira 这样更项目导向的方法。有一段时间，我只是使用 Playwright 报告，但遭到了反对。有没有人认为有一个很好的解决方案可以让非技术参与者查看自动化的实时测试套件？</p>
</blockquote>
<p>我回应了我的解决方案，利用 feature map(特性地图)来跟踪我的自动化进度。在本文中，我将演示如何将 <a href="https://www.npmjs.com/package/feature-map">feature-map</a> npm 包实现到 <a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com">playwright-practicesoftwaretesting.com</a> 仓库中。特性地图最初是作为一个 Excel 电子表格开始的，在那里我跟踪系统的各个区域和我们想要用自动化覆盖的场景。从那里，<a href="https://playwrightsolutions.com/author/sergei/">Sergei Gapanovich</a> 接受了这个想法，并编写了驱动 feature-map 包的代码。</p>
<h2 id="gai-shu-feature-map-bao">概述：feature-map 包</h2>
<p>feature-map 包是一个基本的库，它允许您创建一个包含网站内不同操作/特性的 yaml 文件，并添加一个 <code>true</code> 或 <code>false</code> 值以指示该特性是否有自动化覆盖。</p>
<p>这个工具的主要目的是创建一个通过 UI 可以在 web 应用程序中执行的所有不同操作的地图，并对其进行映射。基于此地图，我们可以指示是否有任何自动化覆盖来行使该功能，如果有，可以标记为 <code>true</code>。通过这种功能，我们可以跟踪我们正在测试的 UI 的整体测试覆盖率。我喜欢把它想象成一个测量棒。我们创建一个项目列表，然后我可以用它来衡量我或我的团队的测试覆盖率进度。</p>
<p>这个方法的好处是所有这些都可以通过 yaml 文件创建和维护，该文件也会提交到与您的测试代码相同的仓库中。因此，当您添加覆盖新操作的自动化覆盖时，您也可以更新 feature-map，并获得有关有多少特性有任何自动化覆盖的反馈。</p>
<p>你说的百分比是测试覆盖率百分比吗？嗯，某种程度上是。我知道有些人不喜欢讨论测试覆盖率或自动化覆盖率的百分比。当你真的思考它时，将这种未知的 <a href="https://www.workroom-productions.com/wicked-problems/">棘手问题</a> 的绝对百分比放在一起是非常困难的。所以当我思考和讨论百分比时，它是确定我们想要衡量的事物（网站中的操作），将它们添加到 yaml 中，并衡量是否有任何覆盖这些操作的覆盖率。我对这种“自动化覆盖”和跟踪方式感到满意，就像我们正在构建的测量棒一样。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/12/image-2.png" alt="Image 1" /></p>
<p>👆 复古测量 📏</p>
<p>一旦我们开始实现 feature-map 包，我们的输出将如下所示。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/12/image-1.png" alt="Image 2" /></p>
<h2 id="shi-xian-feature-map-bao">实现 feature-map 包</h2>
<p>现在进入有趣的部分，下面您可以找到 npm 包的链接，其中包含关于如何将其实现到您自己的仓库中的详细说明。</p>
<p><a href="https://www.npmjs.com/package/feature-map">feature-map</a> 是手动跟踪项目中特性自动化覆盖进度的工具。</p>
<p>我们的第一步是将该包安装到我们的项目中，为此，请从目录的根目录运行以下命令。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>npm install feature-map
</span></code></pre>
<p>下一步是在您的仓库中创建一个 yaml 文件，这将是我们的特性地图。我创建了一个名为 <code>featureMap.yml</code> 的文件，并开始构建我项目中的 UI 中发现的特性。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/login</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">sign in with google</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">email</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">password</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">login</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">register your account</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">forgot password</span><span>: </span><span style="color:#ff8942;">false
</span><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/forgot-password</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">email</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">set new password</span><span>: </span><span style="color:#ff8942;">false
</span><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/register</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">first name</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">last name</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">date of birth</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">address</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">postcode</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">city</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">state</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">country</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">phone rate</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">e-mail address</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">password</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">register button</span><span>: </span><span style="color:#ff8942;">false
</span><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/category/hand-tools</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">header</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">sidebar</span><span>:
</span><span> </span><span style="color:#ff5e5e;">sort</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">filters</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">by brand</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">product card</span><span>:
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">image zoom</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">title</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">price</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">pagination</span><span>:
</span><span> </span><span style="color:#ff5e5e;">previous</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">next</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">number</span><span>: </span><span style="color:#ff8942;">false
</span><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/product/{id}</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">header</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">product details</span><span>:
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">title</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">tags</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">price</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">quantity</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">add to cart</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">add to favorites</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">related products</span><span>:
</span><span> </span><span style="color:#ff5e5e;">image</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">title</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">more information</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">footer</span><span>: </span><span style="color:#ff8942;">false
</span></code></pre>
<p>我们还没有在特性地图上列出网站内的所有操作，这将是一个待办事项，我们将在构建测试指标时继续构建。</p>
<p>在我们深入了解 yaml 文件是什么以及每个部分代表什么之前，有两个关键术语需要理解，以便完全理解 yaml 文件。我们将在 yaml 文件中使用 <code>Collections</code>。集合可以是：</p>
<ul>
<li>序列（列表/数组）</li>
<li>映射（字典/散列）</li>
</ul>
<p>首先，每当您看到短划线 (<code>-</code>) 时，它用于表示列表项或元素。因此，在最高层次上，我们使用这些序列（列表）来组织我们文件中的页面。</p>
<p>映射可以被认为是 yaml 文件中的键值对。</p>
<ul>
<li><code>- page: "/auth/login"</code>：这行定义了一个新的 <strong>列表</strong>，URL 路径为 "/auth/login"。</li>
<li><code>features:</code> 这行开始一个与当前页面相关的 <strong>特性</strong> 列表。</li>
<li><code>sign in with google: false</code>：这行是一个 <strong>映射</strong> 示例，定义了一个名为 "sign in with google" 的特性/操作，并将其值设置为 <code>false</code>。</li>
</ul>
<p>这种结构的好处是，您可以在页面内映射每个特性，甚至在需要时深入到多个弹出窗口，以便跟踪覆盖情况，重要的是每个列表（序列）都以键值对（映射）结束。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#6d6d6d;"># 有效
</span><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/category/hand-tools</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">header</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">sidebar</span><span>:
</span><span> </span><span style="color:#ff5e5e;">sort</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">filters</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">by brand</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">product_popup</span><span>:
</span><span> </span><span style="color:#ff5e5e;">additional details</span><span>:
</span><span> </span><span style="color:#ff5e5e;">high resolution image</span><span>:
</span><span> </span><span style="color:#ff5e5e;">download button</span><span>: </span><span style="color:#ff8942;">true
</span><span>
</span><span style="color:#6d6d6d;"># 无效
</span><span>- </span><span style="color:#ff5e5e;">page</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/category/hand-tools</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">features</span><span>:
</span><span> </span><span style="color:#ff5e5e;">header</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">sidebar</span><span>:
</span><span> </span><span style="color:#ff5e5e;">sort</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">filters</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">by brand</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">product_popup</span><span>:
</span><span> </span><span style="color:#ff5e5e;">additional details</span><span>:
</span><span> </span><span style="color:#ff5e5e;">high resolution image</span><span>:
</span><span> </span><span style="color:#ff5e5e;">download button</span><span>: </span><span style="color:#6d6d6d;"># 注意这里没有列出键/值对
</span></code></pre>
<p>更多关于 yaml 文件格式的详细信息可以在下面找到！
<a href="https://www.freecodecamp.org/news/what-is-yaml-the-yml-file-format/#yaml">yaml 介绍</a>
接下来，我们将介绍如何与 Playwright 集成。</p>
<h2 id="yu-playwright-de-ji-cheng">与 Playwright 的集成</h2>
<p>在 yaml 文件中创建特性列表后，下一步是更新我们的测试计划，以确保我们有覆盖这些特性的自动化测试，并更新 feature-map。</p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com">playwright-practicesoftwaretesting.com</a> 仓库中有一个 <a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com/blob/main/tests/registration.ts">测试用例</a>，它覆盖了我们特性文件中的 <code>/auth/register</code> 页面，我们将确保更新我们的特性文件，并在项目中测试我们的 yaml 文件是否按预期工作。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">featureMap </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">feature-map</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">My feature test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Registration page - All fields and elements exist</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/register</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">yamlMap </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">featureMap</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/path/to/your/yaml/file</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[name="first name"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">John</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#e9fdac;">yamlMap</span><span>.</span><span style="color:#6699cc;">set</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/register</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">first name</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff8942;">true</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">input[name="last name"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Doe</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#e9fdac;">yamlMap</span><span>.</span><span style="color:#6699cc;">set</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/auth/register</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">last name</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff8942;">true</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Similarly for other fields
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Save updated map
</span><span> </span><span style="color:#e9fdac;">yamlMap</span><span>.</span><span style="color:#8cdaff;">save</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<p>我们添加了一些指令来更新 <code>featureMap.yml</code> 文件中各个字段的值。添加字段并填写它们的内容时，将相应的 yaml 项目值更新为 <code>true</code>。</p>
<p>重要的是要记住，我们在特性映射文件中指定的每个元素和特性都必须在我们的自动化测试中得到适当的验证和覆盖。</p>
<p>您可能需要根据项目和测试套件的需求调整路径。</p>
<p>这就是我们实现特性地图以更好地跟踪自动化进度的方法。通过这种方法，我们可以在项目中创建一个交互式和透明的自动化覆盖地图。</p>
<h2 id="jie-lun">结论</h2>
<p>这个简单的工具和方法可以在更大程度上与您的团队和利益相关者一起工作，确保他们参与并了解 UI 测试的覆盖情况。这不仅可以提高自动化测试的质量，还可以确保项目中的所有关键功能都被覆盖。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/tracking-automated-ui-testing-using-a-feature-map-with-playwright/">来源</a></p>
<p>发布时间: 2023-12-11</p>
Playwright 使用技巧与诀窍 #1
2023-12-07T00:00:00+00:00
2023-12-07T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-tips-and-tricks-1/
<p>当你使用一个框架工作时，你会开始遇到各种可以学习的情况。有些事情非常重要，但并不容易仅通过阅读文档或跟随教程就能发现。这些都是通过经验积累的。我想分享一些我最近关于 Playwright 学到的知识。</p>
<p>在下面的陈述中，我将谈论使用<code>page.locator()</code>作为定位器方法的占位符，但这并不意味着我建议只使用<code>locator()</code>。关于这个话题，我实际上推荐使用 Playwright 创建的内置定位器方法，主要是<code>getByTestId()</code>，如果你尝试了所有方法都不起作用，那么再使用<code>.locator()</code>。</p>
<hr />
<h3 id="1-ru-he-zai-zhi-you-fu-yuan-su-you-wei-yi-id-de-qing-kuang-xia-cha-zhao-zi-yuan-su">1. 如何在只有父元素有唯一 ID 的情况下查找子元素</h3>
<p>例如，如果你有 <code>uniqueIDParent > div1 > div2 > span</code>（其中 span 有你想要的"文本"），但有多个具有不同文本的子元素（spans），如果你给 Playwright 它的父元素、祖父元素或更高级的祖先，它将遍历所有子元素并提取所有文本。<code>expect(uniqueID).toHaveText("text you want")</code> 将起作用。同时，<code>page.getByTestId(uniqueIDParent).filter({ hasText: "text you want" })</code> 如果你只针对具有你想要文本的子元素，也能很好地工作。<a href="https://playwright.dev/docs/locators?ref=blog.martioli.com#filtering-locators">过滤</a>效果神奇。</p>
<hr />
<h3 id="2-wei-shen-me-you-shi-zai-playwright-zhong-hui-chu-xian-the-error-browser-has-been-closed-cuo-wu">2. 为什么有时在 Playwright 中会出现 the error browser has been closed 错误</h3>
<p>原因可能是你可能在某处忘记了<code>await</code>。Playwright 以异步方式工作，意味着它全是 Promise，但你需要你的测试步骤按顺序、从上到下运行并按该顺序执行操作。这是通过使用<code>await</code>关键字来解决 Promise 并保持步骤顺序，以避免竞争条件问题。有时 VS Code 会建议你不需要一些 await，请忽略它，你<strong>确实</strong>需要它们。</p>
<hr />
<h3 id="3-zi-dong-deng-dai">3. 自动等待</h3>
<p>以下是 Selenium 中一些典型的断言，在 playwright 里你不再需要这么做</p>
<ul>
<li>你不必在与元素交互之前断言元素可见。Playwright 将在交互前执行以下操作：</li>
</ul>
<blockquote>
<ul>
<li>检查元素是否可见</li>
<li>检查是否附加到 DOM</li>
<li>检查是否稳定，动画已完成</li>
</ul>
</blockquote>
<ul>
<li>当你打开页面或点击链接重定向到页面时，你不必断言页面已加载才能与元素交互，playwright 会先等待页面完全加载</li>
<li>当你等待元素出现或等待元素消失时，你不必编写显式等待。Playwright 有<a href="https://playwright.dev/docs/test-timeouts?ref=blog.martioli.com">内置超时</a>（你在 Selenium 中熟悉的显式等待），它将等待一个元素并在设定的时间间隔内尝试找到它（例如：默认情况下，<code>expect(locator).toBeVisible()</code>的等待时间是 5 秒）</li>
</ul>
<hr />
<h3 id="4-you-shi-hui-chu-xian-chao-shi-bu-qi-zuo-yong-de-fei-chang-te-shu-de-qing-kuang">4. 有时会出现超时不起作用的非常特殊的情况</h3>
<p>或者你就是无法弄清楚该怎么办，你还有最后一个选择，就是简单地使用<a href="https://playwright.dev/docs/next/api/class-frame?ref=blog.martioli.com#frame-wait-for-timeout">waitForTimeout()</a>等待固定的秒数。通常不建议这样做，但有时你就是别无选择。</p>
<hr />
<h3 id="5-ru-he-zai-playwright-zhong-duan-yan-zi-fu-chuan-shu-zu">5. 如何在 Playwright 中断言字符串数组？</h3>
<p><code>expect(locator).toHaveText(array)</code> - 它实际上可以接受一个数组，并且在底层会遍历它以断言项目存在。</p>
<hr />
<h3 id="6-ru-he-zai-playwright-zhong-chu-li-duo-ge-yuan-su">6. 如何在 Playwright 中处理多个元素？</h3>
<p>Playwright 定位器将使用相同的方法找到一个或多个具有相同特征的元素，取决于你提供的内容。如果你想处理多个元素（在 Selenium 中，你会使用<code>findElements</code>，它会返回一个元素数组），在 Playwright 中，如果你执行<code>page.locator(multipleElements)</code>，这将返回多个元素，但<strong>仅仅</strong>是 Playwright 在底层的多个元素，而不是为你返回（至少不是简单的对象数组）。你得到的只是一个单一的定位器（对象）。<strong>为什么会这样？<strong>因为你可能想找到一个单一元素并尝试点击它，所以当你执行操作时，如果属性属于多个元素，它不会让你点击多个元素，并且会抛出错误，建议你如何修复你的测试。但如果你</strong>真的</strong>想处理所有元素，怎么做？你必须在末尾添加<code>.all()</code>。示例：<code>page.locator(multipleElements).all()</code></p>
<hr />
<h3 id="7-ru-he-chu-li-jiao-da-de-wen-ben-kuai">7. 如何处理较大的文本块？</h3>
<p>有时你可能有多个具有文本的项目，如果你给 Playwright 所有项目的父元素，那么 Playwright 可以将这些文本提取为数组。你可以通过<code>page.locator(parentOfElementsWithText).allTextContents()</code>或<code>.allInnerTexts()</code>来实现。这种方法的缺点是不建议断言文本的精确匹配，主要是因为有时会获取换行符（/n）、逗号或额外空格，但它可以与<code>expect(locator).toContain()</code>一起使用。</p>
<hr />
<h3 id="8-ru-he-zai-playwright-zhong-duan-yan-yuan-su-bu-cun-zai">8. 如何在 Playwright 中断言元素不存在？</h3>
<p>你可以在 stackoverflow 上找到这个小技巧：<code>expect(locator).toHaveCount(0)</code>。这类似于 Selenium 的<code>findElements</code>，如果没有找到元素，它只返回一个空数组。这很好，因为它不会使测试失败。但是，我建议使用 Playwright 内置的<a href="https://playwright.dev/docs/next/test-assertions?ref=blog.martioli.com#negating-matchers">NOT 运算符</a>，这才是你实际应该使用的。示例：<code>locator(element).not.toBeVisible()</code>。作为一般实践，所有断言方法都可以与<strong>NOT</strong>一起使用。</p>
<hr />
<h3 id="9-ru-he-chu-li-jian-dan-shi-yong-getbytestid-bu-gou-de-qing-kuang">9. 如何处理简单使用 getByTestId()不够的情况？</h3>
<p>有各种场景，比如表格，你需要组合父元素和子 Web 元素以获取所需数据。因此，在转向<code>locator()</code>并构建超复杂的<code>css选择器</code>或<code>xpath</code>之前，考虑使用<a href="https://playwright.dev/docs/api/class-locator?ref=blog.martioli.com#locator-and">and 运算符</a>，例如<code>page.getByText(elem).and(page.getByText(elem))</code>，或者你可以这样做<code>page.getByTestId(elem).getByTestId(elem)</code>。另一个选择是使用<a href="https://playwright.dev/docs/next/locators?ref=blog.martioli.com#filtering-locators">过滤定位器</a>。过滤器也可以与<a href="https://playwright.dev/docs/next/locators?ref=blog.martioli.com#filter-by-not-having-text">NOT 运算符</a>混合使用。</p>
<hr />
<h3 id="10-shi-yong-yi-ge-fu-yuan-su-zhi-xing-duo-ge-cao-zuo">10. 使用一个父元素执行多个操作</h3>
<p>你可以将元素存储在<code>const element = page.locator()</code>中。注意，这是少数几种不需要在<code>page.locator()</code>前使用<code>await</code>的场景之一。你可以将其视为占位符。稍后在你的代码中，你可以执行<code>element.click()</code>或通过其子元素搜索<code>element.getByTestId(child)</code>。关于这个的<strong>酷</strong>特性是，每次调用元素时，它都会重新查询 DOM。</p>
<hr />
<h3 id="11-bu-yao-shi-yong-locator-huo-multiple">11. 不要使用$(locator)或$$(multiple)</h3>
<p>在 Playwright 中使用$或$$是<a href="https://playwright.dev/docs/api/class-elementhandle?ref=blog.martioli.com">元素句柄</a>，这是Playwright强烈不推荐的。主要原因是你可能遇到使用$只引用 DOM 先前版本中的元素的情况。你可能最终会看到众所周知的 Selenium 错误<code>StaleElementReferenceException</code>。</p>
<hr />
<h3 id="12-ru-guo-bi-xu-deng-dai-ying-yong-xiang-ying-bing-qie-xiang-ying-shi-jian-chao-guo-tong-chang-de-5-miao-zen-me-ban">12. 如果必须等待应用响应，并且响应时间超过通常的 5 秒怎么办？</h3>
<p>你可能会遇到这种情况，例如当你执行一个操作、点击、提交，并且获得响应需要更长的时间，可能会出现"旋转加载器"或类似情况。如果你知道会发生这种情况，你可以增加等待响应的超时时间，仅针对单个特定操作，例如<code>expect(locator).toBeVisible({ timeout: 20000 })</code>。通过在方法内传递超时时间，这将只覆盖该行代码的默认 Playwright 配置（希望你不再看到错误<code>error: timed out 5000ms waiting for expect(locator).tobevisible()</code>，并且你的测试将通过）。</p>
<hr />
<h3 id="13-wei-shen-me-you-shi-expect-mei-you-tong-chang-de-tohavetext-fang-fa">13. 为什么有时 expect 没有通常的 toHaveText()方法？</h3>
<p>但如果我尝试<code>toBe()</code>，它就有效了。这取决于你给<code>expect()</code>的对象。如果你给它一个标准定位器，它将具有所有<a href="https://playwright.dev/docs/best-practices?ref=blog.martioli.com#use-web-first-assertions">Web 优先断言</a>，但如果你给它一个修改后的对象，类似于<code>page.locator(elementWithText).innerText()</code>，由于<code>innerText()</code>方法，这不再是标准的 Playwright 对象，而对于其他对象，它使用<a href="https://jestjs.io/docs/expect?ref=blog.martioli.com">jest expect 方法</a>。Playwright 的 expect 对象将检测你给它的对象类型，并将使用 jest expect 的<code>toBe()</code>或 Playwright 方法的<code>toHaveText()</code>。只需记住 Playwright 方法有自动等待重试，而 jest 方法没有。</p>
<hr />
<h3 id="14-web-yuan-su-shang-de-duo-ge-shu-ju-ce-shi-id-shu-xing">14. Web 元素上的多个数据测试 ID 属性</h3>
<p>我们可以在 Playwright 中配置使用自定义测试 ID 属性。使用<code>getByTestId()</code>方法时，Playwright 默认为<code>data-testid="selector"</code>，因此如果你的 Web 应用程序有不同的默认 ID 定位器，你必须首先<a href="https://playwright.dev/docs/api/class-testoptions?ref=blog.martioli.com#test-options-test-id-attribute">设置 testIdAttribute</a>。这包括如果你的网站在<code>id="selector"</code>格式下有唯一 ID。但是<strong>你能配置使用多个测试 ID 属性吗</strong>？答案是<strong>不</strong>。不过，有一个小技巧。你可以在一般配置中使用不同的<code>testIdAttribute</code>，并在项目中使用不同的属性。或者你可以有具有不同 ID 的不同项目。当你有两个团队或团队组，他们开发了使用一种类型唯一 ID 的应用程序，另一个使用不同的唯一 ID 时，这很有用。这可能是从旧版应用程序迁移的情况。下面是一个示例：</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span> projects: [
</span><span> {
</span><span> name: "new-mega-awesome-app",
</span><span> testDir: "./tests",
</span><span> use: {
</span><span> ...devices["Desktop Chrome"],
</span><span> testIdAttribute: "id",
</span><span> baseURL: "https://newapp.domain.com",
</span><span> },
</span><span> },
</span><span> {
</span><span> name: "legacy-app",
</span><span> testDir: "./tests-for-legacy-app",
</span><span> use: {
</span><span> ...devices["Desktop Chrome"],
</span><span> testIdAttribute: "data-testid",
</span><span> baseURL: "https://legacyapp.domain.com",
</span><span> },
</span><span> },
</span><span> ],
</span></code></pre>
<p>如果你觉得这很有用，请点赞。或者如果你想更多地激励我，甚至可以<a href="https://ko-fi.com/adrianmaciuc?ref=blog.martioli.com">请我喝咖啡</a>。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://blog.martioli.com/playwright-tips-and-tricks-1/">https://blog.martioli.com/playwright-tips-and-tricks-1/</a></p>
The Definitive Guide to API Test Automation With Playwright: Part 16 - Adding CI/CD Through GitHub Actions
2023-11-27T00:00:00+00:00
2023-11-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-16-adding-ci-cd-through-github-actions/
<p>This is the final planned article of this series, where we will discuss Adding CI/CD through GitHub Actions. In this guide I'll walk through the basics of GitHub Actions along with ways you can scale your tests as the suite grows.</p>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub - playwrightsolutions/playwright-api-test-demo</a></p>
<p>For this guide I'm using <a href="https://docs.github.com/en/actions">GitHub Actions</a>. You can think of GitHub Actions yml files which I'll provide below as your instructions on what code you want to run in the cloud, via <a href="https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners/about-github-hosted-runners">GitHub hosted runners</a>. I'll use GHA in place of GitHub Actions going forward. With each example there are 4 primary areas that are needed for a GHA yml file, which include:</p>
<ul>
<li><strong>name</strong> - Name of the GHA that shows up in the web portal.</li>
<li><strong>on</strong> - How and when to run the GHA.</li>
<li><strong>permissions (optional)</strong> - What permissions should the hosted runners run with.</li>
<li><strong>jobs</strong> - What software/libraries and commands will be run.</li>
</ul>
<p>I'll be walking through the two different GHA workflows I have built for this project. The first will run the full suite daily and on demand while the other one will run a subset of tests that changed from a pull request. What this article won't cover is:</p>
<ol>
<li>How to <a href="https://playwrightsolutions.com/in-playwright-test-is-there-an-easy-way-to-loop-the-test-multiple-times-to-check-for-flakiness/">run your tests multiple times to check for flakiness</a>. this can easily be implemented in the on pull request job by adding <code>repeat-each=5</code> within the npx playwright command.</li>
<li>How to make a <a href="https://playwrightsolutions.com/how-do-i-trigger-playwright-tests-to-run-across-repositories-using-github-actions/">GHA from another repository trigger the Playwright Tests to run on this repo.</a> I've written about this in the past, and it's worth looking into if that is a problem you are trying to solve. This is very useful if you have your automation code in a separate repository than the web application code your testing against.</li>
</ol>
<p>Now on with the show!</p>
<h2 id="full-suite-daily-runs">Full Suite Daily Runs</h2>
<p>This first action is really the bread and butter of our CI (Continuous Integration) Pipeline. It will run once a day (early in the morning) to give us constant feedback as changes happen throughout the day. I like the early AM run time as I wake up to the results of the entire test suite, and can plan my morning accordingly.</p>
<p>Below I'll walk through the different sections of the GHA yml file, below you can see the entire workflow file.</p>
<p>The first sections include the <strong>name</strong>, <strong>on</strong>, and <strong>permissions</strong> blocks.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Daily Playwright API Checks
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">schedule</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">cron</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">0 6 * * *</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">workflow_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">inputs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">base_url</span><span>:
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">URL, to run tests against</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">required</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">default</span><span>: </span><span style="color:#fbe3bf;">https://automationintesting.online/
</span><span style="color:#ff5e5e;">permissions</span><span>:
</span><span> </span><span style="color:#ff5e5e;">contents</span><span>: </span><span style="color:#fbe3bf;">write
</span><span> </span><span style="color:#ff5e5e;">pages</span><span>: </span><span style="color:#fbe3bf;">write
</span><span> </span><span style="color:#ff5e5e;">id-token</span><span>: </span><span style="color:#fbe3bf;">write
</span></code></pre>
<p>The <strong>on</strong> section includes a ton of options that can be used in initiating the job. The <a href="https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows">docs</a> show off 35 different ways to trigger a GHA as I'm writing this, I'm sure there will be more added as GHA is still a relatively new tool, as it's only bee in the wild for 5 years.</p>
<p>In my on section I have a <strong>schedule</strong> section which will run the job via <a href="https://crontab.guru/#0_6_*_*_*">cron</a>, every morning at 6:00 AM. I also have a <strong>workflow_dispatch</strong> section with some inputs. This allows me to <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/actions/workflows/daily-full.yml">run my job</a> adhoc and pass in a different base_url if needed.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/11/image-5.png" alt="Image 3" /></p>
<p>The permission section is necessary as I want to publish my artifacts to GitHub Pages so I can view my latest run's trace file for better debugging.</p>
<p>The next section focuses on <strong>jobs.</strong> The first entry is the name of the job that will be run, where I also setup environment variables for the entire suite if needed. The specific environment settings were for the GHA pages step. I also have a hard timeout-minutes of 10. This will ensure that if the job is for some reason running longer than 10 minutes to time it out. I am also running this on ubuntu-latest Operating System. The final section is an <code>env</code> variable where I am setting BASE_URL to the input <code>base_url</code> for workflow_dispatch runs, where I specify a different URL to run against.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">playwright-automation-checks</span><span>:
</span><span> </span><span style="color:#ff5e5e;">environment</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">github-pages
</span><span> </span><span style="color:#ff5e5e;">url</span><span>: </span><span style="color:#fbe3bf;">${{ steps.deployment.outputs.page_url }}
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">10
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span>
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">BASE_URL</span><span>: </span><span style="color:#fbe3bf;">${{ github.event.inputs.base_url }}
</span></code></pre>
<p>The rest of the GHA file is all about the <code>[steps](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions#jobs)</code> that are run as apart of the job.</p>
<blockquote>
<p>A job is a set of <em>steps</em> in a workflow that is executed on the same runner. Each step is either a shell script that will be executed, or an <em>action</em> that will be run. Steps are executed in order and are dependent on each other. Since each step is executed on the same runner, you can share data from one step to another. For example, you can have a step that builds your application followed by a step that tests the application that was built.</p>
</blockquote>
<p>What's nice about steps is they are run in order, and are dependent on each other, so you can think of the steps as a list of what you want to accomplish.</p>
<h3 id="checkout-code-and-setup-environment">Checkout Code and Setup Environment</h3>
<ul>
<li>Checking Out Code using <a href="https://github.com/actions/checkout">actions/checkout@v3</a></li>
<li>Installing Node using <a href="https://github.com/actions/setup-node">actions/setup-node@v3</a></li>
<li>Installing Node Dependencies and Caching OR Restoring Them From Cache using <a href="https://github.com/actions/cache">actions/cache@v3</a></li>
<li>Installing Playwright and Caching OR Restoring From Cache using <a href="https://github.com/actions/cache">actions/cache@v3</a></li>
</ul>
<p>Each of the setups in this section use a pre-made action that cane be found on the <a href="https://github.com/marketplace?type=actions">GitHub Marketplace</a>. Each of these have their own readme on how to use them in their respective repos linked above.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">fetch-depth</span><span>: </span><span style="color:#fdb082;">0
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">16
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache node_modules
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">node-modules-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> node_modules
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">modules-${{ hashFiles('package-lock.json') }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci --ignore-scripts
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.node-modules-cache.outputs.cache-hit != 'true'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Get installed Playwright version
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-version
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache playwright binaries
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> ~/.cache/ms-playwright
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span></code></pre>
<p>One quick note if you use Webkit/Safari for testing, you may run into issues, I would recommend not caching playwright if this is the case.</p>
<h3 id="running-tests">Running Tests</h3>
<p>For the next set of steps I am only including a <code>name</code> and <code>run</code> with the associated command that I want to run. The GHA runner has node installed and has playwright and the project dependencies installed already so we are good to just run the same commands you would from your local machine.</p>
<ul>
<li>Run linter</li>
<li>Run prettier</li>
<li>Run unit tests</li>
</ul>
<p>When setting the BASE_URL environment, I am actually first checking if the <code>env.BASE_URL == null</code> then set it with a value. If there is any other value, this set doesn't get executed.</p>
<ul>
<li>Set BASE_URL if null</li>
</ul>
<p>This section I am setting up <code>env</code> variables that re needed for this step, along with a multi-line command. The first is just echoing the github event name (more for debugging purposes, it's not needed for the job to suceed) and the 2nd is the <code>npm run test</code> command which will run our tests with the following command (this is found in the package.json file in the <code>scripts</code> section.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/11/image-6.png" alt="Image 4" /></p>
<ul>
<li>Setup Environment Variables for <a href="https://currents.dev/playwright?utm_source=pw_solutions_cicd">Currents.Dev</a> (I'm cooking up an article for this service!)</li>
<li>Run Playwright tests</li>
</ul>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run lint
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run lint
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run prettier
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run prettier
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run UnitTests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run ut
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set BASE_URL if not passed in
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">env.BASE_URL == null
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "BASE_URL=https://automationintesting.online/" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">CURRENTS_PROJECT_ID</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.CURRENTS_PROJECT_ID }}
</span><span> </span><span style="color:#ff5e5e;">CURRENTS_RECORD_KEY</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.CURRENTS_RECORD_KEY }}
</span><span> </span><span style="color:#ff5e5e;">CURRENTS_CI_BUILD_ID</span><span>: </span><span style="color:#fbe3bf;">reporter-${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt }}
</span><span> </span><span style="color:#ff5e5e;">URL</span><span>: </span><span style="color:#fbe3bf;">${{ env.BASE_URL}}
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "The github event is: ${{ github.event_name }}"
</span><span style="color:#fbe3bf;"> npm run test
</span></code></pre>
<h3 id="publishing-results">Publishing Results</h3>
<ul>
<li>Setup GH Pages using <a href="https://github.com/actions/configure-pages">actions/configure-pages@v3</a></li>
<li>Upload GHA Artifact <code>playwright-report</code> using <a href="https://github.com/actions/upload-artifact">actions/upload-artifact@v3</a></li>
<li>Upload Pages Artifact using <a href="https://github.com/actions/upload-pages-artifact">actions/upload-pages-artifact@v1</a></li>
<li>Deploy to Pages using <a href="https://github.com/actions/deploy-pages">action/deploy-pages@v2</a></li>
</ul>
<p>Each of these sections are using the <code>use</code> functionality that leverage pre-built steps. 3 of the 4 steps above are all about configuring, uploading, and deploying the Playwright Report to GitHub Pages, while the 2nd setp Upload GHA Artifact will zip and upload the <code>playwright-report</code> and attach it to the GHA run. An example of this can be found on this <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/actions/runs/6923995256">test run</a>. The bottom section has Artifacts that you are able to download assuming they haven't expired. This will include the html test report along with trace files and any assets (videos, images) that were captured as a part of the test run.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/11/image-7.png" alt="Image 5" /></p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#6d6d6d;"># The following steps are for deploying the report to GitHub Pages
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Setup Pages
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/configure-pages@v3
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v3
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">report-artifact
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report/
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">3
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload Pages Artifact
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-pages-artifact@v1
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-report/</span><span style="color:#ffffff;">"
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Deploy to GitHub Pages
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">deployment
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/deploy-pages@v2
</span></code></pre>
<h3 id="the-full-gha-workflow-file">The Full GHA workflow file</h3>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#fbe3bf;">//.github/workflows/daily-full.yml
</span><span>
</span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Daily Playwright API Checks
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">schedule</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">cron</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">0 6 * * *</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">workflow_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">inputs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">base_url</span><span>:
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">URL, to run tests against</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">required</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">default</span><span>: </span><span style="color:#fbe3bf;">https://automationintesting.online/
</span><span style="color:#ff5e5e;">permissions</span><span>:
</span><span> </span><span style="color:#ff5e5e;">contents</span><span>: </span><span style="color:#fbe3bf;">write
</span><span> </span><span style="color:#ff5e5e;">pages</span><span>: </span><span style="color:#fbe3bf;">write
</span><span> </span><span style="color:#ff5e5e;">id-token</span><span>: </span><span style="color:#fbe3bf;">write
</span><span>
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">playwright-automation-checks</span><span>:
</span><span> </span><span style="color:#ff5e5e;">environment</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">github-pages
</span><span> </span><span style="color:#ff5e5e;">url</span><span>: </span><span style="color:#fbe3bf;">${{ steps.deployment.outputs.page_url }}
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">10
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span>
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">BASE_URL</span><span>: </span><span style="color:#fbe3bf;">${{ github.event.inputs.base_url }}
</span><span>
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">fetch-depth</span><span>: </span><span style="color:#fdb082;">0
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">16
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache node_modules
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">node-modules-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> node_modules
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">modules-${{ hashFiles('package-lock.json') }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci --ignore-scripts
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.node-modules-cache.outputs.cache-hit != 'true'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Get installed Playwright version
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-version
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache playwright binaries
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> ~/.cache/ms-playwright
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run lint
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run lint
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run prettier
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run prettier
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run UnitTests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run ut
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set BASE_URL if not passed in
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">env.BASE_URL == null
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "BASE_URL=https://automationintesting.online/" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">CURRENTS_PROJECT_ID</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.CURRENTS_PROJECT_ID }}
</span><span> </span><span style="color:#ff5e5e;">CURRENTS_RECORD_KEY</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.CURRENTS_RECORD_KEY }}
</span><span> </span><span style="color:#ff5e5e;">CURRENTS_CI_BUILD_ID</span><span>: </span><span style="color:#fbe3bf;">reporter-${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt }}
</span><span> </span><span style="color:#ff5e5e;">URL</span><span>: </span><span style="color:#fbe3bf;">${{ env.BASE_URL}}
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "The github event is: ${{ github.event_name }}"
</span><span style="color:#fbe3bf;"> npm run test
</span><span style="color:#fbe3bf;">
</span><span> </span><span style="color:#6d6d6d;"># The following steps are for deploying the report to GitHub Pages
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Setup Pages
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/configure-pages@v3
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v3
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">report-artifact
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report/
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">3
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Upload Pages Artifact
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-pages-artifact@v1
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span>
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-report/</span><span style="color:#ffffff;">"
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Deploy to GitHub Pages
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">deployment
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/deploy-pages@v2
</span></code></pre>
<h2 id="changed-files-only-on-pull-requests-runs">Changed Files Only on Pull Requests Runs</h2>
<p>Below is my GHA workflow that I run on pull requests that occure against the main branch. I'll walk through the differences below.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#fbe3bf;">// .github/workflows/on-pr.files-changed.yml
</span><span>
</span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Changed Files Playwright API Checks
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">main
</span><span style="color:#ff5e5e;">permissions</span><span>:
</span><span> </span><span style="color:#ff5e5e;">contents</span><span>: </span><span style="color:#fbe3bf;">write
</span><span> </span><span style="color:#ff5e5e;">pages</span><span>: </span><span style="color:#fbe3bf;">write
</span><span> </span><span style="color:#ff5e5e;">id-token</span><span>: </span><span style="color:#fbe3bf;">write
</span><span>
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">playwright-automation-checks</span><span>:
</span><span> </span><span style="color:#ff5e5e;">environment</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">github-pages
</span><span> </span><span style="color:#ff5e5e;">url</span><span>: </span><span style="color:#fbe3bf;">${{ steps.deployment.outputs.page_url }}
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">10
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span>
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">BASE_URL</span><span>: </span><span style="color:#fbe3bf;">${{ github.event.inputs.base_url }}
</span><span> </span><span style="color:#ff5e5e;">CHANGED</span><span>: </span><span style="color:#ffffff;">""
</span><span>
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">fetch-depth</span><span>: </span><span style="color:#fdb082;">0
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">16
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache node_modules
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">node-modules-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> node_modules
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">modules-${{ hashFiles('package-lock.json') }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci --ignore-scripts
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.node-modules-cache.outputs.cache-hit != 'true'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Get installed Playwright version
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-version
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache playwright binaries
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> ~/.cache/ms-playwright
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run lint
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run lint
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run prettier
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run prettier
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run UnitTests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run ut
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set BASE_URL if not passed in
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">env.BASE_URL == null
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "BASE_URL=https://automationintesting.online/" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Create Test List if pull_request
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">github.event.pull_request
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "Creating a list of tests that have changed"
</span><span style="color:#fbe3bf;"> FILES=$(git diff --name-only ${{ github.event.pull_request.base.sha }}..${{ github.event.pull_request.head.sha }} | grep ".spec.ts" | tr '\n' ' ')
</span><span style="color:#fbe3bf;"> echo "CHANGED=$FILES" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "CHANGED = ${{ env.CHANGED }}"
</span><span style="color:#fbe3bf;"> echo "The github event is: ${{ github.event_name }}"
</span><span style="color:#fbe3bf;"> URL=${{ env.BASE_URL}} npx playwright test --reporter=github --workers=1 ${{ env.CHANGED }}
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v3
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">report-artifact
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">playwright-report/
</span><span> </span><span style="color:#ff5e5e;">retention-days</span><span>: </span><span style="color:#fdb082;">3
</span></code></pre>
<p>The biggest difference is we won't plan on running all the playwright tests whenever there is a pull request, but only attempt to run files that were changed or added as a part of the pull request. Below are the big differences.</p>
<ul>
<li>Create a List of Tests That Have Been Added or Changed</li>
</ul>
<p>This section utilizes a bash script in the <code>run</code> section to set variable FILES= to the difference between git shas where the filename ends in <code>.spec.ts</code> using <code>grep</code> and then replacing <code>\n</code> which is a new line (enter) with just a <code>' '</code> space. I then export the FILES variable to <code>CHANGED</code> env variable.</p>
<ul>
<li>Run the Playwright Tests That Were Changed</li>
</ul>
<p>Now that we have a list of files that have changed we can then pass those in at the end of the <code>npx playwright test</code> script.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Create Test List if pull_request
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">github.event.pull_request
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "Creating a list of tests that have changed"
</span><span style="color:#fbe3bf;"> FILES=$(git diff --name-only ${{ github.event.pull_request.base.sha }}..${{ github.event.pull_request.head.sha }} | grep ".spec.ts" | tr '\n' ' ')
</span><span style="color:#fbe3bf;"> echo "CHANGED=$FILES" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright Tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "CHANGED = ${{ env.CHANGED }}"
</span><span style="color:#fbe3bf;"> echo "The github event is: ${{ github.event_name }}"
</span><span style="color:#fbe3bf;"> URL=${{ env.BASE_URL}} npx playwright test --reporter=github --workers=1 ${{ env.CHANGED }}
</span></code></pre>
<p>This is an example of what the output for the <code>Run Playwright Tests</code> section looks like within GHA (the blue are the commands that were executed).</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/11/image-8.png" alt="Image 6" /></p>
<p>You can see that the different test file names were saved properly into the env variable. The pro to this is you get faster feedback when you are updating your tests. The con is if you make a change to a non-spec file the <code>env.CHANGED</code> variable will be empty and your whole test suite will run (which may be ok in the end).</p>
<h2 id="wrapping-up">Wrapping up</h2>
<p>GitHub Actions is a great tool that is already integrated with GitHub in order to run your Playwright Tests, and the cost of GHA minutes is relatively inexpensive for most folks needs. This is one of the first things I spend effort on when building out my automated checks to ensure I get constant feedback either after pull requests or at least daily.</p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-16-adding-ci-cd-through-github-actions/</p>
<p>Published Time: 2023-11-27T13:30:36.000Z</p>
三大自动化测试工具 playwright/selenium/cypress 的终极对比
2023-11-21T00:00:00+00:00
2023-11-21T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/deciding-among-the-titans-of-test-automation-a-playwright-vs-selenium-vs-cypress-showdown-e5f26ef9e08f/
<p>作者：Franco Kleinerman</p>
<p><img src="https://playwright.itest.info/blog/deciding-among-the-titans-of-test-automation-a-playwright-vs-selenium-vs-cypress-showdown-e5f26ef9e08f/./cy_vs_se.png" alt="图片3" /></p>
<p>在不断发展的软件开发领域，自动化测试已成为确保应用程序质量和可靠性的关键组成部分。但是，面对众多可用的自动化测试工具，为您的项目选择合适的工具可能是一项艰巨的任务。</p>
<p>本文将介绍 Playwright、Selenium 和 Cypress 这三个强大且广泛使用的自动化测试工具。在这份全面指南中，我们将探讨这三个工具，每种工具都有其独特的功能、能力和使用场景。无论您是经验丰富的自动化工程师还是该领域的新手，本文旨在揭开选择过程的神秘面纱，帮助您做出明智的选择。</p>
<p>我们将深入探讨行业最新的选手 Playwright 的优势和劣势，它承诺为 Web 测试带来全新的自动化能力。我们还将探讨备受信赖的 Selenium，这是一个用于在多个浏览器和平台上测试 Web 应用程序的可靠工具。最后但同样重要的是，我们将研究 Cypress，它以简单、快速和无缝集成而闻名，是许多开发人员和 QA 工程师的首选。</p>
<p>我们将首先回顾每个工具的关键点和独特功能，为您提供一个坚实的基础，以了解它们的不同之处。之后，我们将深入探讨每个工具的细节和实际使用体验。但真正有趣的部分是当我们把它们放在一起比较的时候。我们将生成一个详细的表格，分解 Playwright、Selenium 和 Cypress 的主要功能、优势和劣势，让您能够评估它们是否适合您的特定需求。为了使决策过程更加简单明了，我们将根据自动化测试中最重要的因素为每个工具打分。在这个旅程结束时，您将掌握必要的知识和见解，为您的自动化测试工作做出明智的选择。</p>
<p>让我们从市场上存在时间最长的工具开始</p>
<h2 id="selenium">Selenium！</h2>
<p>我们将从最古老的工具 Selenium 开始。作为自动化测试世界中的一个家喻户晓的名字，Selenium 长期以来一直是 Web 测试的首选。它因其强大的功能、多样性以及庞大的用户和贡献者社区而广受认可。但是，像任何工具一样，Selenium 也有自己的优缺点，我们将在本节中探讨。无论您是在考虑使用 Selenium 进行自动化测试，还是只是想了解更多关于这个经验丰富的巨头的信息，请继续阅读以便了解它的闪光点和面临的挑战。</p>
<p><strong>Selenium 的优点：</strong></p>
<ul>
<li>广泛的浏览器支持：Selenium 支持多种浏览器，包括 Chrome、Firefox、Safari、Edge 等，使其成为跨浏览器测试的多功能选择。</li>
<li>语言支持：Selenium 为多种编程语言提供了支持，如 Java、Python、C#和 JavaScript，使其对广大开发人员具有可访问性。</li>
<li>庞大的社区：Selenium 拥有一个庞大而活跃的社区，因此有丰富的文档、资源和大量用户生成的内容，可帮助解决问题和学习。</li>
<li>跨平台兼容性：Selenium 与多个操作系统兼容，包括 Windows、macOS 和 Linux。</li>
<li>强大的生态系统：Selenium 提供各种工具和框架，如用于并行测试的 Selenium Grid、用于自动化的 Selenium WebDriver 和用于录制和回放功能的 Selenium IDE。</li>
<li>成熟稳定：作为最古老的自动化工具之一，Selenium 已经证明了其稳定性和可靠性，赢得了许多企业的信任。</li>
</ul>
<p><strong>Selenium 的缺点：</strong></p>
<ul>
<li>复杂的设置：对于初学者来说，首次设置 Selenium 可能比较难，特别是在为不同浏览器配置驱动程序(driver)时。</li>
<li>不稳定性：Selenium 测试可能容易出现不稳定性，由于页面加载时间或动态元素等因素，测试可能会间歇性失败。</li>
<li>执行速度慢：与其他现代工具相比，Selenium 测试有时运行速度较慢，这可能会影响测试套件的效率。</li>
<li>没有内置的测试框架：Selenium 不包含内置的测试 runner 或断言库，这意味着您需要依赖其他框架或工具来处理这些方面。</li>
<li>有限的移动支持：虽然 Selenium 可以自动化移动 Web 浏览器，但与专门的移动测试工具相比，其移动应用测试能力较弱。</li>
<li>学习曲线陡峭：Selenium 的灵活性是以更陡峭的学习曲线为代价的，特别是对于那些刚接触自动化测试的人来说。</li>
<li>没有原生支持 API 测试，我们可能需要编写自定义框架来与做 API 接口测试。</li>
</ul>
<p>Selenium 作为强大可靠的自动化测试工具的声誉是实至名归的。其广泛的浏览器支持、多样化的语言绑定和成熟的生态系统使其成为许多人的理想选择。然而，通往成功的 Selenium 自动化之路并非一帆风顺。初始化项目的挑战、偶尔的不稳定性和学习曲线是需要考虑的方面。在我们继续探索 Playwright、Selenium 和 Cypress 的过程中，我们鼓励您仔细权衡这些优缺点，为您的自动化测试项目做出明智的选择。现在，让我们继续我们的旅程，深入探讨下一个竞争者。</p>
<h2 id="playwright">Playwright！</h2>
<p>在我们探索自动化测试巨头的旅程中，接下来是这个三人组中最年轻的竞争者 Playwright。Playwright 凭借其独特的能力和测试自动化方法在测试社区中引起了不小的轰动。它承诺简化 Web 测试的复杂性并增强自动化能力。但是，像任何工具一样，Playwright 也有其自身的优势和挑战。在本节中，我们将深入探讨 Playwright 的与众不同之处以及它可能遇到的障碍。无论您是在考虑将 Playwright 用于您的项目，还是只是对测试自动化的最新进展感到好奇，请继续阅读，以便了解这个工具的特别之处。</p>
<p><strong>Playwright 的优点：</strong></p>
<ul>
<li>跨浏览器支持：Playwright 支持多个 Web 浏览器，包括 Chromium、Firefox 和 WebKit，实现全面的跨浏览器测试。</li>
<li>统一 API：Playwright 为自动化 Web、移动和桌面应用程序提供统一的 API，使其成为各种测试场景的多功能选择。</li>
<li>自动化复杂场景：它擅长自动化复杂场景，如处理 iframes、shadow DOM 和难以识别的元素，使其适合现代 Web 应用程序。</li>
<li>并行测试执行 — Playwright 原生支持这一功能，而在 Selenium 中也可以实现，但需要使用自定义框架，如 pytest。</li>
<li>语言支持：Playwright 也为各种编程语言提供支持，如 Java、Python、C#和 JavaScript，使其成为许多开发人员的绝佳选择。</li>
<li>原生 API 接口测试能力。</li>
</ul>
<p><strong>Playwright 的缺点：</strong></p>
<ul>
<li>学习曲线：Playwright 用的技术比较新， 可能会带来陡峭学习曲线，特别是对于习惯于传统自动化工具的人来说。</li>
<li>较小的社区：与 Selenium 相比，Playwright 的社区较小，这可能意味着可用的资源和社区生成的内容较少。</li>
<li>较新的工具：作为一个较新的工具，一些企业可能更不愿意将 Playwright 用于关键项目。</li>
<li>兼容性挑战：一些用户报告了与特定网站和应用程序的兼容性问题。由于 Playwright 的快速发展，更新频繁，这有时可能导致与现有代码库的兼容性挑战。</li>
<li>过渡期：如果您的团队习惯于 Selenium 或其他传统自动化工具，过渡到 Playwright 可能需要重新培训和适应期，这对一些组织来说可能被视为一个障碍。</li>
</ul>
<p>Playwright 在测试自动化领域的出现无疑引起了人们的注目，这要归功于其现代化的测试方法和强大功能。其跨浏览器支持、复杂场景自动化能力是强有力的卖点。然而，像任何新兴技术一样，它也面临着一些挑战，比如与 Selenium 相比社区较小。当我们转向最后一个竞争者 Cypress 时，我们鼓励您仔细考虑 Playwright 的优缺点。选择正确的工具取决于您项目的独特需求和团队的专业知识。那么，让我们继续我们的旅程，探索最后一个自动化测试巨头，Cypress。</p>
<h2 id="cypress">Cypress！</h2>
<p>在自动化测试巨头之战中，我们的最后一个竞争者是 Cypress，这是一个以简单、快速和对开发人员友好的测试方法而闻名的工具。当我们结束对 Playwright、Selenium 和现在的 Cypress 的探索时，我们深入研究了 Cypress 的突出特点和可能面临的挑战。如果您正在寻找一个重视易用界面和快速执行的测试工具，或者只是想了解 Cypress 如何与其竞争对手相比的优劣，本节是我们旅程的最后一站。</p>
<p><strong>Cypress 的优点：</strong></p>
<ul>
<li>用户友好：Cypress 以其对开发人员友好的界面而闻名，允许测试人员和开发人员轻松编写和运行测试。</li>
<li>实时重载：Cypress 提供实时重载功能，使测试开发和调试更加高效。</li>
<li>自动等待：Cypress 自动等待元素可用，减少了测试脚本中显式等待的需求。</li>
<li>时间旅行调试：Cypress 提供独特的时间旅行调试功能，允许您逐步检查和调试测试执行。</li>
<li>快速执行：Cypress 设计注重速度，与其他一些自动化工具相比，测试执行时间更快。</li>
<li>内置测试运 runner：它包含内置的测试 runner 和断言库，简化了测试创建和管理。</li>
<li>优秀的文档：Cypress 拥有结构良好的文档和乐于助人的社区来进行用户支持。</li>
</ul>
<p><strong>Cypress 的缺点：</strong></p>
<ul>
<li>有限的跨浏览器支持：Cypress 主要支持 Chrome，对其他浏览器的支持有限。如果跨浏览器测试是关键要求，这可能是一个缺点。</li>
<li>不支持移动应用测试：Cypress 专注于 Web 应用程序测试，缺乏测试移动应用的强大功能。</li>
<li>复杂场景的学习曲线：虽然 Cypress 对基本用例来说很友好，但更复杂的测试场景可能需要更深入地理解其架构。</li>
<li>仅支持 JavaScript：Cypress 主要基于 JavaScript，这对于偏好其他编程语言的团队来说可能不是理想选择。</li>
<li>有限的生态系统：虽然 Cypress 生态系统正在增长，但可能无法提供像 Selenium 这样更成熟工具的相同规模的插件、扩展和集成。</li>
</ul>
<p>Cypress 通过为开发人员提供直观愉快的测试体验，在自动化测试世界中赢得了声誉。它的实时重载、自动等待和内置时间旅行调试对许多人来说是游戏规则的改变者。然而，没有工具是完美无缺的。Cypress 也面临着诸如有限的跨浏览器支持和缺乏移动应用测试能力等挑战。当我们结束对这三个自动化测试巨头的讨论时，我们鼓励您将 Cypress 的优势和劣势与 Playwright 和 Selenium 一起考虑。您最终做出的选择应该反映你负责项目的独特需求和团队的专业知识。现在，让我们结束我们的旅程，给出一个大致的结论。</p>
<h2 id="zhi-jie-bi-jiao-zhe-xie-gong-ju">直接比较这些工具</h2>
<p>我们将添加星星（从 ⭐ 到 ⭐⭐⭐⭐⭐）来评定每个自动化工具在各个方面的表现。</p>
<p><img src="https://playwright.itest.info/blog/deciding-among-the-titans-of-test-automation-a-playwright-vs-selenium-vs-cypress-showdown-e5f26ef9e08f/./playwright_vs_se.png" alt="图片5" /></p>
<p>这张表格对比了 Playwright、Selenium 和 Cypress 在不同方面的表现，包括：</p>
<ol>
<li>跨浏览器支持</li>
<li>跨平台支持</li>
<li>语言支持</li>
<li>移动测试</li>
<li>平行测试执行</li>
<li>学习曲线</li>
<li>社区支持</li>
<li>执行速度</li>
<li>API 测试</li>
<li>稳定性</li>
</ol>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源：https://medium.com/leniolabs/deciding-among-the-titans-of-test-automation-a-playwright-vs-selenium-vs-cypress-showdown-e5f26ef9e08f</p>
<p>发布时间：2023-11-21T17:15:23.190Z</p>
如何在 Playwright Test 中为 page.goto() 添加查询参数?
2023-11-20T00:00:00+00:00
2023-11-20T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-you-append-query-parameters-to-page-goto-using-playwright-test/
<p>虽然我们不常需要在特定请求中添加和验证查询参数,但本文的方法在测试使用 URL 参数的 <a href="https://blog.hubspot.com/marketing/what-are-utm-tracking-codes-ht">UTM</a> 或其他类型的跟踪链接时会非常有用。</p>
<p>在本文中,我将测试 <a href="https://practicesoftwaretesting.com/">https://practicesoftwaretesting.com</a> 这个站点。非常感谢 <a href="https://www.linkedin.com/in/roydekleijn/">Roy de Kleijn</a> 提供这个优秀的测试资源!</p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com">GitHub - playwrightsolutions/playwright-practicesoftwaretesting.com</a></p>
<p>我们先来编写一个简单的测试用例,访问页面并填写提交表单。最终目标可能是通过 UTM 代码跟踪某些操作,比如结账过程或支付行为。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/contact/contact.nofixtured.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">首页测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-contact</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">first-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">last-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mctester</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">asf@asdf.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">subject</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">selectOption</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">payments</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">message</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>.</span><span style="color:#8cdaff;">repeat</span><span>(</span><span style="color:#fdb082;">40</span><span>));
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">contact-submit</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.alert-success</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toHaveText</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">感谢您的留言!我们将尽快与您联系。</span><span style="color:#ffffff;">"
</span><span> );
</span><span>});
</span></code></pre>
<p>注意:上面的测试没有包含任何 URL 参数,也没有检查它们。有趣的是,当我访问<a href="https://practicesoftwaretesting.com/#/">https://practicesoftwaretesting.com</a></p>
<p>时,会被重定向到<a href="https://practicesoftwaretesting.com/#/">https://practicesoftwaretesting.com/#/</a></p>
<p>在添加 URL 参数时需要考虑这一点,因为参数会被添加到我们访问的网站上,但如果发生重定向,URL 参数就不会被保留。</p>
<p>如果你只有一个测试用例,可以直接将 URL 参数传入 <code>page.goto("/#/?UTM_SOURCE=playwright")</code>。但在我们的示例中,我们想让多个测试用例里的 url 都带上这个参数,比较好的方式是将实现一个扩展基本页面的<a href="https://playwright.dev/docs/test-fixtures#creating-a-fixture">固定装置(fixture)</a>。</p>
<p><strong>乙醇的注释 👀: 学过前端的同学一看就懂了，这其实就跟拦截器很像</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/modifiedGoto.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">page</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">goto </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">goto</span><span>.</span><span style="color:#8cdaff;">bind</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">modifiedGoto</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">url</span><span>, </span><span style="font-style:italic;color:#fc9354;">options</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">?UTM_SOURCE=playwright</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">return goto</span><span>(</span><span style="color:#e9fdac;">url</span><span>, </span><span style="color:#e9fdac;">options</span><span>);
</span><span> }
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">goto </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">modifiedGoto</span><span>;
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">goto </span><span style="color:#ff5e5e;">= goto</span><span>;
</span><span> },
</span><span>});
</span></code></pre>
<p>我不会详细解释<a href="https://playwright.dev/docs/test-fixtures#creating-a-fixture">如何创建 fixture</a>,但会讲解 fixture 的逻辑。</p>
<p>首先,我们创建一个新变量 <code>goto</code>,它被设置为 <code>page.goto.bind(page)</code>。这里使用了 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind">bind() 函数</a>,用于创建一个新函数,其 <code>this</code> 值设置为 <code>page</code> 对象。</p>
<p><strong>乙醇的注释 👀: bind()是经典的 javascript 中比较容易迷糊的问题，大家可以让 ai 多举几个例子来理解</strong></p>
<p>接下来的代码添加了一个名为 <code>modifiedGoto()</code> 的新函数,它将替代 <code>goto()</code>。在这个函数中,我们将 <code>?UTM_SOURCE=playwright</code> 加到提供的 URL 字符串上并返回。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">modifiedGoto</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">url</span><span>, </span><span style="font-style:italic;color:#fc9354;">options</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">?UTM_SOURCE=playwright</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">return goto</span><span>(</span><span style="color:#e9fdac;">url</span><span>, </span><span style="color:#e9fdac;">options</span><span>);
</span><span>}
</span></code></pre>
<p>下一行 <code>page.goto = modifiedGoto;</code> 用 <code>modifiedGoto</code> 方法替换了原始的 <code>page.goto</code> 方法。</p>
<p>然后我们调用 <code>await use(page);</code>,这是一个回调函数,用于"在运行的测试中使用固定装置值"。</p>
<p>最后,我们调用 <code>page.goto = goto;</code>,在 <code>use</code> 函数调用后恢复原始的 <code>page.goto</code> 方法。</p>
<p>总的来说,我们现在有了一个功能性的 fixture,可以导入到任何测试用例中,并自动添加我们在 fixture 中指定的 URL 参数。让我们通过创建一个新的 <code>contact.spec.ts</code> 来测试它,该用例将使用 <code>@fixtures/modifiedGoto</code>。注意,我们在访问页面后添加了一个断言,以验证 UTM_SOURCE 是否存在于 URL 中!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/contact/contact.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@fixtures/modifiedGoto</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">首页测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">?UTM_SOURCE=playwright</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-contact</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">first-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">last-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mctester</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">asf@asdf.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">subject</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">selectOption</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">payments</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">message</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>.</span><span style="color:#8cdaff;">repeat</span><span>(</span><span style="color:#fdb082;">40</span><span>));
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">contact-submit</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.alert-success</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toHaveText</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">感谢您的留言!我们将尽快与您联系。</span><span style="color:#ffffff;">"
</span><span> );
</span><span>});
</span></code></pre>
<p>这篇文章的灵感来自 <a href="https://aka.ms/playwright/discord">Playwright Discord</a> 上 <a href="https://discord.com/channels/807756831384403968/1160874346483564644">Tomaj</a> 的帖子。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/11/image.png" alt="Image 3" /></p>
<p>他提供了他的解决方案,让我了解到 <code>bind</code> 方法的"全新世界"!</p>
<hr />
<p>感谢阅读!如果您觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">为我买杯咖啡</a>。如果您想在收件箱中收到更多内容,请在下方订阅,别忘了留下一个 ❤️ 来表示您的喜爱。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/how-do-you-append-query-parameters-to-page-goto-using-playwright-test/</p>
<p>发布时间: 2023-11-20</p>
Playwright中如何使用fixture来监控前端的javascript错误
2023-11-20T00:00:00+00:00
2023-11-20T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/track-frontend-javascript-exceptions-with-playwright/
<p>在今天充满 JavaScript 的世界中，ui 自动化测试和实时监控是非常具有挑战性的。现代应用程序中有大量的异步 JavaScript 代码运行，怎么样让测试稳定运行不挂掉一个真正的难题。</p>
<p>这就是为什么许多团队依赖于测试关键功能，并将“测试其余部分”视为一种可有可无的做法。这是一种典型的成本-效益决策。这种方法的缺点是，如果我们不对所有功能进行 ui 自动化测试，很容易忽略生产环境的问题和回归。</p>
<p>除了编写更多的测试之外，我们还能做些什么来解决测试覆盖率不足的问题呢？</p>
<p>一种有价值的方法是实施一个安全策略，让 ui 自动化测试监听显而易见的应用程序问题。让我们以 JavaScript 异常为例。</p>
<p>我们的关键功能用例全部测试通过并不意味着一切都如预期般工作。通过在 ui 自动化测试应用程序时监控 JavaScript 异常，增加捕获问题的机会，这样就不需要直接测试所有可用功能了。</p>
<p>在本文中，我将向我们展示如何设置 Playwright，并利用其 fixture 功能，以便在 JavaScript 控制台显示红色警报时使测试失败。</p>
<p>准备好了吗？</p>
<p><em>如果我们更喜欢观看视频而不是阅读博文，请访问<a href="https://www.youtube.com/watch?v=LKMwS_u_x8Y">YouTube 上的视频链接</a>。</em></p>
<h2 id="wen-ti-qian-duan-de-js-dai-ma-hui-bao-cuo">问题：前端的 js 代码会报错</h2>
<p>让我们看一个例子：我一段时间前把 Checkly 博客上的延迟加载功能玩坏了。为了防止再次发生这种情况，我编写了一个在 Checkly 中运行的 Playwright ui 自动化测试。GitHub 操作使用 <a href="https://www.checklyhq.com/docs/cli/command-line-reference/#npx-checkly-test">npx checkly test</a> 测试每个预览部署，并且如果一切顺利，我的测试用例将转化为生产监控，使用 <a href="https://www.checklyhq.com/docs/cli/command-line-reference/#npx-checkly-deploy">npx checkly deploy</a>来运行并监控。</p>
<p>以下是完整的 Playwright 测试代码。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Checkly 博客延迟加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:3000/blog/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 定位所有博客文章
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">articles </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">a[title="Visit this post"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 计算最初包含的文章数量
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">articleCount </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">articles</span><span>.</span><span style="color:#8cdaff;">count</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 将最后一篇文章滚动到视图中，以触发延迟加载
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">articles</span><span>.</span><span style="color:#8cdaff;">last</span><span>().</span><span style="color:#8cdaff;">scrollIntoViewIfNeeded</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 等待更多文章加载和渲染
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newCount </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">articles</span><span>.</span><span style="color:#8cdaff;">count</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">newCount</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#e9fdac;">articleCount</span><span>);
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>();
</span><span>});
</span></code></pre>
<p>我原以为这种方法会安全，但事实并非如此（剧透：我错了）。</p>
<p>该测试导航到博客并测试了实现的延迟加载功能，但没有监控网站的其他问题。功能性的延迟加载是否意味着页面上的所有内容都正确工作？并非如此。</p>
<p>即使在向下滚动页面后页面上有更多的博客文章，也会忽略高度关键的用户问题，包括各种的 JavaScript 异常。该测试仅覆盖一个功能，忽略了其余部分。这并不理想！</p>
<p><img src="https://images.prismic.io/checklyhq/4c0c430b-0b69-4ebb-9721-082baff0a8e8_javascript-exception-monitoring.jpg?auto=compress,format" alt="图片 1: 旁边的成功 Playwright 测试显示出现应用程序的情况。" /></p>
<p>监听抛出的 JavaScript 异常是防止 UI 奔溃的一种保护措施。</p>
<p>如前所述，我们可能没有时间或能力对每个功能进行 ui 自动化，但是<strong>我们的 ui 自动化测试应该至少关注显而易见的问题</strong>。</p>
<p>那么，如何监听抛出的 JS 异常呢？</p>
<h2 id="jian-ting-playwright-ce-shi-zhong-de-javascript-yi-chang">监听 Playwright 测试中的 JavaScript 异常</h2>
<p>在 Playwright 中监听页面事件非常简单。page 对象带有一个方便的 <code>on</code> 函数，允许我们监听多种页面事件类型（<code>"load"</code>、<code>"pageerror"</code>、<code>"crash"</code> 等）。对于 JavaScript 异常跟踪，我们需要的是 <code>"pageerror"</code> 事件。</p>
<p>我们要考虑测试中抛出的异常，搞一个事件侦听器并将所有抛出的异常收集到一个数组中。一旦 ui 自动化测试功能通过，断言我们的错误数组不包含任何条目。如果有，我们的测试将失败。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Checkly 博客延迟加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 设置一个新的数组以收集抛出的错误
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errors</span><span style="color:#ff5e5e;">: </span><span>Array<Error> </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 在测试会话期间监听异常
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pageerror</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">error</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">errors</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">error</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 所有我们的测试代码...
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言没有发生任何错误
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errors</span><span>).</span><span style="color:#8cdaff;">toHaveLength</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span>});
</span></code></pre>
<p><em>请注意，在测试用例与页面交互之前必须初始化事件侦听器。理想情况下，我们的 <code>page.on</code> 代码应该首先出现在测试用例中。</em></p>
<p>虽然上面的代码片段非常适合在单个测试用例中实现 js 的异常跟踪，但在大型测试项目中就不太好维护了。我们不希望在每个测试用例中重复相同的事件处理逻辑。</p>
<h2 id="ru-guo-javascript-pao-chu-yi-chang-rang-ui-zi-dong-hua-ce-shi-zi-dong-shi-bai">如果 JavaScript 抛出异常，让 ui 自动化测试自动失败</h2>
<p>我们可以用 <code>beforeEach</code> 或 <code>beforeAll</code> 钩子在测试之前和之后运行代码，但是一个被低估的 Playwright 特性，这个特性值得更多关注！</p>
<p><a href="https://playwright.dev/docs/test-fixtures">Playwright fixtures</a> 允许我们以结构化方式组织代码。它们还允许我们在测试之前和之后运行代码，并且甚至可以提供配置修改和测试数据生成。对于许多其他用例，fixtures 非常有用。</p>
<h3 id="fixture-dai-ma">fixture 代码</h3>
<p>在 Playwright 中创建 fixture 以捕获 JavaScript 异常并自动使测试失败。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Page</span><span>, </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 将其放在通用 fixture 部分
</span><span style="color:#6d6d6d;">// https://playwright.dev/docs/test-fixtures#fixtures
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errors</span><span style="color:#ff5e5e;">: </span><span>Array<Error> </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span>
</span><span style="color:#6d6d6d;">// 在启动 Playwright 测试用例之前，注册事件侦听器
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">errorListener </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pageerror</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">error</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">errors</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">error</span><span>);
</span><span> });
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// 使用 fixture 注册事件侦听器
</span><span style="color:#6d6d6d;">// 使用 'errorListener' 定制的 'launchContext'
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">customFixture </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">extend</span><span><{ </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page }>({
</span><span> </span><span style="color:#8cdaff;">page</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}, </span><span style="font-style:italic;color:#fc9354;">use</span><span>, </span><span style="font-style:italic;color:#fc9354;">testInfo</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 创建一个新页面实例
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 注册错误侦听器
</span><span> </span><span style="color:#8cdaff;">errorListener</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 使用该页面进行测试
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 关闭页面并终止浏览器实例
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">close</span><span>();
</span><span> },
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 添加异常捕获到我们的 Playwright 测试
</span><span style="color:#8cdaff;">customFixture</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Checkly 博客延迟加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:3000/blog/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 所有我们的测试代码...
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言没有发生任何错误
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errors</span><span>).</span><span style="color:#8cdaff;">toHaveLength</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span>});
</span></code></pre>
<h3 id="xiang-mu-ji-de-fixture-she-zhi">项目级的 fixture 设置</h3>
<p>接下来，我们应该为将来的扩展性和可维护性做好准备。将上述 fixture 提取到一个独立的文件中，并将其与其他 fixture 和自定义逻辑一起集成。</p>
<p>为了保持代码的整洁和有序，我们应该考虑把一个大型 fixture 放在自己的文件夹中，并在单独的模块中引用。这种方法允许我们添加额外的测试代码和检查脚本，而无需让代码库炸裂。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// fixtures.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">errors </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./report</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">errorListener </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pageerror</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">error</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">errors</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">error</span><span>);
</span><span> });
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// custom-fixture.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">customFixture </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./fixtures</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">errors </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./report</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">customFixture</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Checkly 博客延迟加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:3000/blog/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 所有我们的测试代码...
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言没有发生任何错误
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errors</span><span>).</span><span style="color:#8cdaff;">toHaveLength</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// report.ts
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">errors</span><span style="color:#ff5e5e;">: </span><span>Array<Error> </span><span style="color:#ff5e5e;">= </span><span>[];
</span></code></pre>
<p><strong>结论 — 使用扩展的 Playwright 设置进行更多测试</strong></p>
<p>即使是简单的 Playwright ui 自动化测试，也可以通过添加一些基本的 JS 错误跟踪来提高其功能。通过了解如何设置和组织代码，我们可以确保未来的更改不会影响基础测试集的稳定性。</p>
<p>虽然这种方法不会取代更全面的测试战略，但它确实提供了一个低成本的方法来提高测试用例的可靠性。通过识别在测试中自动捕获的常见问题，我们可以通过捕获简单的 JS 错误和异常来提升 ui 自动化测试的价值。</p>
<p>所以，让我们回顾一下我们可以做些什么：在 Playwright 中使用 fixture 跟踪 JavaScript 异常，让我们的 ui 自动化测试更智能，更具鲁棒性。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">customFixture </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./fixtures</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">errors </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./report</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">customFixture</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Checkly 博客延迟加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:3000/blog/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 所有我们的测试代码...
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言没有发生任何错误
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">errors</span><span>).</span><span style="color:#8cdaff;">toHaveLength</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span>});
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p><strong><a href="https://www.checklyhq.com/blog/track-frontend-javascript-exceptions-with-playwright/">阅读原文</a></strong>
<strong>发布时间：</strong> 2023-11-20</p>
Playwright可以做API测试吗？当然可以✌️
2023-11-16T00:00:00+00:00
2023-11-16T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/can-we-use-playwright-for-api-automation-project-yes/
<p>大家好。很长时间没见了，今天我要和大家聊聊我最近一直在使用的一个框架：Playwright。几乎每个从事测试领域的人都听过 Playwright 的名字。但在大多数测试自动化项目中，Playwright 被用于 UI 测试。经过团队的一些研究，我们决定为什么不将其用于 API 测试自动化项目呢，并开始了研究。到目前为止，我们有一个不错的项目成功地运行了 API 测试。让我告诉你如何从零开始一个 API 测试自动化项目。我们可以通过几个示例来结束这个话题。</p>
<h2 id="an-zhuang">安装</h2>
<p>在安装 Playwright 之前，请确保你的环境中安装了 <strong>node.js</strong>。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># 安装 playwright
</span><span style="color:#e9fdac;">npm</span><span> install @playwright/test
</span><span>
</span><span style="color:#6d6d6d;"># 创建一个空项目目录
</span><span style="color:#e9fdac;">mkdir</span><span> api-test-project
</span><span style="color:#6699cc;">cd</span><span> api-test-project
</span><span style="color:#e9fdac;">npm</span><span> init</span><span style="font-style:italic;color:#fc9354;"> -y
</span></code></pre>
<p>让我们以一个预订接口为例。我假设我们将在这个结构中测试 GET、POST 和 DELETE 请求。在创建项目结构时，有一点需要注意。我们需要避免在构建结构时重复代码。我们应该尽量编写尽可能干净和可读的代码。因此，我选择将我的服务和测试分开存放。</p>
<p><strong>项目结构大致如下：</strong></p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>booking-api-test/
</span><span> ├── tests/
</span><span> │ ├── get-booking.spec.ts
</span><span> │ ├── post-booking.spec.ts
</span><span> │ ├── delete-booking.spec.ts
</span><span> │ └── ...
</span><span> ├── services/
</span><span> │ ├── api-service.ts
</span><span> │ ├── auth-service.ts
</span><span> │ └── ...
</span><span> ├── package.json
</span><span> ├── tsconfig.json
</span><span> └── .env
</span></code></pre>
<blockquote>
<p>现在让我们编写服务和测试代码。我将假设这个结构中有身份验证。对于这种身份验证，我假设 Headers 中有一个 accessToken 值。</p>
</blockquote>
<h2 id="bu-zou-2-chuang-jian-fu-wu-wen-jian">步骤 2：创建服务文件</h2>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//api-service.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>APIService {
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">getBooking</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">bookingId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">**/bookings/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>).</span><span style="color:#8cdaff;">fetch</span><span>();
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">createBooking</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">accessToken</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">bookingData</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/bookings</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fetch</span><span>({
</span><span> method: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST</span><span style="color:#ffffff;">"</span><span>,
</span><span> headers: {
</span><span> Authorization: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Bearer ${</span><span style="color:#e9fdac;">accessToken</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Content-Type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> body: </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">bookingData</span><span>),
</span><span> });
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">deleteBooking</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">accessToken</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">bookingId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">**/bookings/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>).</span><span style="color:#8cdaff;">fetch</span><span>({
</span><span> method: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">DELETE</span><span style="color:#ffffff;">"</span><span>,
</span><span> headers: {
</span><span> Authorization: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Bearer ${</span><span style="color:#e9fdac;">accessToken</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> },
</span><span> });
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">// auth-service.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>AuthService {
</span><span> </span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">getAccessToken</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 获取访问令牌所需的 API 调用
</span><span> </span><span style="color:#6d6d6d;">// 例如，你可以使用 OAuth 2.0 进行身份验证
</span><span> }
</span><span>}
</span></code></pre>
<h2 id="bu-zou-3-chuang-jian-api-ce-shi-wen-jian">步骤 3：创建 API 测试文件</h2>
<p>现在我们可以创建测试文件。作为示例，让我们创建 <strong>get-booking.spec.ts</strong>、<strong>post-booking.spec.ts</strong> 和 <strong>delete-booking.spec.ts</strong> 文件。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//get-booking.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">APIService</span><span>, </span><span style="color:#e9fdac;">AuthService </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">../services</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">GET Booking Test</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">authService </span><span style="color:#ff5e5e;">= new </span><span>AuthService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">accessToken </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">authService</span><span>.</span><span style="color:#8cdaff;">getAccessToken</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiService </span><span style="color:#ff5e5e;">= new </span><span>APIService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiService</span><span>.</span><span style="color:#8cdaff;">getBooking</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">bookingId</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#e9fdac;">accessToken</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 测试断言
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingData </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingData</span><span>).</span><span style="color:#8cdaff;">toHaveProperty</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">id</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">bookingId</span><span style="color:#ffffff;">'</span><span>);
</span><span>});
</span><span>
</span><span>## </span><span style="color:#e9fdac;">post</span><span style="color:#ff5e5e;">-</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">spec</span><span>.</span><span style="color:#e9fdac;">ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">APIService</span><span>, </span><span style="color:#e9fdac;">AuthService </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">../services</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">POST Booking Test</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">authService </span><span style="color:#ff5e5e;">= new </span><span>AuthService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">accessToken </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">authService</span><span>.</span><span style="color:#8cdaff;">getAccessToken</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingData </span><span style="color:#ff5e5e;">= </span><span>{
</span><span style="color:#6d6d6d;">// 预订数据
</span><span style="color:#6d6d6d;">// 根据你的接口，你可以传递所需的数据
</span><span>};
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiService </span><span style="color:#ff5e5e;">= new </span><span>APIService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiService</span><span>.</span><span style="color:#8cdaff;">createBooking</span><span>(</span><span style="color:#e9fdac;">accessToken</span><span>, </span><span style="color:#e9fdac;">bookingData</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 测试断言
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createdBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">createdBooking</span><span>).</span><span style="color:#8cdaff;">toHaveProperty</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">id</span><span style="color:#ffffff;">'</span><span>);
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// delete-booking.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">APIService</span><span>, </span><span style="color:#e9fdac;">AuthService </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">../services</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">DELETE Booking Test</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">authService </span><span style="color:#ff5e5e;">= new </span><span>AuthService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">accessToken </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">authService</span><span>.</span><span style="color:#8cdaff;">getAccessToken</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">'</span><span>);
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiService </span><span style="color:#ff5e5e;">= new </span><span>APIService(</span><span style="color:#e9fdac;">page</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiService</span><span>.</span><span style="color:#8cdaff;">deleteBooking</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">bookingId</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#e9fdac;">accessToken</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 测试断言
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">204</span><span>);
</span><span>});
</span></code></pre>
<p>这个结构实际上向你展示了如何非常简单地获取 accessToken，然后如何使用它。我试图以一种简单的方式解释它。也可以采取其他路径。</p>
<p>创建项目结构可能会根据你和你正在处理的项目有所不同。例如，你可以全局处理这个问题，而不必在每个测试中调用一个方法来访问 accessToken。</p>
<p><strong>注意：Playwright 像其他框架一样，包含 beforeAll()、beforeEach() 和类似的方法。阅读和遵循文档会对你有帮助。</strong></p>
<h2 id="bu-zou-4-ci-cd-ji-cheng">步骤 4：CI/CD 集成</h2>
<p>下面是我为 GitHub Actions 准备的一个非常简单的 yaml 文件。这与其他方法一样，可以根据你的项目需求进行调整。我会给你一个简单的示例以供参考，剩下的就靠你了 :)</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">API Test CI/CD
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span style="color:#ff5e5e;">push</span><span>:
</span><span style="color:#ff5e5e;">branches</span><span>:
</span><span>
</span><span>- </span><span style="color:#fbe3bf;">main
</span><span>
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span style="color:#ff5e5e;">api_test</span><span>:
</span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span>
</span><span style="color:#ff5e5e;">steps</span><span>:
</span><span>
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Checkout Repository
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v2
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Setup Node.js
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v2
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">14</span><span style="color:#ffffff;">'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install Dependencies
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm install
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run API Tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm test
</span></code></pre>
<p>这个 GitHub Actions 示例将在每次推送时运行 API 测试。你可以通过在 <strong>.env</strong> 文件中存储敏感的密码来提高安全性。</p>
<p>希望这对你有帮助。在本文中，我只是想谈谈如何使用它以及作为初学者你可以如何使用它。当然，你会有自己独特的方法和结构来建立项目。我建议你阅读 Playwright 文档。同时，TypeScript 也为我们提供了灵活性。你也可以使用不同的库。我可能会在下一篇文章中通过提供更多细节来扩展我的观点。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://numanhanduran.medium.com/can-we-use-playwright-for-api-automation-project-yes-9857865dedea">URL Source</a></p>
<p>发布时间: 2023-11-06</p>
使用playwright和java从0到1构建自动化测试框架
2023-11-14T00:00:00+00:00
2023-11-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/from-setup-to-success-creating-scalable-tests-with-playwright-java-and-page-object-model-423e27ef795e/
<h2 id="yin-yan">引言</h2>
<p><em>拥抱现代网页自动化:Playwright 与 Java 以及页面对象模型</em></p>
<h2 id="wang-ye-zi-dong-hua-ge-xin-playwright-de-jue-qi">网页自动化革新:Playwright 的崛起</h2>
<p>在 web 开发中,自动化测试已成为不可或缺的一部分。Playwright 的出现标志着这一领域的重大进步。作为一个跨浏览器自动化库,Playwright 使开发人员和测试人员能够为网络应用程序编写可靠且强大的测试。它能够在真实环境下与多个浏览器(包括 Chrome、Firefox 和 Safari)交互,这一特性使其从前辈中脱颖而出。这种能力确保了在不同浏览环境中的全面覆盖和兼容性,这对当今多样化的 web 生态系统中至关重要。</p>
<p>你也可以查看<a href="https://medium.com/@mohsenny/deciding-between-cypress-and-playwright-a-comprehensive-guide-4d883d1be147">这篇文章对 Cypress 和 Playwright 进行了全面比较</a>,因为这两个自动化框架目前都被广泛使用,处于领先地位。</p>
<h2 id="java-yu-playwright-qiang-da-de-zu-he">Java 与 Playwright:强大的组合</h2>
<p>Java 以其稳定性、可扩展性和强大的生态系统而闻名,是实现基于 Playwright 的测试自动化的绝佳选择。Java 丰富的库、强大的社区支持和跨平台特性使其成为许多组织的首选语言。当与 Playwright 的功能相结合时,Java 提供了一个强大的框架,用于创建复杂而高效的自动化测试套件。</p>
<h2 id="yin-ru-ye-mian-dui-xiang-mo-xing-pom-yi-shi-xian-ke-wei-hu-de-ce-shi-zi-dong-hua">引入页面对象模型(POM)以实现可维护的测试自动化</h2>
<p>页面对象模型(POM)是一种设计模式,已成为现代测试自动化策略的基石。POM 提倡为每个网页创建单独的对象,封装页面的结构和行为。这种分离带来了诸多好处:</p>
<ol>
<li><strong>增强可维护性:</strong> 网络应用程序 UI 的变化可以通过更新页面对象来管理,最大限度地减少测试脚本的变动。</li>
<li><strong>提高可读性:</strong> 测试脚本变得更易读懂,因为它们使用反映用户操作的方法,而不是直接与 UI 元素交互。</li>
<li><strong>可复用性:</strong> 页面对象可以在不同的测试中重复使用,减少代码重复。</li>
<li><strong>改善协作:</strong> 清晰的结构使团队更容易理解和贡献测试代码,增强协作。</li>
</ol>
<h2 id="tan-suo-playwright-de-lu-zhi-hui-fang-gong-ju">探索 Playwright 的录制回放工具</h2>
<p>在设置好 Playwright 后,你应该探索的第一个功能之一是 Playwright 的代码生成工具,通常被称为"codegen"。Codegen 是一个革命性的功能,它通过记录你与网络应用程序的交互并生成相应的 Playwright 代码来协助创建测试脚本。</p>
<h2 id="codegen-de-you-shi">Codegen 的优势:</h2>
<ul>
<li><strong>快速脚本创建:</strong> 它显著加快了编写测试脚本的过程,特别是对于复杂的交互。</li>
<li><strong>学习工具:</strong> 对于 Playwright 新手来说,它是一个出色的学习辅助工具,展示了 Playwright 脚本的结构。</li>
<li><strong>准确性:</strong> 有助于捕获精确的选择器,减少手动编写选择器时可能出现的错误。</li>
</ul>
<h2 id="shi-yong-codegen">使用 Codegen:</h2>
<p>要使用 codegen,可以在命令行中以 codegen 模式运行 Playwright。这将打开一个浏览器,你可以在其中手动执行你希望自动化的操作。Playwright 将记录这些操作并实时生成相应的代码。以下是启动 codegen 的简单示例:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright codegen example.com
</span></code></pre>
<p>这个命令会启动一个浏览器窗口,你可以在其中与"example.com"进行交互。当你浏览和与网站互动时,Playwright 会为这些操作生成代码:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*wbhbuGRovWEGyW-434juJg.png" alt="图片 3" /></p>
<h2 id="yu-pom-ji-cheng">与 POM 集成:</h2>
<p>尽管 codegen 是一个强大的工具,但将生成的代码集成到页面对象模型结构中以保持可维护性是至关重要的。使用生成的代码作为基础,并对其进行完善以适应你的页面类和测试结构。</p>
<p>在接下来的章节中,我们将深入探讨如何使用 Java 设置 Playwright 项目,利用页面对象模型创建一个健壮、可维护和可扩展的自动化框架。</p>
<p>要查看这些概念的实际应用并获取本文中 Google 搜索示例的完整代码,请随时查看这个综合性仓库:<a href="https://github.com/mohsenny/PlaywrightWithJava">PlaywrightWithJava</a>。它作为一个即用型模板,用于使用页面对象模型实现 Java 的 Playwright 测试。</p>
<h2 id="di-yi-zhang-playwright-he-java-ru-men">第一章: Playwright 和 Java 入门</h2>
<p><em>奠定基础:设置 Java、Maven 和 Playwright</em></p>
<p>在本章中,我们将指导你完成使用 Java 和 Maven 设置 Playwright 项目的初始步骤。这个设置是创建高效且可扩展的 web 自动化框架的第一步。</p>
<h3 id="1-chu-shi-hua-java-he-maven-huan-jing">1. 初始化 Java 和 Maven 环境:</h3>
<p>在深入 Playwright 之前,确保你的系统上已安装 Java 和 Maven。Java 是你将使用的编程语言,而 Maven 是一个强大的构建工具,简化了依赖管理和项目构建。</p>
<ul>
<li>安装 Java: 你需要在系统上安装 Java JDK。你可以从 <a href="https://www.oracle.com/java/technologies/javase-jdk11-downloads.html">Oracle 网站</a>下载,或使用 OpenJDK。</li>
<li>安装 Maven: 从 <a href="https://maven.apache.org/download.cgi">Apache Maven 项目</a>下载并安装 Maven。按照他们网站上提供的安装说明在你的系统上设置它。</li>
</ul>
<h3 id="2-an-zhuang-java-ban-playwright">2. 安装 Java 版 Playwright:</h3>
<p>一旦 Java 和 Maven 设置完成,下一步是将 Playwright 添加到你的项目中。你可以通过在 Maven 项目中添加 Playwright 作为依赖项来实现这一点。</p>
<ul>
<li><strong>创建新的 Maven 项目:</strong> 如果你正在开始一个新项目,在你喜欢的 IDE 中或从命令行创建一个 Maven 项目。</li>
<li><strong>添加 Playwright 依赖:</strong> 在你的 <code>pom.xml</code> 中,添加以下依赖项以包含 Playwright:</li>
</ul>
<pre data-lang="xml" style="background-color:#191919;color:#f8f8f2;" class="language-xml "><code class="language-xml" data-lang="xml"><span><</span><span style="color:#ff5e5e;">dependencies</span><span>>
</span><span> </span><span style="color:#6d6d6d;"><!-- Playwright -->
</span><span> <</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">groupId</span><span>>com.microsoft.playwright</</span><span style="color:#ff5e5e;">groupId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">artifactId</span><span>>playwright</</span><span style="color:#ff5e5e;">artifactId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">version</span><span>>[latest_version]</</span><span style="color:#ff5e5e;">version</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">scope</span><span>>test</</span><span style="color:#ff5e5e;">scope</span><span>>
</span><span> </</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> </span><span style="color:#6d6d6d;"><!-- 测试运行器和断言 -->
</span><span> <</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">groupId</span><span>>org.junit.jupiter</</span><span style="color:#ff5e5e;">groupId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">artifactId</span><span>>junit-jupiter</</span><span style="color:#ff5e5e;">artifactId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">version</span><span>>RELEASE</</span><span style="color:#ff5e5e;">version</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">scope</span><span>>test</</span><span style="color:#ff5e5e;">scope</span><span>>
</span><span> </</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">groupId</span><span>>junit</</span><span style="color:#ff5e5e;">groupId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">artifactId</span><span>>junit</</span><span style="color:#ff5e5e;">artifactId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">version</span><span>>4.13.2</</span><span style="color:#ff5e5e;">version</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">scope</span><span>>test</</span><span style="color:#ff5e5e;">scope</span><span>>
</span><span> </</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">groupId</span><span>>org.junit</</span><span style="color:#ff5e5e;">groupId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">artifactId</span><span>>junit-bom</</span><span style="color:#ff5e5e;">artifactId</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">version</span><span>>5.10.1</</span><span style="color:#ff5e5e;">version</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">type</span><span>>pom</</span><span style="color:#ff5e5e;">type</span><span>>
</span><span> <</span><span style="color:#ff5e5e;">scope</span><span>>import</</span><span style="color:#ff5e5e;">scope</span><span>>
</span><span> </</span><span style="color:#ff5e5e;">dependency</span><span>>
</span><span> </span><span style="color:#6d6d6d;"><!-- 根据需要添加其他依赖 -->
</span><span></</span><span style="color:#ff5e5e;">dependencies</span><span>>
</span></code></pre>
<ul>
<li>将 <code>[latest_version]</code> 替换为 Java 版 Playwright 的最新版本,你可以在 <a href="https://mvnrepository.com/artifact/com.microsoft.playwright/playwright">Maven 仓库</a>上找到。</li>
</ul>
<h3 id="3-yan-zheng-pei-zhi">3. 验证配置:</h3>
<p>在设置完项目并添加 Playwright 依赖后,至关重要的是验证一切是否正常运行。</p>
<ul>
<li><strong>创建一个简单的测试:</strong> 编写一个小脚本来打开浏览器并导航到一个网页。这里是一个例子:</li>
</ul>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">package </span><span>com.example;
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">TestExample </span><span>{
</span><span> </span><span style="color:#ff5e5e;">public static </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">main</span><span>(</span><span style="color:#fbe3bf;">String</span><span style="color:#ff5e5e;">[] </span><span style="font-style:italic;color:#fc9354;">args</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">try </span><span>(</span><span style="color:#fbe3bf;">Playwright</span><span> playwright </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Playwright</span><span>.</span><span style="color:#e9fdac;">create</span><span>()) {
</span><span> </span><span style="color:#fbe3bf;">Browser</span><span> browser </span><span style="color:#ff5e5e;">=</span><span> playwright.</span><span style="color:#e9fdac;">chromium</span><span>().</span><span style="color:#e9fdac;">launch</span><span>();
</span><span> </span><span style="color:#fbe3bf;">Page</span><span> page </span><span style="color:#ff5e5e;">=</span><span> browser.</span><span style="color:#e9fdac;">newPage</span><span>();
</span><span> page.</span><span style="color:#e9fdac;">navigate</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://example.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#fbe3bf;">System</span><span>.out.</span><span style="color:#e9fdac;">println</span><span>(page.</span><span style="color:#e9fdac;">title</span><span>());
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<ul>
<li><strong>运行你的测试:</strong> 使用 Maven 执行这个脚本,以确保 Playwright 可以启动浏览器并执行操作。</li>
</ul>
<p>随着 Java、Maven 和 Playwright 的成功设置,你现在已准备好深入 web 自动化测试的世界。接下来的章节将涵盖你的项目结构以及如何有效地实现页面对象模型以进行可维护和可扩展的测试。</p>
<h2 id="di-er-zhang-ke-wei-hu-xing-de-xiang-mu-jie-gou">第二章: 可维护性的项目结构</h2>
<p><em>构建你的测试框架:使用 Java 和 Maven 的最佳项目布局</em></p>
<p>创建一个组织良好的项目结构对于维护一个可扩展和高效的自动化框架至关重要。本章概述了使用 Java 和 Maven 的 Playwright 项目的最佳实践,强调可维护性和易用性。</p>
<h3 id="1-tui-jian-de-mu-lu-jie-gou">1. 推荐的目录结构:</h3>
<p>结构化的方法有助于有效管理代码,尤其是随着项目的增长。以下是推荐的项目结构:</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">YourProject
</span><span style="color:#e9fdac;">├──</span><span> src
</span><span style="color:#e9fdac;">│</span><span> ├── main
</span><span style="color:#e9fdac;">│</span><span> │ ├── java
</span><span style="color:#e9fdac;">│</span><span> │ │ └── com
</span><span style="color:#e9fdac;">│</span><span> │ │ ├── pages
</span><span style="color:#e9fdac;">│</span><span> │ │ └── utils
</span><span style="color:#e9fdac;">│</span><span> │ └── resources
</span><span style="color:#e9fdac;">│</span><span> │ └── translations
</span><span style="color:#e9fdac;">│</span><span> └── test
</span><span style="color:#e9fdac;">│</span><span> ├── java/
</span><span style="color:#e9fdac;">│</span><span> │ └── com
</span><span style="color:#e9fdac;">│</span><span> │ └── tests
</span><span style="color:#e9fdac;">│</span><span> └── resources
</span><span style="color:#e9fdac;">│</span><span> ├── config
</span><span style="color:#e9fdac;">│</span><span> └── utils
</span><span style="color:#e9fdac;">└──</span><span> pom.xml
</span></code></pre>
<ul>
<li><code>src/main/java</code>: 包含测试框架的核心,包括页面对象和实用工具类。</li>
<li><code>src/test/java</code>: 存放测试脚本,以反映应用程序结构的方式组织。</li>
<li><code>src/test/resources</code>: 存储外部资源,如选择器和测试数据,将它们与测试逻辑分开。</li>
</ul>
<h3 id="2-mei-ge-zu-jian-de-shuo-ming">2. 每个组件的说明:</h3>
<ul>
<li><strong>页面类</strong> (<code>src/main/java/.../pages/</code>): 应用程序中的每个网页都应该有一个对应的页面类。这个类封装了网页的所有功能,遵循页面对象模型。</li>
<li><strong>实用工具类</strong> (<code>src/main/java/.../utils/</code>): 这些类可以包括各种实用工具,如配置读取器、常见任务的辅助方法等。</li>
<li><strong>测试类</strong> (<code>src/test/java/.../tests/</code>): 在这里,你编写实际的测试用例,使用页面类。</li>
<li><strong>测试数据文件</strong> (<code>src/test/resources/testdata/</code>): 将你的测试数据(如用户名和密码)保存在外部文件中,以便于管理并避免硬编码。</li>
<li><strong>Maven 配置</strong> (<code>pom.xml</code>): 这个文件管理项目依赖、插件和其他配置。</li>
</ul>
<h3 id="3-ye-mian-lei-de-li-zi">3. 页面类的例子:</h3>
<p>以下是一个简单的页面类示例,代表登录页面:</p>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">package </span><span>com.yourcompany.yourproject.pages;
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#fbe3bf;">Page</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">LoginPage </span><span>{
</span><span> </span><span style="color:#ff5e5e;">private final </span><span style="color:#fbe3bf;">Page </span><span>page;
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 定位器
</span><span> </span><span style="color:#ff5e5e;">private final </span><span style="color:#fbe3bf;">String </span><span>USERNAME_INPUT </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">private final </span><span style="color:#fbe3bf;">String </span><span>PASSWORD_INPUT </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">private final </span><span style="color:#fbe3bf;">String </span><span>LOGIN_BUTTON </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#login</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="color:#8cdaff;">LoginPage</span><span>(</span><span style="color:#fbe3bf;">Page </span><span style="font-style:italic;color:#fc9354;">page</span><span>) {
</span><span> </span><span style="color:#e9fdac;">this</span><span>.page </span><span style="color:#ff5e5e;">=</span><span> page;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#fbe3bf;">String </span><span style="font-style:italic;color:#fc9354;">username</span><span>, </span><span style="color:#fbe3bf;">String </span><span style="font-style:italic;color:#fc9354;">password</span><span>) {
</span><span> page.</span><span style="color:#e9fdac;">fill</span><span>(</span><span style="color:#fdb082;">USERNAME_INPUT</span><span>, username);
</span><span> page.</span><span style="color:#e9fdac;">fill</span><span>(</span><span style="color:#fdb082;">PASSWORD_INPUT</span><span>, password);
</span><span> page.</span><span style="color:#e9fdac;">click</span><span>(</span><span style="color:#fdb082;">LOGIN_BUTTON</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<p>一个结构良好的项目布局对于测试框架的长期可维护性和可扩展性至关重要。通过将代码组织成逻辑部分并将选择器和测试数据外部化,你为测试自动化工作创建了一个强大的基础。在下一章中,我们将深入探讨如何创建有效且可维护的页面类。</p>
<h2 id="di-san-zhang-chuang-jian-ye-mian-lei">第三章: 创建页面类</h2>
<p><em>构建强大的页面对象:Playwright 中页面类构建指南</em></p>
<p>使用页面对象模型(POM)的可维护测试自动化框架的关键组成部分之一是创建页面类。本章重点介绍如何使用 Playwright 和 Java 有效构建这些类。</p>
<h3 id="1-ye-mian-lei-zai-pom-zhong-de-jiao-se">1. 页面类在 POM 中的角色:</h3>
<p>页面类作为网页 UI 元素的接口。每个页面类对应应用程序中的一个页面,封装了可以在该页面上执行的操作。这种方法提高了可维护性，优化了可读性,并减少了代码重复。</p>
<h2 id="2-gou-jian-ye-mian-lei">2. 构建页面类:</h2>
<p>以下是创建页面类的分步指南:</p>
<ul>
<li><strong>识别 UI 元素:</strong> 确定网页上测试将与之交互的所有元素,如文本框、按钮和链接。</li>
<li><strong>定义选择器:</strong> 在页面类中存储这些元素的选择器。最佳做法是将这些选择器外部化,但为简单起见,我们将直接在类中定义它们。</li>
<li><strong>实现操作:</strong> 为页面上可以执行的每个操作创建方法,如输入文本、点击按钮等。</li>
</ul>
<h3 id="3-shi-li-chuang-jian-searchpage-lei">3. 示例:创建 SearchPage 类:</h3>
<p>让我们为 Google 搜索页面创建一个 <code>SearchPage</code> 类:</p>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">package </span><span>org.pages;
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#fbe3bf;">Locator</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#fbe3bf;">Page</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#fbe3bf;">options</span><span>.</span><span style="color:#fbe3bf;">AriaRole</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">util</span><span>.</span><span style="color:#fbe3bf;">TranslationReader</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">SearchPage </span><span>{
</span><span> </span><span style="color:#ff5e5e;">private final </span><span style="color:#fbe3bf;">Page </span><span>page;
</span><span> </span><span style="color:#6d6d6d;">/* 为避免硬编码文本,我们从翻译文件中读取它们
</span><span style="color:#6d6d6d;"> 以便在定义选择器时使用。
</span><span style="color:#6d6d6d;"> 你可以在这里查看 TranslationReader.java 的内容:
</span><span style="color:#6d6d6d;"> https://shorturl.at/vRST3 */
</span><span> </span><span style="color:#fbe3bf;">TranslationReader </span><span>reader </span><span style="color:#ff5e5e;">= new </span><span style="color:#fbe3bf;">TranslationReader</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="color:#8cdaff;">SearchPage</span><span>(</span><span style="color:#fbe3bf;">Page </span><span style="font-style:italic;color:#fc9354;">page</span><span>) {
</span><span> </span><span style="color:#e9fdac;">this</span><span>.page </span><span style="color:#ff5e5e;">=</span><span> page;
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 选择器:返回页面某些元素的选择器
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="color:#fbe3bf;">Locator </span><span style="color:#8cdaff;">getCookieSelector</span><span>() {
</span><span> </span><span style="color:#ff5e5e;">return</span><span> page.</span><span style="color:#e9fdac;">getByRole</span><span>(</span><span style="color:#fbe3bf;">AriaRole</span><span>.</span><span style="color:#fdb082;">BUTTON</span><span>, </span><span style="color:#ff5e5e;">new </span><span style="color:#fbe3bf;">Page</span><span>.</span><span style="color:#fbe3bf;">GetByRoleOptions</span><span>().</span><span style="color:#e9fdac;">setName</span><span>(
</span><span> reader.</span><span style="color:#e9fdac;">getTranslation</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cookie.accept</span><span style="color:#ffffff;">"</span><span>)
</span><span> ));
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="color:#fbe3bf;">Locator </span><span style="color:#8cdaff;">getSearchField</span><span>() {
</span><span> </span><span style="color:#ff5e5e;">return</span><span> page.</span><span style="color:#e9fdac;">getByRole</span><span>(</span><span style="color:#fbe3bf;">AriaRole</span><span>.</span><span style="color:#fdb082;">COMBOBOX</span><span>, </span><span style="color:#ff5e5e;">new </span><span style="color:#fbe3bf;">Page</span><span>.</span><span style="color:#fbe3bf;">GetByRoleOptions</span><span>().</span><span style="color:#e9fdac;">setName</span><span>(
</span><span> reader.</span><span style="color:#e9fdac;">getTranslation</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">search</span><span style="color:#ffffff;">"</span><span>)
</span><span> ));
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">/* ...更多选择器 */
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 方法:在页面上执行特定操作
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">clickCookieAcceptButton</span><span>(){
</span><span> </span><span style="color:#e9fdac;">getCookieSelector</span><span>().</span><span style="color:#e9fdac;">click</span><span>();
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">performSearch</span><span>(</span><span style="color:#fbe3bf;">String </span><span style="font-style:italic;color:#fc9354;">searchKeyword</span><span>) {
</span><span> </span><span style="color:#e9fdac;">getMainSearchField</span><span>().</span><span style="color:#e9fdac;">fill</span><span>(searchKeyword);
</span><span> </span><span style="color:#e9fdac;">getSearchButton</span><span>().</span><span style="color:#e9fdac;">click</span><span>();
</span><span> }
</span><span> </span><span style="color:#6d6d6d;">/* ...更多方法 */
</span><span>}
</span></code></pre>
<p>在这个例子中,<code>SearchPage</code> 类代表我们登陆 Google 时的第一个页面。它包括与页面交互的方法,如使用给定关键词搜索和导航到不同的结果标签。</p>
<h3 id="4-she-ji-ye-mian-lei-de-zui-jia-shi-jian">4. 设计页面类的最佳实践:</h3>
<ul>
<li><strong>每个页面一个类:</strong> 为应用程序的每个页面创建一个单独的类。</li>
<li><strong>描述性方法名:</strong> 使用清晰描述操作的名称,如 <code>performSearch()</code> 或 <code>navigateToImageResults()</code>。</li>
<li><strong>模块化:</strong> 设计你的方法使其小巧、专注且可以复用。</li>
</ul>
<p>页面类是使用 Playwright 和 Java 构建可扩展和可维护的测试自动化框架的基础。通过封装与网页的交互,你创建了一个强大且可复用的结构,简化了测试脚本并使其更能适应 UI 的变化。</p>
<h2 id="di-si-zhang-bian-xie-ce-shi-lei">第四章:编写测试类</h2>
<p><em>实现有效的测试用例:在测试中集成页面对象</em></p>
<p>在设置好页面类之后,下一步是编写测试类。这些脚本将使用页面类中定义的方法与网络应用程序进行交互。本章介绍如何使用 Playwright 和 Java 创建这些测试用例。</p>
<h3 id="1-bian-xie-ce-shi-lei-de-ji-chu">1. 编写测试类的基础:</h3>
<p>测试类应该清晰、简洁,并专注于测试逻辑,而不是与网络应用程序交互的细节。这些测试将使用页面类提供的方法。</p>
<h3 id="2-gou-jian-ce-shi-lei">2. 构建测试类:</h3>
<p>一个典型的测试类包括:</p>
<ul>
<li><strong>setup 方法:</strong> 在每个测试之前初始化 Playwright 浏览器和其他先决条件。</li>
<li><strong>测试方法:</strong> 单独的测试用例,每个代表不同的场景。</li>
<li><strong>清理方法:</strong> 在每个测试之后关闭浏览器并执行任何清理。</li>
</ul>
<h3 id="3-li-yong-playwrightextension-shi-xian-gao-xiao-de-ce-shi-she-zhi-he-qing-li">3. 利用 <code>PlaywrightExtension</code> 实现高效的测试设置和清理</h3>
<p>在自动化测试领域,效率和可复用性至关重要。这就是 <code>PlaywrightExtension</code> 发挥作用的地方,它是一个自定义的 JUnit 扩展,旨在简化测试的 setup 和 teardown 过程。<code>PlaywrightExtension</code> 显著减少了样板代码,确保每个测试类都遵循 DRY(不要重复自己)原则。</p>
<p><em>什么是 <strong>PlaywrightExtension</strong>?</em></p>
<p><code>PlaywrightExtension</code> 是一个自定义的 JUnit 扩展,用于自动化每个测试的 Playwright 资源的初始化和清理。它管理浏览器实例、页面和上下文的生命周期,确保每个测试都从一个干净的状态开始。这种方法消除了在每个测试类中重复设置和清理代码的需要,使你的测试更清晰、更易于维护。</p>
<p>要实现 <code>PlaywrightExtension</code>,将其定义为 JUnit 5 扩展,并用 <code>@ExtendWith(PlaywrightExtension.class)</code> 注解你的测试类。这告诉 JUnit 使用 <code>PlaywrightExtension</code> 中定义的方法来管理测试环境。</p>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#fbe3bf;">extension</span><span>.</span><span style="color:#fbe3bf;">ExtendWith</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span>
</span><span>@</span><span style="color:#e9fdac;">ExtendWith</span><span>(</span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">class</span><span>)
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">YourTest </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 测试方法在这里
</span><span>}
</span></code></pre>
<p><code>PlaywrightExtension</code> 类本身看起来像这样:</p>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">package </span><span>resources.config;
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">java</span><span>.</span><span style="color:#fbe3bf;">nio</span><span>.</span><span style="color:#fbe3bf;">file</span><span>.</span><span style="color:#fbe3bf;">Paths</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#fbe3bf;">extension</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">PlaywrightExtension </span><span style="color:#ff5e5e;">implements </span><span style="text-decoration:underline;font-style:italic;color:#8cdaff;">BeforeEachCallback</span><span>, </span><span style="text-decoration:underline;font-style:italic;color:#8cdaff;">AfterEachCallback </span><span>{
</span><span> </span><span style="color:#ff5e5e;">private static </span><span style="color:#fbe3bf;">Browser </span><span>browser;
</span><span> </span><span style="color:#ff5e5e;">private static </span><span style="color:#fbe3bf;">BrowserContext </span><span>context;
</span><span> </span><span style="color:#ff5e5e;">private static </span><span style="color:#fbe3bf;">Page </span><span>page;
</span><span>
</span><span> @</span><span style="color:#e9fdac;">Override
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#fbe3bf;">ExtensionContext </span><span style="font-style:italic;color:#fc9354;">context</span><span>) </span><span style="color:#ff5e5e;">throws </span><span style="color:#fbe3bf;">Exception </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 覆盖并全局定义 beforeEach
</span><span> }
</span><span>
</span><span> @</span><span style="color:#e9fdac;">Override
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#fbe3bf;">ExtensionContext </span><span style="font-style:italic;color:#fc9354;">context</span><span>) </span><span style="color:#ff5e5e;">throws </span><span style="color:#fbe3bf;">Exception </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 覆盖并全局定义 afterEach
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public static </span><span style="color:#fbe3bf;">Page </span><span style="color:#8cdaff;">getPage</span><span>() {
</span><span> </span><span style="color:#ff5e5e;">return</span><span> page;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">public static </span><span style="color:#fbe3bf;">Browser </span><span style="color:#8cdaff;">getBrowser</span><span>() {
</span><span> </span><span style="color:#ff5e5e;">return</span><span> browser;
</span><span> }
</span><span>}
</span></code></pre>
<p>这样我们可以实现以下目标:</p>
<ol>
<li><strong>减少样板代码:</strong> 自动处理常见的设置和清理任务。</li>
<li><strong>一致性:</strong> 为每个测试用例确保一致的测试环境。</li>
<li><strong>资源管理:</strong> 高效管理和处理 Playwright 资源,防止资源泄漏。</li>
<li><strong>增强可读性:</strong> 简化测试类,使其更易读和维护。</li>
</ol>
<p>在现有的测试类中,你可以用 <code>PlaywrightExtension</code> 替换原本用于设置和清理的 <code>@BeforeEach</code> 和 <code>@AfterEach</code>。以下是修订后的测试类示例:</p>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">package </span><span>org;
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#fbe3bf;">extension</span><span>.</span><span style="color:#fbe3bf;">ExtendWith</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">pages</span><span>.</span><span style="color:#fbe3bf;">SearchPage</span><span>;
</span><span>
</span><span>@</span><span style="color:#e9fdac;">ExtendWith</span><span>(</span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">class</span><span>)
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">SearchTests </span><span>{
</span><span> </span><span style="color:#ff5e5e;">static </span><span style="color:#fbe3bf;">Browser </span><span>browser;
</span><span> </span><span style="color:#ff5e5e;">static </span><span style="color:#fbe3bf;">SearchPage </span><span>searchPage;
</span><span> </span><span style="color:#ff5e5e;">static </span><span style="color:#fbe3bf;">Page </span><span>page;
</span><span>
</span><span> @</span><span style="color:#e9fdac;">BeforeEach
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">createContextAndPage</span><span>() {
</span><span> </span><span style="color:#6d6d6d;">// 这里你可以从 PlaywrightExtension 访问页面
</span><span> page </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">getPage</span><span>();
</span><span> page.</span><span style="color:#e9fdac;">navigate</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.google.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> @</span><span style="color:#e9fdac;">Test
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">shouldSearch</span><span>() {
</span><span> </span><span style="color:#6d6d6d;">// 使用 SearchPage 的测试实现
</span><span> }
</span><span>
</span><span> @</span><span style="color:#e9fdac;">AfterAll
</span><span> </span><span style="color:#ff5e5e;">public static </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">tearDown</span><span>() {
</span><span> page.</span><span style="color:#e9fdac;">close</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 这里你可以从 PlaywrightExtension 访问浏览器
</span><span> </span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">getBrowser</span><span>().</span><span style="color:#e9fdac;">close</span><span>();
</span><span> }
</span><span>}
</span></code></pre>
<p>在这个例子中,<code>PlaywrightExtension</code> 处理 <code>Page</code> 和 <code>Browser</code> 实例的创建和关闭,从而简化了测试结构。</p>
<h3 id="4-shi-li-chuang-jian-sou-suo-ce-shi-lei">4. 示例:创建搜索测试类:</h3>
<p>让我们创建一个 <code>SearchTest</code> 类,使用 <code>SearchPage</code> 类测试 Google 的搜索功能:</p>
<pre data-lang="java" style="background-color:#191919;color:#f8f8f2;" class="language-java "><code class="language-java" data-lang="java"><span style="color:#ff5e5e;">package </span><span>org;
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#ff5e5e;">*</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#fbe3bf;">Test</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">junit</span><span>.</span><span style="color:#fbe3bf;">jupiter</span><span>.</span><span style="color:#fbe3bf;">api</span><span>.</span><span style="color:#fbe3bf;">extension</span><span>.</span><span style="color:#fbe3bf;">ExtendWith</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">org</span><span>.</span><span style="color:#fbe3bf;">pages</span><span>.</span><span style="color:#fbe3bf;">SearchPage</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#fbe3bf;">resources</span><span>.</span><span style="color:#fbe3bf;">config</span><span>.</span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">import static </span><span style="color:#fbe3bf;">com</span><span>.</span><span style="color:#fbe3bf;">microsoft</span><span>.</span><span style="color:#fbe3bf;">playwright</span><span>.</span><span style="color:#fbe3bf;">assertions</span><span>.</span><span style="color:#fbe3bf;">PlaywrightAssertions</span><span>.</span><span style="color:#6699cc;">assertThat</span><span>;
</span><span>
</span><span>@</span><span style="color:#e9fdac;">ExtendWith</span><span>(</span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">class</span><span>)
</span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">class </span><span style="text-decoration:underline;color:#8cdaff;">SearchTests </span><span>{
</span><span> </span><span style="color:#ff5e5e;">static </span><span style="color:#fbe3bf;">Browser </span><span>browser;
</span><span> </span><span style="color:#ff5e5e;">static </span><span style="color:#fbe3bf;">SearchPage </span><span>searchPage;
</span><span> </span><span style="color:#ff5e5e;">static </span><span style="color:#fbe3bf;">Page </span><span>page;
</span><span>
</span><span> @</span><span style="color:#e9fdac;">BeforeEach
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">createContextAndPage</span><span>() {
</span><span> page </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">getPage</span><span>();
</span><span> searchPage </span><span style="color:#ff5e5e;">= new </span><span style="color:#fbe3bf;">SearchPage</span><span>(page);
</span><span> page.</span><span style="color:#e9fdac;">navigate</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.google.com</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> @</span><span style="color:#e9fdac;">Test
</span><span> </span><span style="color:#ff5e5e;">public </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">shouldSearch</span><span>() {
</span><span> searchPage.</span><span style="color:#e9fdac;">clickCookieAcceptButton</span><span>();
</span><span> searchPage.</span><span style="color:#e9fdac;">performSearch</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Potato</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#e9fdac;">assertThat</span><span>(searchPage.</span><span style="color:#e9fdac;">getSearchField</span><span>()).</span><span style="color:#e9fdac;">containsText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Potato</span><span style="color:#ffffff;">"</span><span>);
</span><span> searchPage.</span><span style="color:#e9fdac;">navigateToImageResults</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 更多断言...
</span><span> searchPage.</span><span style="color:#e9fdac;">navigateToAllResults</span><span>();
</span><span> searchPage.</span><span style="color:#e9fdac;">navigateToVideoResults</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 更多断言...
</span><span> }
</span><span>
</span><span> @</span><span style="color:#e9fdac;">AfterAll
</span><span> </span><span style="color:#ff5e5e;">public static </span><span style="font-style:italic;color:#fbdfb5;">void </span><span style="color:#8cdaff;">tearDown</span><span>() {
</span><span> page.</span><span style="color:#e9fdac;">close</span><span>();
</span><span> </span><span style="color:#fbe3bf;">PlaywrightExtension</span><span>.</span><span style="color:#e9fdac;">getBrowser</span><span>().</span><span style="color:#e9fdac;">close</span><span>();
</span><span> }
</span><span>}
</span></code></pre>
<p>在这个例子中,<code>shouldSearch</code> 是一个使用 <code>SearchPage</code> 执行 Google 搜索的测试方法。它展示了如何使用页面对象使测试逻辑变得更加可读和简洁。</p>
<h3 id="5-shi-xian-qing-xi-ke-du-de-ce-shi-dai-ma-de-ji-qiao">5. 实现清晰可读的测试代码的技巧</h3>
<ul>
<li><strong>描述性测试名称:</strong> 为测试方法使用有意义的名称,描述测试验证的内容。</li>
<li><strong>模块化测试:</strong> 编写小型、专注的测试,每次验证应用程序的一个功能。</li>
<li><strong>可复用的 setup 和 teardown:</strong> 使用 <code>@BeforeEach</code> 和 <code>@AfterEach</code> 注解处理常见的设置和清理任务。</li>
<li><strong>断言:</strong> 包含断言以验证测试的结果,确保它们检查正确的条件。</li>
</ul>
<p>测试类是将页面类的功能整合在一起以与应用程序交互的地方。通过遵循这些指南,你可以创建不仅有效捕获 bug,而且易于阅读和维护的测试。</p>
<p>最后,为了展示到目前为止项目结构的样子:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:490/1*XVyB7XWls68tWItwqhJuhA.png" alt="图片 4" /></p>
<p>Google 搜索测试的项目结构</p>
<h2 id="di-wu-zhang-wai-bu-hua-xuan-ze-qi-he-ce-shi-shu-ju">第五章:外部化选择器和测试数据</h2>
<p><em>增强测试灵活性和维护性:管理选择器和测试数据的策略</em></p>
<p>在维护一个强大且适应性强的测试自动化框架中,高效管理选择器和测试数据至关重要。本章探讨如何在 Playwright 项目中外部化选择器和测试数据,提高灵活性并减少频繁更改代码的需求。</p>
<h3 id="1-wai-bu-hua-xuan-ze-qi-de-zhong-yao-xing">1. 外部化选择器的重要性:</h3>
<p>在测试脚本或页面类中硬编码选择器可能导致维护噩梦,尤其是当 UI 发生变化时。通过外部化这些选择器,你可以轻松更新它们,而无需更改核心测试逻辑。</p>
<h3 id="2-shi-yong-json-jin-xing-xuan-ze-qi-guan-li">2. 使用 JSON 进行选择器管理:</h3>
<p>管理选择器的一种有效方法是将它们存储在 JSON 文件中。这允许你更改选择器而无需触及 Java 代码。以下是一个例子:</p>
<p><strong>乙醇的注释 👀：这个方法我既不喜欢也不推荐。对于 java 代码来说，直接在 pom 里修改定位器是有代码提示的，比独立出来写 json 文件要好一点</strong></p>
<ul>
<li><strong>JSON 选择器文件</strong> (<code>loginSelectors.json</code>):</li>
</ul>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">usernameInput</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#username</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passwordInput</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#password</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">loginButton</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#login</span><span style="color:#ffffff;">"
</span><span>}
</span></code></pre>
<ul>
<li><strong>在页面类中读取选择器:</strong> 修改你的页面类以从这些 JSON 文件读取选择器。你可以使用 Java 的内置库或第三方库如 Jackson 或 Gson 来解析 JSON 文件。</li>
</ul>
<h3 id="3-wai-bu-hua-ce-shi-shu-ju">3. 外部化测试数据:</h3>
<p>与选择器类似,测试数据如用户名、密码或任何输入数据也应该外部化。这种做法不仅使你的测试更易读,还简化了数据管理并增强了安全性。</p>
<ul>
<li><strong>JSON 测试数据文件</strong> (<code>loginTestData.json</code>):</li>
</ul>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">validUser</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">user1</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pass123</span><span style="color:#ffffff;">"
</span><span> },
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">invalidUser</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">user2</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">wrongpass</span><span style="color:#ffffff;">"
</span><span> }
</span><span>}
</span></code></pre>
<ul>
<li><strong>在测试中使用测试数据:</strong> 在测试类中加载这些数据,并用它来驱动你的测试。这种方法对于数据驱动测试特别有用。</li>
</ul>
<h2 id="4-xuan-ze-qi-he-ce-shi-shu-ju-guan-li-de-zui-jia-shi-jian">4. 选择器和测试数据管理的最佳实践:</h2>
<ul>
<li><strong>保持组织:</strong> 以有组织的方式存储你的选择器和测试数据,最好在项目内的专用目录中。</li>
<li><strong>版本控制:</strong> 将这些 JSON 文件包含在你的版本控制系统中,以跟踪更改并维护更新历史。</li>
<li><strong>安全考虑:</strong> 对敏感数据要谨慎。对于高度敏感的数据(如真实密码),使用环境变量或安全保管库。</li>
</ul>
<p>外部化选择器和测试数据增强了测试自动化框架的可维护性和可扩展性。它允许更容易地更新和修改,使你的测试对应用程序 UI 和数据集的变化更具弹性。</p>
<h2 id="jie-lun">结论</h2>
<p><em>拥抱自动化测试的未来:关键要点和下一步</em></p>
<p>如果你想深入了解并查看完整设置,我准备的 <a href="https://github.com/mohsenny/PlaywrightWithJava">PlaywrightWithJava</a> 仓库提供了一个全面的示例,展示了本文讨论的概念。</p>
<p>在结束我们关于使用页面对象模型设置 Playwright 与 Java 的指南时,重要的是回顾关键要点 并进行讨论下一步行动。</p>
<h3 id="1-guan-jian-dian-hui-gu">1. 关键点回顾:</h3>
<ul>
<li><strong>Playwright 和 Java:</strong> 我们探索了 Playwright 与 Java 的强大组合,突出了这对组合在自动化测试中的优势。</li>
<li><strong>项目结构:</strong> 讨论了最佳的项目布局,强调了可维护性和组织性。</li>
<li><strong>页面对象模型(POM):</strong> 概述了 POM 的实现,展示了它在创建可扩展和可维护的测试脚本中的重要性。</li>
<li><strong>页面类:</strong> 我们深入研究了页面类的创建,这是 POM 的核心组件,并提供了说明其结构和功能的示例。</li>
<li><strong>测试类:</strong> 涵盖了编写有效测试类的结构和最佳实践,确保测试的清晰性和高效。</li>
<li><strong>外部化选择器和数据:</strong> 强调了外部化选择器和测试数据的重要性,突出其在增强测试灵活性和可维护性方面的作用。</li>
</ul>
<h3 id="2-gu-li-tan-suo-he-gua-ying">2. 鼓励探索和适应:</h3>
<p>web 自动化的世界广阔且不断发展。虽然本指南提供了坚实的基础,但继续探索和适应至关重要。请持续关注 Playwright、Java 和测试自动化的最新发展。尝试不同的方法和工具,找出最适合你特定需求的方式。</p>
<h2 id="3-she-qu-he-chi-xu-xue-xi">3. 社区和持续学习:</h2>
<p>与社区互动是无价的。参与论坛、参加网络研讨会,并为开源项目做贡献。这种互动促进学习,可以让你了解行业的最佳实践。</p>
<h2 id="4-xia-yi-bu">4. 下一步:</h2>
<ul>
<li><strong>集成高级功能</strong>: 探索 Playwright 和 Java 的高级功能,如处理动态内容、使用 iframe 等。</li>
<li><strong>CI/CD 集成:</strong> 考虑将你的测试集成到 CI/CD 流程中,实现自动化测试执行。</li>
<li><strong>性能和安全测试:</strong> 扩展你的测试范围,包括性能和安全方面。</li>
</ul>
<h2 id="5-zui-hou-si-kao">5. 最后思考:</h2>
<p>自动化测试是一个持续学习和改进的旅程。本指南中讨论的设置和实践只是开始。拥抱自动化测试带来的挑战和机遇,你将为 web 自动化的质量和成功做出重大贡献。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://medium.com/@mohsenny/from-setup-to-success-creating-scalable-tests-with-playwright-java-and-page-object-model-423e27ef795e">URL Source</a></p>
<p>发布时间: 2023-11-14</p>
The Definitive Guide to API Test Automation With Playwright: Part 15 - Adding Test Tags to Get Targeted Feedback
2023-11-13T00:00:00+00:00
2023-11-13T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-15-adding-test-tags-to-get-targeted-feedback/
<p>In this guide I'll cover how tags work, link to other articles where I discuss some tips on how to use tags, and show some code examples of the tags I like to use.</p>
<p>If you are just now joining us for the first time feel free to check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> and the <a href="https://github.com/playwrightsolutions/playwright-api-test-demo">playwright-api-test-demo repository</a> which in which all code examples are included.</p>
<p>The main tags I typically add to a a project include:</p>
<ul>
<li>endpoints: <code>@auth</code>, <code>@booking</code>, <code>@branding</code>, <code>@message</code>, <code>@report</code>, <code>@room</code></li>
<li>happy path tests: <code>@happy</code></li>
<li>flaky tests: <code>@unsatisfactory</code></li>
</ul>
<p>Of course you can add any type of tag you'd but these are typically the tags I've found useful for api automation suites. The official docs for tags can be found below.</p>
<p><a href="https://playwright.dev/docs/test-annotations#tag-tests">Annotations</a></p>
<p>Here is an example of a spec with tags implemented. Note I have add the <code>@auth</code> tag in the describe block which is at the highest level. This will ensure that all specs within the describe block are run when running with the command <code>npx playwright tests --grep @auth</code>. As you see in the tests below I've also included the <code>@happy</code> tag in only 1 of the specs below. My thought around this decision is to ensure the happy path from the <code>auth/login</code> endpoint I really only want to make sure that I can log in successfully as it is a critical path when I run my happy path tests. The other checks though useful are less critical.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/auth/login.post.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: POST /auth/login
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@fixtures/fixtures</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">Env </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/env</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login POST requests @auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with valid credentials @happy</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with invalid username and password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with valid username and invalid password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with invalid username and valid password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with no username and valid password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with empty body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with no body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with valid credentials then validate with token @happy</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>});
</span></code></pre>
<p>As a part of this exercise I went ahead and added a flakey test to my repository. Now I know there is lots of debate on what you should do with your flakey tests, but if you find some sort of value in them whatsoever sometimes it doesn't make sense to completely remove them from your repo, but rather put them in a bucket of tests that don't run as often. In this scenario and in my workplace, we decided on the tag <code>@unsatisfactory</code>. To me this tells me the test doesn't meet the standard expectations I have to live as a part of the repository and run on a frequent basis, but it allows me to be able to run say once a week or some other cadence, where I can dive into the results of the test and assess if the test(s) flaked out or actually uncovered an issue.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/test.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">flakey test @unsatisfactory</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">randomBoolean </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">> </span><span style="color:#fdb082;">0.5</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">randomBoolean</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span style="color:#ff5e5e;">...
</span></code></pre>
<p>To run all tests except for the <code>@unsatisfactory</code> tag we'll run our suite using the command <code>npx playwright test --grep-invert @unsatisfactory</code> which will run all the tests EXCEPT the @unsatisfactory tag. This can also be combined with the <code>--grep</code> command which we'll look at next.</p>
<p>The <a href="https://playwright.dev/docs/test-cli">command line documentation</a> provides us with insights on how to run the playwright tests from the command line. Both commands below will work</p>
<ul>
<li><code>-g @ tag</code></li>
<li><code>--grep @tag</code></li>
</ul>
<p>It's also worth noting that you can also pass in multiple tags such as if I wanted to run all the tests with the <code>@happy</code> tag and/or <code>@room</code> tag.</p>
<p><code>--grep "@happy|@room"</code></p>
<p>This article covers additional details and strategies that can be used with tags</p>
<p><a href="https://playwrightsolutions.com/run-a-subset-of-tests-with-grep-and-grep-invert-in-package-json/">How do I run a subset of tests with Playwright Test Runner using grep functionality?</a></p>
<h2 id="running-tagged-tests-from-ui-mode">Running Tagged Tests From UI Mode</h2>
<p>You are also able to run tagged tests from Playwright's UI mode. To enter ui mode run the command <code>npx playwright test --ui</code>. This will bring up a UI in which you can access all your tests along with a plethora of developer tools to help build and debug tests. In the below example I added <code>@happy</code> within the search box and pressed the<code>Enter</code> key, this will filter the tests down and then run the tests.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/image-4.png" alt="Image 5" /></p>
<h2 id="updating-package-json-with-npm-scripts">Updating package.json With npm Scripts</h2>
<p>As you can see below I've added some new npm run scripts most of which include the <code>--grep-invert @unsatisfactory</code> which we covered before and will prevent any tests that have this tagged to not run. This is useful for tagging tests that may be flaky or items you don't want running on every run, but you do want to keep the spec for documentation or to run and get feedback on an ad-hoc basis.</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span style="color:#6d6d6d;">// package.json
</span><span>
</span><span>{
</span><span> </span><span style="background-color:#f92649;color:#f8f8f0;">...</span><span>
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="background-color:#f92649;color:#f8f8f0;">...</span><span>
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test --grep-invert @unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:generate:schema</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GENERATE_SCHEMA_TRACKING_DATA=true npx playwright test --grep-invert @unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:staging</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test_env=staging npx playwright test --grep-invert @unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:local</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test_env=local npx playwright test --grep-invert @unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:happy</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test --grep @happy --grep-invert @unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:unsatisfactory</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test --grep @unsatisfactory</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test --ui</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="background-color:#f92649;color:#f8f8f0;">...</span><span>
</span><span> },
</span><span style="background-color:#f92649;color:#f8f8f0;">...</span><span>
</span><span>}
</span></code></pre>
<h2 id="updating-playwright-config-with-proper-teardown">Updating Playwright Config with proper teardown</h2>
<p>A few guides back we added a setup projects within our repository in order to create valid auth sessions and to calculate coverage and a teardown project to run after all tests were complete in order to report on any warnings within our automation suite. When implementing this, there was an error, which wasn't evident until now we try and introduce an <code>@unsatisfactory</code> tag using the <code>--grep-invert</code> command to run all tests except these. Our first implementation I was missing <code>teardown</code> within the setup project. Below you can see I've now included that, and no longer have a decency listed under teardown. The playwright docs can be found <a href="https://playwright.dev/docs/test-global-setup-teardown#teardown-example">here</a>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">...
</span><span> projects: [
</span><span> { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>, testMatch: </span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">coverage</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">setup</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">ts</span><span style="color:#ffffff;">/</span><span>, teardown: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">teardown</span><span style="color:#ffffff;">" </span><span>},
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api-checks</span><span style="color:#ffffff;">"</span><span>,
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>],
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">teardown</span><span style="color:#ffffff;">"</span><span>,
</span><span> testMatch: </span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">completion</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">teardown</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">ts</span><span style="color:#ffffff;">/</span><span>,
</span><span> },
</span><span> ],
</span><span style="color:#ff5e5e;">...
</span></code></pre>
<h2 id="introducing-bruno-for-exploring-the-api">Introducing Bruno for Exploring the API</h2>
<p>During this round of work I took some time and removed the Thunder client files and introduced the <code>bruno</code> folder for managing examples of API calls for exploratory testing. <a href="https://docs.usebruno.com/">Bruno</a> is an open source IDE for exploring and testing APIs. You can read the <a href="https://docs.usebruno.com/manifesto.html">Bruno Manifesto</a> to get a better idea of why I am swapping.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/image-3.png" alt="Image 6" /></p>
<p>What's really nice about this is the entire collection and environment files are all stored within the <code>./bruno/</code> directory on the root level. Each request is easily readable and available whenever you clone the repository.</p>
<p>All the changes discussed in this article can be found in the pull request below. There were a lot of updates where I touched each spec file and added tags appropriately.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/18/files">adding tags to suite by BMayhew</a></p>
<h2 id="wrapping-up">Wrapping up</h2>
<p>Using tags within your tests allows you to manage running different tests based on your needs. I've found the flexibility with this approach has been able to solve any problem I've faced when building out automation suites.</p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-15-adding-test-tags-to-get-targeted-feedback/</p>
<p>Published Time: 2023-11-13T13:30:17.000Z</p>
如何使用 Faker 快速创建真实数据
2023-11-06T00:00:00+00:00
2023-11-06T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-quickly-get-realistic-data-with-faker-for-playwright-tests/
<p>在测试注册流程或填写表单时,输入一个简单的"Jane Doe"很容易。但当你还需要输入电子邮件、地址,并在不同的语言环境中完成这些操作时,事情就变得复杂了。</p>
<p>当然,你可以自己创建测试数据集,但为什么不直接用代码生成呢?</p>
<p>这正是 <a href="https://fakerjs.dev/">Faker</a> 的用途:它可以生成从姓名、地址到公司名称的任何信息。它能为你的测试创造处逼真的假数据。</p>
<p>Faker 是一个 Node.js 库,所以让我们用 <code>npm install --save-dev @faker-js/faker</code> 来安装它</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker/locale/en</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">randomName </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">person</span><span>.</span><span style="color:#8cdaff;">fullName</span><span>(); </span><span style="color:#6d6d6d;">// Rowan Nikolaus
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">randomEmail </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">email</span><span>(); </span><span style="color:#6d6d6d;">// Kassandra.Haley@erich.biz
</span></code></pre>
<p>生成假数据的函数一般是按领域分组的:个人、公司、地点、日期等。</p>
<h2 id="yu-playwright-de-ji-cheng">与 Playwright 的集成</h2>
<p>在 Playwright 测试中使用 Faker 非常简单:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker/locale/en</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试应用程序</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">应该使用用户名和密码创建账户</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">userName</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">password</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">email </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">exampleEmail</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 访问网页并创建账户
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.example.com/register</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">email</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">username</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>, { exact: </span><span style="color:#ff8942;">true </span><span>}).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">confirm password</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Register</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 现在,我们尝试使用这些凭据登录
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.example.com/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">email</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Register</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 我们应该成功登录到仪表板页面
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">dashboard</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="seed-she-zhi">seed 设置</h2>
<p>每次测试运行时,你都会获得新的数据。但有时,你可能希望数据不那么随机。例如,如果你进行截图对比测试,每次值都发生变化会导致测试失败。</p>
<p><a href="https://xkcd.com/221/"><img src="https://imgs.xkcd.com/comics/random_number.png" alt="图片 1: xkcd 图像:一个返回 4 的 getRandomNumber 函数。评论说"通过公平骰子选择。保证随机"" /></a></p>
<p>梗图：不那么随机 👆</p>
<p>为了保持测试的确定性,你需要<a href="https://fakerjs.dev/api/faker.html#seed">为 Faker 的随机生成器设置 seed</a>,并在每次测试之间重置它。</p>
<p>这里有一个文件,包含一个设置了 seed 的测试(总是相同的值)和一个随机测试:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker/locale/en</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 这将在每次测试后重新为我们的 faker 实例设置种子
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#8cdaff;">seed</span><span>();
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用设置种子的 Faker 生成熊</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 用一个静态数字为我们的 faker 实例设置种子
</span><span> </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#8cdaff;">seed</span><span>(</span><span style="color:#fdb082;">123</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">animal </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">animal</span><span>.</span><span style="color:#8cdaff;">bear</span><span>();
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">animal</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">animal</span><span>).</span><span style="color:#8cdaff;">toMatchSnapshot</span><span>();
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">随机生成熊</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">animal </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">animal</span><span>.</span><span style="color:#8cdaff;">bear</span><span>();
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">animal</span><span>);
</span><span>});
</span></code></pre>
<p>让我们检查结果,这里有 3 次运行:每个浏览器一次。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#ff5e5e;">></span><span> npx </span><span style="color:#e9fdac;">playwright</span><span> test
</span><span style="color:#e9fdac;">使用</span><span> 1 个工作进程运行 6 个测试
</span><span>
</span><span> </span><span style="color:#e9fdac;">✓</span><span> 1 </span><span style="color:#ff5e5e;">[</span><span>chromium</span><span style="color:#ff5e5e;">]</span><span> › seed.spec.ts:9:1 › 使用设置种子的 Faker 生成熊 (75ms)
</span><span style="color:#e9fdac;">亚洲黑熊
</span><span> </span><span style="color:#e9fdac;">✓</span><span> 2 </span><span style="color:#ff5e5e;">[</span><span>chromium</span><span style="color:#ff5e5e;">]</span><span> › seed.spec.ts:18:1 › 随机生成熊 (65ms)
</span><span style="color:#e9fdac;">大熊猫
</span><span> </span><span style="color:#e9fdac;">✓</span><span> 3 </span><span style="color:#ff5e5e;">[</span><span>firefox</span><span style="color:#ff5e5e;">]</span><span> › seed.spec.ts:9:1 › 使用设置种子的 Faker 生成熊 (62ms)
</span><span style="color:#e9fdac;">亚洲黑熊
</span><span> </span><span style="color:#e9fdac;">✓</span><span> 4 </span><span style="color:#ff5e5e;">[</span><span>firefox</span><span style="color:#ff5e5e;">]</span><span> › seed.spec.ts:18:1 › 随机生成熊 (29ms)
</span><span style="color:#e9fdac;">美洲黑熊
</span><span> </span><span style="color:#e9fdac;">✓</span><span> 5 </span><span style="color:#ff5e5e;">[</span><span>webkit</span><span style="color:#ff5e5e;">]</span><span> › seed.spec.ts:9:1 › 使用设置种子的 Faker 生成熊 (58ms)
</span><span style="color:#e9fdac;">亚洲黑熊
</span><span> </span><span style="color:#e9fdac;">✓</span><span> 6 </span><span style="color:#ff5e5e;">[</span><span>webkit</span><span style="color:#ff5e5e;">]</span><span> › seed.spec.ts:18:1 › 随机生成熊 (27ms)
</span><span style="color:#e9fdac;">眼镜熊
</span><span>
</span><span> </span><span style="color:#e9fdac;">6</span><span> 个测试通过 (2.5s)
</span></code></pre>
<p>如你所见,<code>使用设置种子的 Faker 生成熊</code>这个用例是截图对比的测试用例。它顺利通过,并且在之后的每次运行中都会通过。控制台输出始终是<code>亚洲黑熊</code>。</p>
<p><code>随机生成熊</code>的控制台输出在每次测试运行时的结果都不一样。这是因为每次测试后,我们都重置了 Faker 的种子。</p>
<p>你可以在 Faker 的文档中的<a href="https://fakerjs.dev/guide/usage.html#reproducible-results">可重现结果</a>部分查看更多详情。</p>
<h2 id="zong-jie">总结</h2>
<p>Faker 是一个方便的库,用于生成假的但是看起来又很真实的数据。我们已经了解了它的基本用法,以及如何将其添加到我们的测试中,而且还知道了可以通过设置 seed 来控制随机性。事实证明,Faker 与 Playwright Test 一起使用非常简单!</p>
<hr />
<p>嗨!我是 Jean-François,我是一名前端技术主管。我帮助团队在提高敏捷性和技术卓越性。我对软件工程和测试感兴趣。
你可以在 <a href="https://jfgreffier.com/">https://jfgreffier.com</a> 找到我</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/how-to-quickly-get-realistic-data-with-faker-for-playwright-tests/</p>
<p>发布时间: 2023-11-06T13:30:29.000Z</p>
Playwright真实项目里哪些断言使用频率比较高
2023-11-03T00:00:00+00:00
2023-11-03T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/statistics-of-assertions-in-playwright-test-suite/
<h2 id="guan-yu-ce-shi-xiang-mu-de-jie-shao">关于测试项目的介绍:</h2>
<p>我的测试项目是一个现代的客户端-服务器应用程序。后端（API）单独测试。前端（基于 React）充满了业务逻辑，拥有多模式界面：</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*qAP8yJixSvKffSdElE3bBQ.png" alt="图片 3: UI 设计图" /></p>
<p>⬆️UI 设计图；<a href="https://www.esa.int/ESA_Multimedia/Images/2006/12/Location_of_buried_basins_detected_by_MARSIS">背景图片来源</a></p>
<p>自动化测试覆盖了超过 80%的功能，是回归测试的主要组成部分。</p>
<h2 id="playwright-ce-shi-tao-jian-bao-gua">Playwright 测试套件包括:</h2>
<ul>
<li><strong>103 个测试文件；</strong></li>
<li><strong>955 个测试；</strong></li>
<li><strong>601</strong> 个 <a href="https://playwright.dev/docs/api/class-playwrightassertions#playwright-assertions-expect-generic">expect</a> <strong>方法</strong>（在 97 个测试文件中）；</li>
<li>其中有 50 个负向检查（断言在匹配器之前有 <code>.not</code>）~ 8.5%的 <code>expect</code> 是负向的；</li>
<li>页面对象模型中没有断言，但有 <strong>185 个等待定位器的 <code>awaits</code></strong>；</li>
<li>在 <code>beforeAll</code> 或 <code>afterAll</code> 钩子中没有断言（见<a href="https://medium.com/@adequatica/principles-of-writing-automated-tests-a2b72218264c#6da4">自动化测试编写原则第 2 条</a>）；</li>
<li>所有断言都是可执行的（测试中没有 if 语句，见<a href="https://medium.com/@adequatica/principles-of-writing-automated-tests-a2b72218264c#8fbe">自动化测试编写原则第 7 条</a>）；</li>
<li>没有<a href="https://playwright.dev/docs/test-assertions#soft-assertions">软断言</a>；</li>
<li>所有测试在 CI 中以 4 个线程运行，耗时 14 分钟。</li>
</ul>
<p>我需要一些澄清：我在页面对象中使用 <a href="https://playwright.dev/docs/api/class-locator#locator-wait-for">waitFor()</a> 方法等待定位器的特定状态，这<em>可以被视为一种断言</em>，因为如果定位器不满足条件，测试将失败。这就是为什么有些测试（测试文件）可能没有 <a href="https://playwright.dev/docs/api/class-playwrightassertions">expect</a> <a href="https://playwright.dev/docs/api/class-playwrightassertions">断言</a>，因为它们仅包含具有 <code>waitFor()</code> 的页面对象，如下所示：</p>
<p>页面对象示例：</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>Dungeon {
</span><span>
</span><span style="color:#ff5e5e;">private </span><span style="color:#e9fdac;">gemstone</span><span style="color:#ff5e5e;">: </span><span>Locator;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">gemstone </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.mineral_crystal</span><span style="color:#ffffff;">'</span><span>);
</span><span> }
</span><span>
</span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">waitForGem</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">visibleState</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">boolean</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>> {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">gemstone</span><span>.</span><span style="color:#8cdaff;">first</span><span>().</span><span style="color:#8cdaff;">waitFor</span><span>(</span><span style="color:#e9fdac;">state</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">'</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<p>测试示例：</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Should have a gem</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">dungeon </span><span style="color:#ff5e5e;">= new </span><span>Dungeon(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dungeon</span><span>.</span><span style="color:#8cdaff;">waitForGem</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span>});
</span></code></pre>
<p>这就是为什么我将 <code>waitFor()</code> 添加到断言的 top 列表中，与<a href="https://playwright.dev/docs/api/class-genericassertions">通用断言</a>一起。</p>
<h2 id="top-duan-yan-lie-biao">top 断言列表:</h2>
<ol>
<li><code>.toBe</code>— 328</li>
<li><code>waitFor()</code> — 185</li>
<li><code>.toStrictEqual</code> — 67</li>
<li><code>.toContain</code> — 54</li>
<li><code>.toEqual</code> — 39</li>
<li><code>.toHaveURL</code> — 34</li>
<li><code>.toHaveAttribute</code> — 22</li>
<li><code>.toBeChecked</code> — 15</li>
<li><code>.toHaveClass</code> — 14</li>
<li><code>.toBeGreaterThanOrEqual</code> — 10</li>
<li><code>.toBeNull</code> — 6</li>
<li><code>.toMatch</code> — 4</li>
<li><code>.toBeTruthy</code> — 4</li>
<li><code>.toBeGreaterThan</code> — 2</li>
<li><code>.toBeFalsy</code> — 2</li>
</ol>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*9rDEfHvlV90Q2hyajQsnDQ.png" alt="图片 4: 断言顶部列表" /></p>
<p>👆top 断言列表: <code>expect</code> + <code>waitFor()</code></p>
<p>结果非常令人期待：</p>
<ul>
<li><strong>60%以上</strong> — 检查数据是否有某个值；</li>
<li>大约四分之一 — 等待某些东西（定位器/文本）；</li>
<li>剩下的 10–15% — URL/标题匹配，罕见的 CSS 属性检查等。</li>
</ul>
<p>这与我之前参与的项目非常相似。</p>
<p>阅读更多关于 Playwright 断言的信息：<a href="https://playwright.dev/docs/test-assertions">断言</a>。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://adequatica.medium.com/statistics-of-assertions-in-playwright-test-suite-9e464866982d">URL Source</a></p>
<p>发布日期: 2023-11-03</p>
如何让Playwright 视觉回归测试稳定运行不出错
2023-10-31T00:00:00+00:00
2023-10-31T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/fix-flaky-playwright-visual-regression-tests/
<p>我们在流水线中使用视觉回归测试，以确保我们即将发布的代码没有意外更改任何视觉内容。我们通过使用 Playwright 的截图功能捕获页面并上传到 <a href="https://percy.io/">Percy</a> 来实现这一目标。我们选择 Percy 而不是 Playwright 内置的 <a href="https://playwright.dev/docs/test-snapshots">截图比较方案</a>，因为我们喜欢一个简单直观的用户界面来查看差异。如果 主干代码 和我们提交的更改之间有差异，我们会得到一个这样的视图，如果满意的话可以进行审核和批准：</p>
<p><img src="https://www.houseful.blog/gifs/visual-test-percy-diff.gif" alt="Image 1: Visual regression test in Percy" /></p>
<p>这已被证明是我们测试工具中的一个非常有价值的工具。然而，视觉测试通常很难保持稳定。这是因为运行在客户端的代码往往并不简单——我们要应对异步触发的脚本、行为不一致的第三方脚本、加载状态、动画、模态框等各种复杂情况。这种复杂性可能导致不稳定和“容易失败”的测试运行结果。</p>
<p>为了让测试用例可以合理的应对我们的更改有，它们需要稳定。如果测试用例老是误报错误，那么开发人员可能会忽略它们，并盲目的把流程转到下一步，这将使它们在流水线中运行的目的失去意义。</p>
<p>在 <a href="https://www.altosoftware.co.uk/">Alto</a>，我们目前捕获大约 200 张截图，并且这个列表会随着时间的推移而增长。虽然大多数截图是稳定的，但我们发现有一些是非常容易失败的。我们最近花时间解决这些测试问题，使它们稳定，并重建对我们视觉测试的信任。</p>
<h2 id="mock-mock-mock-mo-ni-mo-ni-mo-ni">mock, mock, mock(模拟、模拟、模拟)</h2>
<p>这是一个很好的起点——不要依赖数据库/api 服务提供的数据进行视觉测试。你的应用程序需要在视觉上保持一致，才能使截图比较产生意义，所以我们需要一致的数据集。</p>
<p>我们使用 <a href="https://mswjs.io/">Mock Service Worker</a> 来模拟：</p>
<ul>
<li>api 响应</li>
<li>用户配置文件</li>
<li>feature toggle(功能的开关)</li>
</ul>
<p>我们选择 Mock Service Worker 是因为我们希望在整个技术栈中使用相同的 mock 技术，不过 Playwright 也有内置的 <a href="https://playwright.dev/docs/mock">API mock</a>，也可以用于同样的目的。</p>
<p>除了数据模拟，考虑你依赖的浏览器功能。例如，对于日期，我们使用 <a href="https://github.com/microsoft/playwright/issues/6347#issuecomment-1085850728">这个工具</a> 来模拟它。</p>
<h2 id="li-yong-deng-dai">利用等待</h2>
<p>在进行截图之前，请使用 Playwright 的 <code>waitFor</code>。<code>waitFor</code> 的默认状态是 <code>visible</code>，所以在这个例子中，我们知道标题在进行截图之前是可见的：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">heading</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">My Heading</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#8cdaff;">waitFor</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">myapp/foo-bar.png</span><span style="color:#ffffff;">"</span><span>,
</span><span> fullPage: </span><span style="color:#ff8942;">true</span><span>,
</span><span>});
</span></code></pre>
<p>如果在拍摄截图之前需要运行某些异步操作，你可以等待其视觉状态的变化。在下面的例子中，我们希望确保加载的转菊花从视图中隐藏，并且我们的图像在截图之前是可见的。这确保页面在捕获之前处于正确的状态：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 等待菊花隐藏
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">loading-spinner</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">waitFor</span><span>({
</span><span> state: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">hidden</span><span style="color:#ffffff;">"</span><span>,
</span><span>});
</span><span style="color:#6d6d6d;">// 等待图像可见
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByAltText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">My Image</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">waitFor</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">myapp/foo-bar.png</span><span style="color:#ffffff;">"</span><span>,
</span><span> fullPage: </span><span style="color:#ff8942;">true</span><span>,
</span><span>});
</span></code></pre>
<h2 id="bu-huo-ni-xu-yao-de-nei-rong">捕获你需要的内容</h2>
<p>我们注意到在较小的设备尺寸上，当内容显示在模态框中时会出现不稳定情况。它会在不同的地方打开。以下面的例子为例：</p>
<p><img src="https://www.houseful.blog/img/reeVg1wBML-383.jpeg" alt="Image 2: A modal appearing over a page" /></p>
<p>这会引起用例错误导致误报，因为模态框中的所有元素都处于稍微不同的位置。我们问自己，我们在这里试图测试什么？我们已经在点击模态框之前捕获了页面，所以有价值的是模态框的内容。我们的方法是只截图模态框：</p>
<p><img src="https://www.houseful.blog/img/zWNN3UMh8s-312.jpeg" alt="Image 3: The contents of a modal" /></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">My element</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">myapp/foo-bar.png</span><span style="color:#ffffff;">"</span><span>,
</span><span>});
</span></code></pre>
<p>这种方法一直很稳定，并且仍然捕获了足够的信息，使我们对频繁的代码修改保持有信心，因为我们的测试用例是可靠的。</p>
<h2 id="yin-cang-zu-zhi-di-san-fang">隐藏/阻止第三方</h2>
<p>第三方脚本可能是不可预测且难以测试的。它们在不同的时间点触发，延迟页面加载和交互。回到我们的“捕获你需要的内容”的方法——如果我们有一个嵌入的第三方地图，它在一个 <code>iframe</code> 中加载——我们不能信心满满的等待其内容加载，因为第三方代码运行在自己的 document 元素中，并且也容易受到选择器、样式、功能等任何变化的影响。这也不是我们的应用程序代码。在这种情况下，为了让我们的测试更加稳定，我们可以选择屏蔽它：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">myapp/foo-bar.png</span><span style="color:#ffffff;">"</span><span>,
</span><span> fullPage: </span><span style="color:#ff8942;">true</span><span>,
</span><span> mask: </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#map</span><span style="color:#ffffff;">"</span><span>),
</span><span>});
</span></code></pre>
<p><img src="https://www.houseful.blog/img/cZxyNokaS--414.jpeg" alt="Image 4: A modal appearing over a page" /></p>
<p>我们仍然可以看到它占据的空间，但我们不会截图这部分的具体内容。</p>
<p>另一种方法是阻止第三方脚本的触发。如果你有 google 或者百度分析、google tag 等类似的异步脚本——任何不属于视觉测试的东西，直接屏蔽掉 👍！</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 在访问页面之前阻止谷歌地图
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">googletagmanager</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">com</span><span style="color:#ffffff;">/</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#6699cc;">abort</span><span>());
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://yourapplication.com</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<h2 id="jin-yong-dong-hua">禁用动画</h2>
<p>动画如过渡可能是不可预测的测试对象，幸运的是我们可以传递 <code>animations: 'disabled'</code> 给我们的截图，“有限的动画会快速前进到完成状态，因此它们会触发 transitionend 事件。无限动画会取消到初始状态，然后在截图后重新播放。”（<a href="https://playwright.dev/docs/api/class-elementhandle#element-handle-screenshot-option-animations">来源</a>）。很简单！</p>
<h2 id="chrome-quan-ye-mian-jie-tu-cuo-wu">Chrome 全页面截图错误</h2>
<p>我们注意到在某些全页面截图中出现了一些奇怪的行为，图像会被裁剪：</p>
<p><img src="https://www.houseful.blog/img/ObdrN_-RVl-365.jpeg" alt="Image 5: A modal appearing over a page" /></p>
<p>我们得出结论，这很可能是由于 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=760596">这个 Chromium 的 bug</a>，可惜的是它被标记为“不会修复”。我们采用了在截图之前滚动页面长度的方法（如<a href="https://github.com/microsoft/playwright/issues/620#issuecomment-578022596">这里</a> 所建议）来处理截图裁剪问题：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 工具方法
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">scrollFullPage </span><span style="color:#ff5e5e;">= async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await new </span><span>Promise(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">resolve</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">totalHeight </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">distance </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">100</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">timer </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">setInterval</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">scrollHeight </span><span style="color:#ff5e5e;">= </span><span>document.body.</span><span style="color:#e9fdac;">scrollHeight</span><span>;
</span><span> window.</span><span style="color:#6699cc;">scrollBy</span><span>(</span><span style="color:#fdb082;">0</span><span>, </span><span style="color:#e9fdac;">distance</span><span>);
</span><span> </span><span style="color:#e9fdac;">totalHeight </span><span style="color:#ff5e5e;">+= </span><span style="color:#e9fdac;">distance</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">totalHeight </span><span style="color:#ff5e5e;">>= </span><span style="color:#e9fdac;">scrollHeight</span><span>) {
</span><span> </span><span style="color:#6699cc;">clearInterval</span><span>(</span><span style="color:#e9fdac;">timer</span><span>);
</span><span> </span><span style="color:#8cdaff;">resolve</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> }
</span><span> }, </span><span style="color:#fdb082;">100</span><span>);
</span><span> });
</span><span> });
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// 首先滚动页面
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">scrollFullpage</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// 然后截图
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">myapp/foo-bar.png</span><span style="color:#ffffff;">"</span><span>,
</span><span> fullPage: </span><span style="color:#ff8942;">true</span><span>,
</span><span>});
</span></code></pre>
<p>这种方法虽然感觉仍然没有必要，但已经产生了一致的结果。</p>
<h2 id="jian-li-wen-ding-xing-wen-hua">建立稳定性文化</h2>
<p>一旦我们对测试的稳定性感到满意，我们需要保持这种状态，所以我们实施了零易碎政策。这意味着，如果发现一个容易失败的视觉测试，它需要立即修复或用 <a href="https://playwright.dev/docs/api/class-test#test-fixme-1">fixme</a> 标记，直到工程师可以去修复它。这帮助我们维护了一套稳定的测试用例，并确保我们的工程师始终信任回归测试的结果。我们采用这种策略，因为对我们来说，不测试反而比天天运行容易失败的用例要好，测试用例不稳定，还不如不运行。</p>
<h2 id="jie-lun">结论</h2>
<p>这些只是我们保持视觉测试稳定运行的几个小方法。视觉回归很难做到绝对正确，有很多异常情况，并且很容易变得不稳定。然而，一旦你的测试套件表现的很好，你的开发就有信心对代码进行足够多的修改，并准确的知道用户最终会看到什么。 这就是我们拥有自动化测试的整个目的。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://www.houseful.blog/posts/2023/fix-flaky-playwright-visual-regression-tests/">URL 来源</a></p>
Hex是什么鬼, 我该怎么用playwright去检查控件的颜色
2023-10-30T00:00:00+00:00
2023-10-30T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/what-the-hex-or-how-i-check-colors-with-playwright/
<p><img src="https://playwrightsolutions.com/content/images/2023/10/2023-10-29_11-28-26-1.jpg" alt="图片2" /></p>
<p>别担心，这不是一个你必须在红色和蓝色之间选择的《黑客帝国》场景。我是一个视觉型的人，用图表、图片或者更好的面部表情来解释事情对我来说更容易。由于互联网还没有准备好展示我的面部表情，让我们用图片来说明。</p>
<p>在运行我的登录检查时，Playwright 做得非常好。它使用我们的数据测试 ID 找到“登录”按钮并点击它。然而，我正在开发的应用程序允许终端用户自定义颜色，这意味着管理员可以更改按钮和背景的颜色。这不是我每次发布都想测试的事情，所以我必须测试一下 Playwright 的能力。我能否用 Playwright 轻松检查按钮的颜色？还是最终不得不使用 JavaScript 去搞定？</p>
<p>事实证明，您可以检查按钮的颜色。只需使用 <code>.toHaveCSS()</code> <a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-css">(官方文档链接)</a></p>
<p>当然，我不会只给你上面的链接然后祝你好运。让我们一起为按钮写一个断言。</p>
<p>一切都从检查你想要检查颜色的元素开始。在我们的例子中，这是“登录”按钮，这是它在开发者工具中的样子：</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/2023-10-29_12-01-45.jpg" alt="图片3" /></p>
<p>当您点击元素时，会发现很多 CSS 属性。这里有一个有用的技巧：使用右侧样式标签中的搜索框并输入“background”或“color”以过滤出您需要的特定属性。</p>
<p>如您所见，在此示例中，背景色不仅是蓝色，而是“#031df4”。这是该特定颜色的<strong>十六进制</strong>代码。<br />
<em>❤️ 如果你现在有点迷茫，你可以简单地搜索“十六进制颜色代码解释”，然后回来更好地理解。</em></p>
<p>根据文档，我们有我们需要的一切：</p>
<ul>
<li>locator（登录按钮）</li>
<li>CSS 属性名称（<code>background-color</code>）</li>
<li>CSS 属性值（<code>#031df4</code>）。</li>
</ul>
<p>让我们编写检查并运行它：</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/2023-10-29_13-29-33.jpg" alt="图片4" /></p>
<p>将十六进制颜色代码传递给 <code>.toHaveCSS()</code></p>
<p>它失败了，因为 <code>.toHaveCSS()</code> 期望你传递特定格式的 RGB 颜色作为<code>background-color</code>。<br />
<em>❤️ 如果你现在有点迷茫，你可以简单地搜索“RGB 颜色代码解释”，并且也许“RGB vs hex”以更好地理解。</em></p>
<p>你需要将十六进制颜色代码转换为 RGB 颜色代码。快速搜索搜索后，我找到了一个不需要使用库的简单解决方案：</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">convertHexToRGB</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">hex</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 如果输入中包含 '#'，则将其删除
</span><span> </span><span style="color:#e9fdac;">hex </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">hex</span><span>.</span><span style="color:#6699cc;">replace</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#ff5e5e;">^</span><span style="color:#fbe3bf;">#</span><span style="color:#ffffff;">/</span><span>, </span><span style="color:#ffffff;">""</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 将十六进制值解析为单独的 R、G 和 B 值
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">red </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">parseInt</span><span>(</span><span style="color:#e9fdac;">hex</span><span>.</span><span style="color:#6699cc;">substring</span><span>(</span><span style="color:#fdb082;">0</span><span>, </span><span style="color:#fdb082;">2</span><span>), </span><span style="color:#fdb082;">16</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">green </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">parseInt</span><span>(</span><span style="color:#e9fdac;">hex</span><span>.</span><span style="color:#6699cc;">substring</span><span>(</span><span style="color:#fdb082;">2</span><span>, </span><span style="color:#fdb082;">4</span><span>), </span><span style="color:#fdb082;">16</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">blue </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">parseInt</span><span>(</span><span style="color:#e9fdac;">hex</span><span>.</span><span style="color:#6699cc;">substring</span><span>(</span><span style="color:#fdb082;">4</span><span>, </span><span style="color:#fdb082;">6</span><span>), </span><span style="color:#fdb082;">16</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 以对象形式返回 RGB 值
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> red: </span><span style="color:#e9fdac;">red</span><span>,
</span><span> green: </span><span style="color:#e9fdac;">green</span><span>,
</span><span> blue: </span><span style="color:#e9fdac;">blue</span><span>,
</span><span> };
</span><span>}
</span></code></pre>
<p>将十六进制转换为 RGB</p>
<p>我将其保存到我的 <code>./lib</code> 文件夹中，然后导入到规范文件中：</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/2023-10-29_13-25-50.jpg" alt="图片5" /></p>
<p>将十六进制转换为 RGB -> console.log(RGB 颜色) -> 在 <code>.toHaveCSS()</code> 检查中使用 RGB 颜色</p>
<p>测试通过了！现在，我有一个检查，以确保按钮的颜色正是我期望的。我还添加了对禁用按钮的检查。这样，如果禁用按钮的代码发生变化，我将是第一个知道的人。（注意：在我的应用程序中，禁用按钮没有使用<code>background-color</code>属性，而是使用<code>color</code>属性，因此始终要勤勉并首先手动检查属性。）</p>
<p>如果您在一个规范文件中有多个 <code>.toHaveCSS()</code> 断言，最好将它们抽象到您的“./lib”文件夹（或您保留固定装置的任何地方）中，以提高代码的可读性。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>export async function checkColor(element, cssProperty, rgbColors) {
</span><span> await expect(element).toHaveCSS(cssProperty, `rgb(${rgbColors.red}, ${rgbColors.green}, ${rgbColors.blue})`);
</span><span>}
</span></code></pre>
<p>将断言移到 ./lib 文件夹中</p>
<p>最后，这是一个颜色检查如何在使用页面对象模式、抽象的 <code>convertHexToRGB()</code> 和 <code>checkColor()</code> 的规范文件中显示的示例：</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/2023-10-29_13-37-29.jpg" alt="图片6" /></p>
<hr />
<p><img src="https://playwrightsolutions.com/content/images/2023/10/checkingcolor.png" alt="图片7" /></p>
<h2 id="lai-yuan">来源</h2>
<p><strong>来源链接</strong>: <a href="https://playwrightsolutions.com/what-the-hex-or-how-i-check-colors-with-playwright/">What the Hex, or How I Check Colors With Playwright</a></p>
<p><strong>发布时间</strong>: 2023-10-30</p>
playwright如何修复 apiRequestContext.fetch报错:context disposed
2023-10-23T00:00:00+00:00
2023-10-23T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-fix-apirequestcontext-fetch-request-context-disposed/
<p>在工作中进行自动化测试时,我发现在使用 <code>await page.route()</code> (<a href="https://playwright.dev/docs/api/class-route">文档</a>)功能时,测试中经常出现以下两个错误:</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>错误: apiRequestContext.fetch: Request context disposed
</span><span>错误: apiRequestContext.fetch: Browser has been closed
</span><span>
</span><span>还送了个错误
</span><span>1 error was not a part of any test, see above for details
</span></code></pre>
<p>这种情况通常发生在页面中有一个或一组网络请求,而测试在 API 请求完成前就结束了。</p>
<h2 id="fu-xian-wen-ti">复现问题</h2>
<p>我有一个例子,大约每 10 次运行就能复现一次。如果你想看到失败情况,可以下载代码库并运行以下命令:</p>
<p><code>npx playwright test tests/checkout/checkoutWithRoute.spec.ts --repeat-each 20</code></p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com">代码在这里</a></p>
<p>这个测试的代码如下。请注意,我没有添加任何断言,因为我用这个例子来验证一个可以解决上述错误的方案。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// checkoutWithRoute.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">HomePage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">UI与API路由</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">检查已释放的api上下文</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.practicesoftwaretesting.com/products?**</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">fetch</span><span>(</span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">request</span><span>());
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">responseBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">homePage </span><span style="color:#ff5e5e;">= new </span><span>HomePage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<p>测试报告中错误的示例 👇</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/image-2.png" alt="Image 3" /></p>
<p>这种情况发生的原因是,即使测试已经运行完毕,网络请求仍未完成。一般情况下这种错误并不会发生,但如果你正在路由多个请求,或者应用程序正在获取大量数据,这种情况就非常有可能发生。</p>
<h2 id="fang-zhi-huo-xiu-fu-zhe-xie-cuo-wu-de-ji-qiao">防止或修复这些错误的技巧</h2>
<h3 id="jian-cha-ce-shi-wen-jian-zhong-de-await-yu-ju">检查测试文件中的 await 语句</h3>
<p>首先,确保你已正确地"await"了所有浏览器或网络交互,例如:<code>await homePage.goto()</code>。如果你没有正确地等待这些操作,可能会在测试结束时出现这些错误,或者在不同的地方出现错误,这取决于哪些操作仍在进行。</p>
<h3 id="shi-yong-waitforresponse">使用 waitForResponse()</h3>
<p>接下来,在测试结束前使用<code>await page.waitForResponse()</code>(<a href="https://playwright.dev/docs/api/class-page#page-wait-for-response">文档</a>)函数,以确保所有网络流量都已响应。看下面的例子,现在这个测试永远不会因为网络连接仍然打开而失败。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// checkoutWithRoute.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">HomePage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">UI与API路由</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">检查已释放的api上下文</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.practicesoftwaretesting.com/products?**</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">fetch</span><span>(</span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">request</span><span>());
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">responseBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">homePage </span><span style="color:#ff5e5e;">= new </span><span>HomePage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForResponse</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.practicesoftwaretesting.com/products?**</span><span style="color:#ffffff;">"
</span><span> );
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="shi-lu-you-geng-jia-ju-ti">使路由更加具体</h3>
<p>在我工作的代码库中,我们有一个报告页面,它获取所有支付信息,最终会路由超过 10 个匹配以下模式的 API 调用:</p>
<p><code>await page.route("**/payment-intents?**", ...</code></p>
<p>一个解决方案是使我的路由更加详细,不使用正则表达式匹配,比如这样。对于我测试中的断言,我实际上只需要加载前 25 个请求。限制通过 page.route()路由的请求数量应该可以帮助解决这类问题。</p>
<p><code>await page.route("**/payment-intents?offset=0&limit=25", ...</code></p>
<h2 id="zong-jie">总结</h2>
<p>总的来说,这些错误可能很难排查和解决,主要是因为我们测试的系统的网络时序问题。如果你有其他处理这些问题的技巧或窍门,请在 LinkedIn 上联系我,告诉我!</p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在<a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a>上联系我,或者考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想在收件箱里收到更多内容,请在下方订阅,别忘了留下 ❤️ 表示支持。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/how-to-fix-apirequestcontext-fetch-request-context-disposed/</p>
<p>发布时间: 2023-10-23T12:30:01.000Z</p>
playwright的各种规范
2023-10-20T00:00:00+00:00
2023-10-20T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-standards/
<p>Houseful 业务中的多个团队使用 Playwright 进行前端测试自动化。在构建我们的 Playwright 框架时,我们的目标是让代码易于阅读、维护和调试。为了帮助我们实现这一目标,我们作为一个团队共同努力,在使用 Playwright 的各个代码库中创建了统一的测试规范。</p>
<p>在各个代码库中统一测试标准为我们在可读性、可用性和准入门槛方面提供了好处。例如:</p>
<ul>
<li>
<p>提高可重用性 - 函数 / 定位器 / 共享步骤 / 其他测试代码可以轻松重用。对于在测试中工作的人来说,找到他们需要的函数和元素很简单。这减少了重复,并降低了代码审查开始后需要重新修改的可能性。</p>
</li>
<li>
<p>简化 review - 代码可以更快地被 review。它减少了审查代码的心理负担,因为你可以轻松弄清楚测试代码在做什么。</p>
</li>
<li>
<p>加快入职 - 命名约定帮助新人快速入职并感到舒适地为代码库做贡献。</p>
</li>
</ul>
<p>以下是我们在 Houseful 创建 Playwright 测试时遵循的测试规范和指南。</p>
<h2 id="playwright-zhi-nan">Playwright 指南</h2>
<h3 id="duan-dao-duan-ce-shi-zhong-de-shu-ju-chuang-jian">端到端测试中的数据创建</h3>
<p>运行端到端(e2e)测试成本很高。它们在资源方面成本高昂,可能需要大量精力来设置,并且对流程中任何地方的微小变化敏感,这可能使它们变得脆弱(容易报错)且难以长期维护。在选择这条路之前,请考虑其他选项。</p>
<p>如果你必须进行 e2e 测试:</p>
<p>好的做法 👍</p>
<ul>
<li>每个测试都有自己的数据创建。即它创建完成检查所需的所有数据</li>
<li>每个测试都有一个后置步骤,即清理数据</li>
</ul>
<p>不好的做法 ⚔️</p>
<ul>
<li>依赖现有数据来执行测试</li>
<li>在测试后留下未清理的状态</li>
</ul>
<h3 id="ye-mian-dui-xiang-mo-xing-pom">页面对象模型 (POM)</h3>
<p>每个页面都应该有一个相应的 <a href="https://playwright.dev/docs/pom">POM 文件</a> 来帮助我们测试的可维护性和可扩展性。POM 文件应包含和给出 POM 相关的所有选择器和函数。</p>
<p>所有交互都应通过页面对象完成,即测试用例中不应包含选择器。</p>
<p>所有断言都应在你的测试中完成,即 POM 中不应包含断言。(<strong>乙醇的评论:👀 这点见仁见智，很多时候 pom 中可能会出现一些保护性的等待断言，比如等待某个元素出现，如果不出现整个测试就失败了</strong>)</p>
<p>你可以在我们关于 <a href="https://zoopla.blog/posts/2023/test-framework-migration/">软件测试设计模式</a> 的博客中阅读更多关于我们如何利用 POM 的内容</p>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// POM 文件 './pom/foo'
</span><span style="color:#6d6d6d;">// 添加与页面相关的所有定位器和函数。
</span><span style="color:#6d6d6d;">// 允许所有测试重用
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Locator</span><span>, </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>FooPage {
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">page</span><span style="color:#ff5e5e;">: </span><span>Page;
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">pageTitle</span><span style="color:#ff5e5e;">: </span><span>Locator;
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">buttonFoo</span><span style="color:#ff5e5e;">: </span><span>Locator;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">constructor</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>;
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">pageTitle </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=My Page</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">buttonFoo </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=Foo</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">// tests/foo.spec.ts
</span><span style="color:#6d6d6d;">// 调用 POM 以使用定位器和函数
</span><span style="color:#6d6d6d;">// 执行测试所需的所有断言
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">FooPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pom/foo</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">fooPage</span><span style="color:#ff5e5e;">: </span><span>FooPage;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">显示 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">fooPage </span><span style="color:#ff5e5e;">= new </span><span>FooPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<p>不好的做法 ⚔️</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// tests/foo.spec.ts
</span><span style="color:#6d6d6d;">// 直接在测试中包含定位器
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Locator</span><span>, </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">显示 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=Foo</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=My Page</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="ce-shi-jie-gou-arrange-act-assert">测试结构 - Arrange, Act, Assert</h3>
<p>在构建测试时遵循 AAA (Arrange, Act, Assert) 模式。在大多数情况下,Arrange 步骤可以包含在 Before 块中。</p>
<p>考虑添加注释以提高可读性。</p>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// 安排,创建一个 let 属性
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createProperty</span><span>();
</span><span>
</span><span style="color:#6d6d6d;">// 执行,提出一个收费
</span><span>
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">raiseCharge</span><span>();
</span><span>
</span><span style="color:#6d6d6d;">// 断言,确认收费已提出
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">charge</span><span>).</span><span style="color:#8cdaff;">ToBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">raised</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<h3 id="linter">Linter</h3>
<p>安装并使用 linting 规则。我们使用 <a href="https://www.npmjs.com/package/eslint-plugin-playwright">eslint-playwright-plugin</a></p>
<p>推荐的配置将有助于执行本博文中描述的一些指南。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> install</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> eslint-plugin-playwright
</span></code></pre>
<h3 id="bi-mian-tiao-jian-yu-ju">避免条件语句</h3>
<p>避免在测试文件中使用条件逻辑。测试应该是确定性的,这意味着我们应该目标是拥有明确预期结果的测试。带有条件语句的测试可能难以维护和阅读。此外,除非你绝对确定应用程序的状态在进行断言时已经稳定,否则这类测试可能会不稳定。</p>
<p>有条件语句可能是一个测试用例做了太多事情的迹象,可以被拆分。</p>
<p>不好的做法 ⚔️</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">FooPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pom/foo</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">fooPage</span><span style="color:#ff5e5e;">: </span><span>FooPage;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">条件测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">fooPage </span><span style="color:#ff5e5e;">= new </span><span>FooPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">isButtonVisible </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#8cdaff;">isVisible</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">isButtonVisible</span><span>) {
</span><span> </span><span style="color:#6d6d6d;">// 如果 buttonFoo 可见,点击它使 pageTitle 可见
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 然后检查 pageTitle 是否可见
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">pageTitle</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 否则只检查 pageTitle 是否可见
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">pageTitle</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> }
</span><span> });
</span><span>});
</span></code></pre>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// 为每个场景有单独的规范。
</span><span style="color:#6d6d6d;">// 包含需要达到该状态的设置步骤
</span><span>
</span><span style="color:#6d6d6d;">// fooPageVisible.spec.js
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 最初是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 设置你的测试,使 bar 最初可见
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言 bar 是可见的
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">pageTitle</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// fooBarButton.spec.js
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">FooPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pom/foo</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">fooPage</span><span style="color:#ff5e5e;">: </span><span>FooPage;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">点击 Foo 按钮后 bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 设置你的测试,使按钮最初可见
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 执行按钮操作
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言 bar 是可见的
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">pageTitle</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<h3 id="deng-dai">等待</h3>
<p>不要使用任何任意的等待。这可能导致不稳定的测试,因为你很少能确定等待时间是否足够。它还可能不必要地增加测试运行时间。相反,尝试:</p>
<ul>
<li>使用 Playwright 的 <a href="https://playwright.dev/docs/api/class-page#page-event-dom-content-loaded">waitUntil: 'domcontentloaded'</a></li>
<li>等待特定的网络请求解析</li>
<li>等待页面状态稳定,例如元素在页面上可见/不可见</li>
</ul>
<p>不好的做法 ⚔️</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForTimeout</span><span>(</span><span style="color:#fdb082;">5000</span><span>);
</span></code></pre>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// 在等待帮助文件中定义
</span><span style="color:#6d6d6d;">// wait-helpers.ts
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">waitForAPIResponse </span><span style="color:#ff5e5e;">= async </span><span>(
</span><span> </span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page,
</span><span> </span><span style="font-style:italic;color:#fc9354;">url</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">statusCode</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number
</span><span>)</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>> </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForResponse</span><span>(
</span><span> </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">res</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">res</span><span>.</span><span style="color:#8cdaff;">url</span><span>().</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#e9fdac;">url</span><span>) </span><span style="color:#ff5e5e;">&& </span><span style="color:#e9fdac;">res</span><span>.</span><span style="color:#8cdaff;">status</span><span>() </span><span style="color:#ff5e5e;">=== </span><span style="color:#e9fdac;">statusCode
</span><span> );
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// 在你的测试文件中使用
</span><span style="color:#6d6d6d;">//tests/foo.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Locator</span><span>, </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">waitForAPIResponse </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../helpers/wait-helpers</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">显示 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">waitForNewAPIResponse</span><span>(</span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/Accounting/GetRaisedCharges</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//tests/foo.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Locator</span><span>, </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">waitForAPIResponse </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../helpers/wait-helpers</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">显示 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#e9fdac;">fooBarURL</span><span>, {
</span><span> waitUntil: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">domcontentloaded</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span> });
</span><span>});
</span></code></pre>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//tests/foo.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Locator</span><span>, </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">waitForAPIResponse </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../helpers/wait-helpers</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">导航到 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">页面已加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="xuan-ze-qi">选择器</h3>
<p>避免使用与实现和页面结构绑定的选择器。</p>
<p>相反,我们根据 <a href="https://testing-library.com/docs/queries/about/#priority">testing-library 指导原则</a> 优先考虑以下内容</p>
<ul>
<li>getByRole (这有助于可访问性,反映用户和辅助技术如何感知页面)</li>
<li>getByText</li>
<li>getByTestId (需要时添加)</li>
</ul>
<p>不好的做法 ⚔️</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.opt-u > div > .summary > div:nth-child(4) > div</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#foo-button</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">OK</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<h3 id="biao-qian">标签</h3>
<p>在 Playwright 中利用标签(tags)来对测试进行分组并进行有针对性的运行。标签测试的一些方法包括:</p>
<ul>
<li>按测试类型 (例如 功能性、视觉,...)</li>
<li>按测试在流水线中运行的位置 (发布、回归,...)</li>
<li>按功能 (例如 日历、登录, …)</li>
</ul>
<p>你可以在我们关于 <a href="https://zoopla.blog/posts/2022/playwright-tag-annotations/">标签注释</a> 的博文中读到更多关于我们如何使用标签的内容。</p>
<p>好的做法 - 按测试类型 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">显示 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 设置在每种测试类型之前运行的步骤
</span><span> </span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/foo/bar</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>.</span><span style="color:#8cdaff;">waitFor</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 检查可访问性
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@accessibility</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">injectAxe</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">checkA11y</span><span>(</span><span style="color:#e9fdac;">page</span><span>, </span><span style="color:#ff8942;">undefined</span><span>, </span><span style="color:#e9fdac;">a11yOpts</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 对页面运行断言
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@functional @smoke</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 桌面的视觉快照
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@visual desktop</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">captureScreenshot </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">captureScreenshot</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">foo-desktop.png</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 移动设备的视觉快照
</span><span> </span><span style="color:#8cdaff;">testMobile</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@visual mobile</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">captureScreenshot </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">captureScreenshot</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">foo-mobile.png</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p><strong>乙醇的注释：👆 上面在测试标题里打标签的方式已经过时了，现在 playwright 提供了一种新的做法，更加的工程化和可视化一些，具体看<a href="https://playwright.dev/docs/test-annotations#tag-tests">这里</a></strong></p>
<p>好的做法 - 按页面 / 功能 / 测试运行位置 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//tests/foo.spec.ts
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@foobar @smoke 导航到 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">页面已加载</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="bu-wen-ding-de-ce-shi">不稳定的测试</h3>
<p>应优先解决不稳定的测试。如果你当时无法解决它,用 <a href="https://playwright.dev/docs/api/class-test#test-fixme-1">.fixme</a> 标签它们。这将跳过该测试。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//tests/foo.spec.ts
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">显示 foo bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">fixme</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar 是可见的</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">buttonFoo</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fooPage</span><span>.</span><span style="color:#e9fdac;">titlePage</span><span>).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="bing-xing-hua-he-ke-zhong-fu-xing">并行化和可重复性</h3>
<p>构建测试以便在不干预的情况下重复运行。并与套件中的其他测试并行运行,即不干扰其他测试。</p>
<p>Playwright 通过启动同时运行的多个 <a href="https://playwright.dev/docs/test-parallel#worker-processes">workders</a> 来实现开箱即用的并行测试。Playwright 可以根据可用资源扩展工作进程的数量。通过使用 <a href="https://docs.github.com/en/actions/using-github-hosted-runners/about-larger-runners">大型 github runners</a>,我们可以在 CI 流水线中并行运行更多测试。</p>
<h3 id="ming-ming-yue-ding">命名约定</h3>
<h4 id="bian-liang">变量</h4>
<p>使用 <em><strong>驼峰命名法</strong></em> 声明。</p>
<h4 id="bu-er-zhi">布尔值</h4>
<p>以 'is', 'has', 'are', 'have' 开头。这有助于在浏览代码时识别这是一个布尔值。仍然使用 <em><strong>驼峰命名法</strong></em> 声明。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">isTurnedOn </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">false</span><span>;
</span></code></pre>
<h4 id="ye-mian-dui-xiang-lei">页面对象 / 类</h4>
<p>使用 <em><strong>帕斯卡命名法</strong></em> 声明。</p>
<p>使用描述性命名,这可以帮助读者快速识别这是涵盖哪个页面或页面组件。根据需要使用你的产品中尽可能多的上下文来使名称有意义。</p>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>AddWorksOrderModal
</span></code></pre>
<p>不好的做法 ⚔️</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>newModal
</span></code></pre>
<h4 id="ding-wei-qi">定位器</h4>
<p>使用描述性命名,这可以帮助读者快速识别定位器所针对的元素。</p>
<p>例如,你可以使用包含 <em><strong>"动作 / 元素名称" + "元素类型"</strong></em> 的命名结构。</p>
<p><em><strong>定义元素类型</strong></em> - 这些是你的基本 HTML 元素类型,它们将在设计系统中定义和命名,或者作为一个团队,你可以在元素的一致命名上达成一致。例如:checkbox, tickbox, button, tooltip</p>
<p><em><strong>定义动作 / 名称</strong></em> 考虑与此元素交互时将执行什么动作。或者元素的任何现有名称/文本</p>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//这个元素是一个保存按钮,位于属性的上下文中
</span><span>
</span><span style="color:#e9fdac;">readonly </span><span>savePropertyButton: </span><span style="color:#e9fdac;">Locator</span><span>;
</span></code></pre>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//这是一个报告日期的字段
</span><span style="color:#e9fdac;">readonly </span><span>reportedDateField: </span><span style="color:#e9fdac;">Locator</span><span>;
</span></code></pre>
<h3 id="han-shu-ming">函数名</h3>
<p>函数名总是以 <em><strong>"动词"</strong></em> 开头,后跟函数正在交互的 <em><strong>"组件上下文"</strong></em>,即它对哪个实体产生影响。</p>
<p>好的做法 👍</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">getWorksOrder</span><span>();
</span><span>
</span><span style="color:#8cdaff;">printTransactions</span><span>();
</span><span>
</span><span style="color:#8cdaff;">deleteProperty</span><span>();
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://www.houseful.blog/posts/2023/playwright-standards/">URL 来源</a></p>
Playwright API 自动化测试权威指南:第14部分 - 通过扩展 Expect 创建自定义断言
2023-10-16T00:00:00+00:00
2023-10-16T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-14-custom-assertions-extending-expect/
<p>本周我将回顾并重构一些测试,为我的代码库添加自定义断言。这是我早期考虑实现的功能,但当时为了保持简单而决定不做。随着 1.39 版本的发布,Playwright 团队推出了一些更简单的方法,通过一个固定文件来扩展你的测试用例和 expect 断言。详见下面的发布说明。</p>
<p><a href="https://playwright.dev/docs/release-notes#version-139">发布说明 | Playwright 版本 1.39 !</a></p>
<p>如果你是第一次加入我们,可以查看<a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">介绍文章</a>和 <a href="https://github.com/playwrightsolutions/playwright-api-test-demo">playwright-api-test-demo 代码库</a>,其中包含了所有代码示例。</p>
<h3 id="wei-shen-me-ni-ying-gai-guan-zhu-zhe-ge">为什么你应该关注这个?</h3>
<p>最如果你现有的方法对你来说已经足够好,那么你不必在项目中实现自定义断言。但是如果你发现自己一遍又一遍地编写相同的冗长断言,那么自定义 expect 可能会派上用场。</p>
<p>例如,下面的断言可以转换为更简单、更易读的形式。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 我正在对报告数组中的每个预订进行断言
</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>.</span><span style="color:#6699cc;">forEach</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">booking</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">//旧的方式
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.start)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">end</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">booking</span><span>.title).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 新的方式
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.start).</span><span style="color:#8cdaff;">toBeValidDate</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">end</span><span>).</span><span style="color:#8cdaff;">toBeValidDate</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.title).</span><span style="color:#8cdaff;">toBeString</span><span>();
</span><span>});
</span></code></pre>
<p>随着最新的 1.39 版本发布,通过 fixture<code>扩展</code>expect 的能力以及<code>mergeExpects</code>和<code>mergeTests</code>的能力,这简化了在所有测试中导入 fixture 的过程! 在此之前,自定义断言是添加到<code>playwrightconfig.ts</code>文件中的。这可以在下面的文章中看到。</p>
<p><a href="/blog/creating-custom-expects-in-playwright-how-to-write-your-own-assertions">在 Playwright 中创建自定义 expects:如何编写你自己的断言</a></p>
<h3 id="shi-xian-zi-ding-yi-expects">实现自定义 Expects</h3>
<p>那么让我们开始通过 fixture 实现一些自定义 expects。我们将从<code>toBeValidDate()</code>开始。在之前的例子中,我们创建了一个辅助函数,我们调用它并验证如果日期可解析就返回<code>true</code>,今天我们将扩展 expect 文件以包含这个自定义 expect。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/toBeValidDate.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">baseExpect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">baseExpect</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">toBeValidDate</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#fbe3bf;">Date</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#e9fdac;">received</span><span>) </span><span style="color:#ff5e5e;">&& typeof </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">? </span><span style="color:#ff8942;">true </span><span style="color:#ff5e5e;">: </span><span style="color:#ff8942;">false</span><span>;
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeValidDate() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}' 是一个有效的日期。</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>});
</span></code></pre>
<p>这个自定义 expect 的逻辑很直接,从 expect 接收数据,并验证使用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse">Date.parse(received)</a>方法判断字符串是否可以解析成正确的 date(并且不返回 NaN,这是一个<a href="https://www.freecodecamp.org/news/falsy-values-in-javascript/#:~:text=Description,)%2C%20and%20false%20of%20course.">falsey 值</a>)。然后我们返回重写 expect 所需的详细信息。</p>
<p>注意,我在这个 fixture 中同时导出了<code>test</code>和<code>expect</code>,以便在测试中使用这个 fixture 时可以访问<code>test</code>。这是我做出的决定,你在测试中不必这样做。这确实允许我只使用一个 test/expect 导入,而不是从 @playwright/test 导入<code>test</code>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/auth/login.post.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">// 如果我没有导出 test
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/fixtures</span><span style="color:#ffffff;">"</span><span>; (</span><span style="color:#e9fdac;">关于 fixtures 的更多信息见下文</span><span>)
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 因为我确实导出了 test,所以我可以这样做
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/fixtures</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login POST 请求</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST 没有主体</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">`</span><span>, {});
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">timestamp</span><span>).</span><span style="color:#8cdaff;">toBeValidDate</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.status).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">error</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bad Request</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">path</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/auth/login</span><span style="color:#ffffff;">`</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>我还添加了一些其他的自定义 expects,其中一些在这个项目中不会使用,但对其他人可能有用。下面的自定义断言在我工作中的代码库里被大量使用,因为我们有一个 API,这个接口根据输入的不同有很多潜在的值。在对具有多个返回数组的大型 GET items 请求进行断言时,我们可以为多个值创建更通用的断言。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/toBeOneOfValues.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">baseExpect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">baseExpect</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">toBeOneOfValues</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>, </span><span style="font-style:italic;color:#fc9354;">array</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>[]</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">array</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#e9fdac;">received</span><span>);
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeOneOfValues() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 [${</span><span style="color:#e9fdac;">array</span><span style="color:#fbe3bf;">}] 包含 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}'</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>});
</span></code></pre>
<p>下面的自定义 expects 使得断言响应否是为正确类型变得超级简单!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/typesExpects.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">baseExpect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">baseExpect</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">toBeOneOfTypes</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>, </span><span style="font-style:italic;color:#fc9354;">array</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[]</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">array</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">received</span><span>) </span><span style="color:#ff5e5e;">||
</span><span> (</span><span style="color:#e9fdac;">array</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ff8942;">null</span><span>) </span><span style="color:#ff5e5e;">&& </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ff8942;">null</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeOneOfTypes() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${
</span><span style="color:#fbe3bf;"> </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ff8942;">null </span><span style="color:#ff5e5e;">? </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">null</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">: typeof </span><span style="color:#e9fdac;">received
</span><span style="color:#fbe3bf;"> }' 类型是 [${</span><span style="color:#e9fdac;">array</span><span style="color:#fbe3bf;">}] 类型之一</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">${
</span><span style="color:#fbe3bf;"> </span><span style="color:#e9fdac;">array</span><span style="color:#fbe3bf;">.</span><span style="color:#8cdaff;">includes</span><span style="color:#fbe3bf;">(</span><span style="color:#ff8942;">null</span><span style="color:#fbe3bf;">)
</span><span style="color:#fbe3bf;"> </span><span style="color:#ff5e5e;">? </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">警告: [${</span><span style="color:#e9fdac;">array</span><span style="color:#fbe3bf;">}] 数组包含 'null' 类型,这在错误中不会被打印</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`
</span><span style="color:#fbe3bf;"> </span><span style="color:#ff5e5e;">: </span><span style="color:#ff8942;">null
</span><span style="color:#fbe3bf;"> }</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">toBeNumber</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">= typeof </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeNumber() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}' 是一个数字,但它是 ${</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">toBeString</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">= typeof </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeString() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}' 是一个字符串,但它是 ${</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">toBeBoolean</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">= typeof </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">boolean</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeBoolean() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}' 是一个布尔值,但它是 ${</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>
</span><span> </span><span style="color:#8cdaff;">toBeObject</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">pass </span><span style="color:#ff5e5e;">= typeof </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">pass</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeObject() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}' 是一个对象,但它是 ${</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>});
</span></code></pre>
<p>在下面的 spec 中,你可以看到在一个测试中使用的所有不同的自定义 expects。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/test.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">from </span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">lib</span><span>/</span><span style="color:#e9fdac;">fixtures</span><span>/</span><span style="color:#e9fdac;">fixtures</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">; // 导入自定义断言定</span><span style="background-color:#f92649;color:#f8f8f0;">义</span><span>
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">自定义断言</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用fixture</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">`</span><span>, {});
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">timestamp</span><span>).</span><span style="color:#8cdaff;">toBeValidDate</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">dateStr </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2021-01-01</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">dateStr</span><span>).</span><span style="color:#8cdaff;">toBeValidDate</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">number </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">123</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">number</span><span>).</span><span style="color:#8cdaff;">toBeNumber</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">boolean </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">true</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">boolean</span><span>).</span><span style="color:#8cdaff;">toBeBoolean</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">string </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">string</span><span>).</span><span style="color:#8cdaff;">toBeString</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.status).</span><span style="color:#8cdaff;">toBeOneOfValues</span><span>([</span><span style="color:#fdb082;">400</span><span>, </span><span style="color:#fdb082;">401</span><span>, </span><span style="color:#fdb082;">403</span><span>]);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.status).</span><span style="color:#8cdaff;">toBeOneOfTypes</span><span>([</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">null</span><span style="color:#ffffff;">"</span><span>]);
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="mergeexpects-fixture">MergeExpects fixture</h3>
<p>如果你在上面的例子中仔细观察,你可能注意到我只有一个导入 <code>import { test, expect } from "@fixtures/fixtures";</code> 用于我们添加的所有不同 fixture。在 1.39 版本中,playwright 团队引入了一种简单的方法来合并 <code>expect.extend</code> 和 <code>test.extend</code>,使你的导入更简洁和整洁! 发布说明可以在<a href="https://playwright.dev/docs/release-notes#version-139">这里</a>找到。</p>
<p>对于我们的例子,我创建了一个 <code>fixtures.ts</code> 文件,内容如下。我正在导入 <code>mergeExpects()</code>,这是最新版本的新增功能,以及所有其他 <code>expect.extend</code> fixture。然后我创建并导出一个新的 <code>expect 变量</code>,将其设置为 <code>mergeExpects(fixture1, fixture2, fixture3, etc)</code> 的响应。这将创建一个单一的 <code>fixture</code>,可以导入到所有使用这些自定义断言的测试中。</p>
<p>💡 如果你无法访问 <code>mergeExpects</code>,你需要在 package.json 文件中将 Playwright 更新到至少 1.39 版本。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/fixtures.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">mergeExpects </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">toBeOneOfValuesExpect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/toBeOneOfValues</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">toBeValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/toBeValidDate</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">typesExpects </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/typesExpects</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expect </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">mergeExpects</span><span>(
</span><span> </span><span style="color:#e9fdac;">toBeOneOfValuesExpect</span><span>,
</span><span> </span><span style="color:#e9fdac;">toBeValidDate</span><span>,
</span><span> </span><span style="color:#e9fdac;">typesExpects
</span><span>);
</span></code></pre>
<p>但在我们开始导入 fixture 之前,让我们更新我们的 <code>tsconfig.json</code> 并添加 <code>@fixtures</code> 相对路径,并用新的导入更新之前的用例和 <code>fixtures.ts</code> 文件。</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span style="color:#6d6d6d;">// tsconfig.json
</span><span>
</span><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">compilerOptions</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">baseUrl</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">esModuleInterop</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">paths</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/*</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/datafactory/*</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/*</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/helpers/*</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@fixtures/*</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/*</span><span style="color:#ffffff;">"</span><span>]
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<p>有了上面的更改,导入应该看起来像这样</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 新的
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@fixtures/fixtures</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 旧的
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/fixtures/fixtures</span><span style="color:#ffffff;">"</span><span>;
</span></code></pre>
<p>你可以在下面的 pull request 中看到整个代码库中添加的所有更改。我没有对 "@playwright/test" 进行查找和替换,尽管我本可以这样做。</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/17">pull request</a></p>
<h3 id="wo-zai-vscode-zhong-yu-dao-de-qi-guai-cuo-wu">我在 VSCode 中遇到的奇怪错误</h3>
<p>对于一个我在尝试使用一些自定义 expects 时持续遇到的错误,我仍然有点困惑。见下文。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>Property 'toBeValidDate' does not exist on type 'MakeMatchers<void, any,
</span><span>{ toBeOneOfValues(this: State, received: any, array: any[]):
</span><span>{ message: () => string; pass: true; }
</span><span>| { message: () => string; pass: false; }; }
</span><span>& { toBeValidDate(this: State, received: any):
</span><span>{ ...; }
</span><span>| { ...; }; }
</span><span>& { ...; }>'.ts(2339) any
</span></code></pre>
<p>我怀疑这可能是 Playwright 代码库的一个 bug,因为它只在存在 <code>expect(any)</code> 类型时显示这个错误,在下面的例子中,<code>body.timestamp</code> 是 <code>any</code> 类型,因为它直到异步响应调用后才被设置。如果我将 <code>body.timestamp</code> 改为时间戳的字符串,IDE 错误就会消失。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/image.png" alt="图片 7" /></p>
<p>我花了相当多的时间试图找到一种测量 API 调用持续时间的方法。我最初尝试创建一个请求 fixture,但始终无法使其工作,因为我可以捕获持续时间,但无法将这个持续时间计算传递给 <code>request</code> 对象以在响应断言中使用,不过我可以在断言中通过 console.log 打印出来。所以我转而为测试添加了一个持续时间,可以在下面找到一种实现方法。这很冗长,我不太喜欢,但至少是一个前进的方向。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/auth/login.post.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: POST /auth/login
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@fixtures/fixtures</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">Env </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/env</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login POST 请求</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">Env</span><span>.</span><span style="color:#e9fdac;">ADMIN_NAME</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">Env</span><span>.</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用有效凭证的 POST</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 计算持续时间
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">start </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Date</span><span>.</span><span style="color:#8cdaff;">now</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">`</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 计算持续时间
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">end </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Date</span><span>.</span><span style="color:#8cdaff;">now</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">duration </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">end </span><span style="color:#ff5e5e;">- </span><span style="color:#e9fdac;">start</span><span>;
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言持续时间
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">duration</span><span>).</span><span style="color:#8cdaff;">toBeLessThan</span><span>(</span><span style="color:#fdb082;">1000</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>()[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">set-cookie</span><span style="color:#ffffff;">"</span><span>]).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">token=</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="zong-jie">总结</h3>
<p>1.39 版本的最新功能应该使管理 fixture 的 <code>imports</code> 变得更加容易,因为我们可以根据需要合并 fixture! 我相信这对通过 fixture 扩展 <code>test</code> 的影响会比扩展 <code>expect</code> 更大,因为这可能会使通过 fixture 管理页面对象变得更加容易。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/10/image-1.png" alt="图片 8" /></p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-14-custom-assertions-extending-expect/">URL 来源</a></p>
<p>发布时间: 2023-10-16</p>
The Definitive Guide to API Test Automation With Playwright: Part 13 - Validate API Response Against OpenAPI Spec Schema
2023-10-09T00:00:00+00:00
2023-10-09T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-13-validate-api-response-against-openapi-spec-schema/
<p>Welcome back, this week we'll look at how to validate the api response body from the schema against the OpenAPI spec schema. This is a more complex solution than we covered in the previous article below. In that article we walked through taking a snapshot of the response, converting it into a JSON schema and saving the results as a part of the repository. This article will take the downloaded OpenAPI spec files that we download when we calculate coverage, and use the spec to validate each field that is returned in the response body. I'll also go ahead and mention a lot of the ideas were originally from <a href="https://playwrightsolutions.com/author/sergei/">Sergei Gapanovich</a>, and were implemented against our test repo at work.</p>
<p><a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-9-validating-json-schema/">The Definitive Guide to API Test Automation With Playwright: Part 9</a></p>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub - playwrightsolutions/playwright-api-test-demo</a></p>
<h2 id="breaking-down-validateagainstschema-function">Breaking Down validateAgainstSchema() Function</h2>
<p>Before I show off the code, I wanted to walk through what type of checks we are doing through the function. I'll attempt to explain it with the diagram below. Let's start by observing the <code>body.bookings[0]</code> is an javascript object with <code>bookingDates</code> which includes a checkin string and a checkout string. The red line indicates the shape of the object. The blue line indicates the name <code>BookingDates</code> schema in the booking_spec3.json file. The green line indicates we need to look in the <code>booking</code> schema file, as we have multiple schema files with this project, for other proejcts that only have 1 OpenApi spec file the code would need to be tweaked. The orange lines indicate how the javascript object matches up with the OpenApi spec file <code>booking_spec3.json</code>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-16.png" alt="Image 5" /></p>
<h2 id="validateagainstschema-code">validateAgainstSchema() code</h2>
<p>The code is for this function is below</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/validateAgainstSchema.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">removeItemsFromArray </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/arrayFunctions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">capitalizeString </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/capitalizeString</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">fail </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">assert</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">addWarning </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/warnings</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">authSchemaExpectedResponseParamsCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaData/Auth</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">bookingSchemaExpectedResponseParamsCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaData/Booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">brandingSchemaExpectedResponseParamsCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaData/Branding</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">messageSchemaExpectedResponseParamsCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaData/Message</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">reportSchemaExpectedResponseParamsCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaData/Report</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">roomSchemaExpectedResponseParamsCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaData/Room</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * `Definition:` Validates an **object** against a specified **schema object**
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">object</span><span style="color:#6d6d6d;"> - The object to check schemaObject against.
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">schemaObject</span><span style="color:#6d6d6d;"> - The schema object name as documented in *_spec3.json.
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">docs</span><span style="color:#6d6d6d;"> - The type of docs (e.g. `branding`, `message`, `booking`, etc).
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">notReturnedButInSchema</span><span style="color:#6d6d6d;"> - Any defined properties in schema but not returned by Falcon.
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">extraParamsReturned</span><span style="color:#6d6d6d;"> - Any undefined properties returned by Falcon; **_create a bug if there are any._**
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">validateAgainstSchema</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">object</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">object</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">schemaObject</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">docs</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">notReturnedButInSchema </span><span style="color:#ff5e5e;">= </span><span>[],
</span><span> </span><span style="font-style:italic;color:#fc9354;">extraParamsReturned </span><span style="color:#ff5e5e;">= </span><span>[]
</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// get keys from the object
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">responseObjectKeys </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Object</span><span>.</span><span style="color:#6699cc;">keys</span><span>(</span><span style="color:#e9fdac;">object</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// get keys from the docs
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schema </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">schemaParameters</span><span>(</span><span style="color:#e9fdac;">schemaObject</span><span>, </span><span style="color:#e9fdac;">docs</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">docsObjectKeys </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Object</span><span>.</span><span style="color:#6699cc;">keys</span><span>(</span><span style="color:#e9fdac;">schema</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">/*
</span><span style="color:#6d6d6d;"> if used - workaround around a bug
</span><span style="color:#6d6d6d;"> this should not be ok when we have more params in a response than in docs
</span><span style="color:#6d6d6d;">
</span><span style="color:#6d6d6d;"> filter out extra params from the response params array if any
</span><span style="color:#6d6d6d;"> */
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">extraParamsReturned</span><span>.length </span><span style="color:#ff5e5e;">> </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#e9fdac;">responseObjectKeys </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">removeItemsFromArray</span><span>(
</span><span> </span><span style="color:#e9fdac;">responseObjectKeys</span><span>,
</span><span> </span><span style="color:#e9fdac;">extraParamsReturned
</span><span> );
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// filter out hidden params from the schema params array if any
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">notReturnedButInSchema</span><span>.length </span><span style="color:#ff5e5e;">> </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#e9fdac;">docsObjectKeys </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">removeItemsFromArray</span><span>(
</span><span> </span><span style="color:#e9fdac;">docsObjectKeys</span><span>,
</span><span> </span><span style="color:#e9fdac;">notReturnedButInSchema
</span><span> );
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// compare object keys (need to be sorted since order differs)
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">docsObjectKeys</span><span>.</span><span style="color:#6699cc;">sort</span><span>()).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">responseObjectKeys</span><span>.</span><span style="color:#6699cc;">sort</span><span>());
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// add a warning if schema object length has been changed based on doc types
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount</span><span>;
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">docs </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">authSchemaExpectedResponseParamsCount</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#e9fdac;">docs </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">bookingSchemaExpectedResponseParamsCount</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#e9fdac;">docs </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">brandingSchemaExpectedResponseParamsCount</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#e9fdac;">docs </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">message</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">messageSchemaExpectedResponseParamsCount</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#e9fdac;">docs </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">report</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">reportSchemaExpectedResponseParamsCount</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#e9fdac;">docs </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">room</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">roomSchemaExpectedResponseParamsCount</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(
</span><span> </span><span style="color:#e9fdac;">docsObjectKeys</span><span>.length </span><span style="color:#ff5e5e;">!==
</span><span> </span><span style="color:#e9fdac;">recordedSchemaResponseParamsCount</span><span>[</span><span style="color:#e9fdac;">schemaObject</span><span>] </span><span style="color:#ff5e5e;">-
</span><span> </span><span style="color:#e9fdac;">notReturnedButInSchema</span><span>.length
</span><span> ) {
</span><span> </span><span style="color:#8cdaff;">addWarning</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">'${</span><span style="color:#e9fdac;">schemaObject</span><span style="color:#fbe3bf;">}' schema object in '${</span><span style="color:#e9fdac;">docs</span><span style="color:#fbe3bf;">}' docs has been updated. Please, do the following: </span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">` </span><span style="color:#ff5e5e;">+
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">- Check if the change is expected </span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">` </span><span style="color:#ff5e5e;">+
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">- Update "${</span><span style="color:#e9fdac;">test</span><span style="color:#fbe3bf;">.</span><span style="color:#8cdaff;">info</span><span style="color:#fbe3bf;">().title}" test with appropriate assertions </span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">` </span><span style="color:#ff5e5e;">+
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">- Re-run the test from terminal with 'GENERATE_SCHEMA_TRACKING_DATA=true', commit and push generated files </span><span style="color:#fdb082;">\n\n</span><span style="color:#ffffff;">`
</span><span> );
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">schemaParameters</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">schema</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">docs</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiDocs </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">parse</span><span>(
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">readFileSync</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./${</span><span style="color:#e9fdac;">docs</span><span style="color:#fbe3bf;">}_spec3.json</span><span style="color:#ffffff;">`</span><span>).</span><span style="color:#6699cc;">toString</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf-8</span><span style="color:#ffffff;">"</span><span>)
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">apiDocs</span><span>.components.</span><span style="color:#e9fdac;">schemas</span><span>[</span><span style="color:#e9fdac;">schema</span><span>].</span><span style="color:#e9fdac;">properties</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">e</span><span>) {
</span><span> </span><span style="color:#8cdaff;">fail</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">The '${</span><span style="color:#e9fdac;">schema</span><span style="color:#fbe3bf;">}' object you passed does not exist in '${</span><span style="color:#e9fdac;">docs</span><span style="color:#fbe3bf;">}' documentation</span><span style="color:#ffffff;">`
</span><span> );
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">updateDocsSchemasParamsCount</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">allDocs </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">message</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">report</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">room</span><span style="color:#ffffff;">"</span><span>];
</span><span>
</span><span> </span><span style="color:#e9fdac;">allDocs</span><span>.</span><span style="color:#6699cc;">forEach</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">docs</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiDocs </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">parse</span><span>(
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">readFileSync</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./${</span><span style="color:#e9fdac;">docs</span><span style="color:#fbe3bf;">}_spec3.json</span><span style="color:#ffffff;">`</span><span>).</span><span style="color:#6699cc;">toString</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf-8</span><span style="color:#ffffff;">"</span><span>)
</span><span> );
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schemas </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">apiDocs</span><span>.components.</span><span style="color:#e9fdac;">schemas</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schemaObjects </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Object</span><span>.</span><span style="color:#6699cc;">keys</span><span>(</span><span style="color:#e9fdac;">schemas</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">""</span><span>;
</span><span> </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">+= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">// updated on </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#8cdaff;">stringDateByDays</span><span>() </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fdb082;">\n\n</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">+= </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">export const ${</span><span style="color:#e9fdac;">docs</span><span style="color:#fbe3bf;">}SchemaExpectedResponseParamsCount = {</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>;
</span><span> </span><span style="color:#e9fdac;">schemaObjects</span><span>.</span><span style="color:#6699cc;">forEach</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">schema</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">+= </span><span style="color:#ffffff;">` </span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">schema</span><span style="color:#fbe3bf;">}: ${
</span><span style="color:#fbe3bf;"> Object.</span><span style="color:#6699cc;">keys</span><span style="color:#fbe3bf;">(</span><span style="color:#e9fdac;">schemas</span><span style="color:#fbe3bf;">[</span><span style="color:#e9fdac;">schema</span><span style="color:#fbe3bf;">].</span><span style="color:#e9fdac;">properties</span><span style="color:#fbe3bf;">).length
</span><span style="color:#fbe3bf;"> },</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>;
</span><span> });
</span><span> </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">+= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">};</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">writeFileSync</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./lib/helpers/schemaData/${</span><span style="color:#8cdaff;">capitalizeString</span><span style="color:#fbe3bf;">(</span><span style="color:#e9fdac;">docs</span><span style="color:#fbe3bf;">)}.ts</span><span style="color:#ffffff;">`</span><span>,
</span><span> </span><span style="color:#e9fdac;">data
</span><span> );
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">err</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#e9fdac;">err</span><span>);
</span><span> }
</span><span> });
</span><span>}
</span></code></pre>
<p>I won't walk through all the code for this but the JSDoc for the main function walks through the inputs needed. One thing that is worth calling out here, is with this type of Schema Verification is that when new items are added to the response and schema, you won't have any way of knowing about this programmatically. So we've added <code>updateDocsSchemasParamsCount()</code> function along with some static files that keep track of the different counts for the different json objects. When new objects are added</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ./lib/helpers/schemaData/Booking.ts
</span><span>
</span><span style="color:#6d6d6d;">// updated on 2023-09-23
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingSchemaExpectedResponseParamsCount </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> Error: </span><span style="color:#fdb082;">4</span><span>,
</span><span> Booking: </span><span style="color:#fdb082;">8</span><span>,
</span><span> BookingDates: </span><span style="color:#fdb082;">2</span><span>,
</span><span> CreatedBooking: </span><span style="color:#fdb082;">2</span><span>,
</span><span>};
</span></code></pre>
<h2 id="updating-expectedresponsecount">Updating ExpectedResponseCount</h2>
<p>To update the above numbers programmatically I've built the code so you can run the test with the environment variable <code>GENERATE_SCHEMA_TRACKING_DATA=true</code> to update tracking files. It will overwrite existing files but it's you who have to commit and push them to our repo.</p>
<h2 id="warning-log">Warning.log</h2>
<p>With this tracking we now have a way to notify if new items are added to a response body, and is a trigger for me to go and update our checks to assert against the new field. With that I have a <code>warning.log</code> from the <code>addWarning()</code> function that can get output to warn me of things, but not fail the test.</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>// warning.log
</span><span>
</span><span>WARNING: 'BookingDates' schema object in 'booking' docs has been updated. Please, do the following:
</span><span>- Check if the change is expected
</span><span>- Update "GET booking summary with specific room id" test with appropriate assertions
</span><span>- Re-run the test from terminal with 'GENERATE_SCHEMA_TRACKING_DATA=true', commit and push generated files
</span><span>
</span><span>
</span><span>WARNING: This test should be refactored: 'GET booking summary with specific room id' to use custom assertions
</span></code></pre>
<h2 id="validateagainstschema-failure">validateAgainstSchema() failure</h2>
<p>An example of a failure would be if the OpenApi booking_spec.json was updated to be <code>checkindate</code> and <code>checkoutdate</code> rather than just <code>checkin</code> and <code>checkout</code>, the failure would look like. As the response body of the API still had <code>checkin</code> and <code>checkout</code>, this would cause the test to fail. Note we aren't doing any type checking here we are just validating that the shape of the response body matches the OpenApi spec file.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-18.png" alt="Image 6" /></p>
<p>As long as there are good assertions that validate the content of the message is a string in our other expects we should have the type checks included as a part of our assertions.</p>
<h2 id="why-implement-this-functionality">Why implement this functionality?</h2>
<p>The main reason we did at our workplace is we are working with really large API response bodies, and the jsonSchema snapshot testing required a good bit of upkeep. For example we had some fields that would respond with null or a string, and if the original response body, had just a string, the snapshot would always look for a string. To record new snapshots we would have to get both null and string responses for the snapshot to pass for all scenarios.</p>
<p>We also found that we didn't have a way to keep up with "change-detection". If new fields were added to a response body, we wanted to add assertions around those new fields, it was not easy to know about them. Now as long as our Open Api spec file is updated this new code will add a warning for us.</p>
<p>The pull request with the code changes can be found below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/14/files">Bm/validate against schema by BMayhew</a></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-13-validate-api-response-against-openapi-spec-schema/</p>
<p>Published Time: 2023-10-09T12:30:25.000Z</p>
The Definitive Guide to API Test Automation With Playwright: Part 12 - My Top 10 Great Practices
2023-10-02T00:00:00+00:00
2023-10-02T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-12-best-practices/
<p>Ok so I will admit, I was tempted to title this<code>Best Practices</code> but decided to stick with Great practices because all the advice I plan to give really "Depends on Your Context". I do however plan to give you some good advice along with rationale so you can tell when it becomes bad advice. I believe, if you don't understanding why something should be done, then you've fallen into a trap of building things that aren't helping you reach your goals, and you'll keep doing it even when it's no longer necessary or even becomes deleterious.</p>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub - playwrightsolutions/playwright-api-test-demo</a></p>
<h2 id="great-practices">Great Practices</h2>
<p>Reminding you of our context, we have been on a 11 Part journey where we have built a somewhat complex API Test Automation Regression Suite of checks against the <a href="https://github.com/mwinteringham/restful-booker-platform">API</a> that drives <a href="https://automationintesting.online/">https://automationintesting.online/</a>.</p>
<h2 id="1-establish-a-goal-for-your-playwright-test-suite">1. Establish a Goal for Your Playwright Test Suite</h2>
<p>Decide on what your goal will be for this automation suite. For example my goal with the the repo we've been building has been to catch <code>Regression</code> bugs, acting as a change detection tool. If the API changes in a breaking fashion (things about the api responses are changed or removed) the automation should catch this. In it's current state it wouldn't catch new non-breaking changes that are added to the APIs, for example a new peice of information on the response body. Once you have this goal go ahead and add it to your readme.md and share it with your team.</p>
<h2 id="2-write-independent-tests">2. Write Independent Tests</h2>
<ul>
<li>Each test should be able to run on it's own in any order.</li>
<li>There should be no dependencies that are needed between tests (outside of a <code>setup</code> script that runs before the test suite).</li>
<li>Tests shouldn't share data between themselves</li>
</ul>
<p>If you build your tests this way you unlock the power of running multiples tests at once, and eventually sharing your tests for SPEED!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-14.png" alt="Image 3" /></p>
<h2 id="3-naming-your-test-files-well">3. Naming Your Test Files Well</h2>
<p>When creating your tests, it's always helpful to organize them in a way that is logical and easy to follow. As you can see below, each test is organized in it's own folder <code>auth</code> for example are all the end points that are at the path <a href="https://automationintesting.online/auth/"><code>https://automationintesting.online/auth/</code></a> with the following name the actual endpoint that is being hit, along with the verb in the test name. This makes it really easy to see which tests exist, and a great pattern to follow. If you decide to follow a different pattern, that is fine just find something that you can manage and do it consistently!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-10.png" alt="Image 4" /></p>
<h2 id="4-utilize-describe-and-test-titles-well">4. Utilize Describe and Test Titles Well</h2>
<p>In the below example I have taken the <code>login.post.spec.ts</code> file and removed most of the logic keeping the titles. When the below test runs, the <code>describe</code> block is at the highest level, and when tests run will be the overall container for all of the other tests when it comes to reporting. You can notice that in the describe block I put the full endpoint path, along with the Verb. And within each test title I start with the <code>POST</code> verb along with what the test is actually checking (either positive or negative). This will help give a pattern, and make it really easy to troubleshoot when failures occur, our you have multiple <code>VERB</code> types within the same describe block (this can be seen in other tests within the repository we are working from).</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ./tests/auth/login.post.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: POST /auth/login
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">Env </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/env</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login POST requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with valid credentials</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with invalid username and password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with valid username and invalid password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with invalid username and valid password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with no username and valid password</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with empty body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with no body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST with valid credentials then validate with token</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span><span>});
</span></code></pre>
<p>As you can see there is a nice tree, and I can easily see the tests, which tests that were run, and the information about each tests just from the title. Following this pattern also allows me to collapse each endpoint down in the VS Code Test Explorer.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-11.png" alt="Image 5" /></p>
<h2 id="5-utilizing-let-variables-in-describe-blocks">5. Utilizing let Variables in Describe Blocks</h2>
<p>For these next few practices we will use the following <code>bookings.post.spec.ts</code> code example. In this test I am making a <code>POST</code> to the booking/ URL. In order to make this post I need a valid roomId, checkInTime, and checkOutTime. When I need specific data like this especially if I want to have multiple tests, I want to be able to create some data in a <code>beforeEach()</code> block of code. When I do this if I create a variable within the <code>beforeEach()</code>, such as the <code>const room =</code> line of code, because of the way Javascript scoping works, I am not able to use that variable outside of the <code>beforeEach()</code> block. So anytime I need a variable that I want to set in a <code>beforeEach()</code> and then use it in my test later (see <code>requestBody</code> and <code>roomId</code>) I create empty let variables at the highest level within the <code>describe()</code> block.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ./tests/booking/bookings.post.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: POST /booking/
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">createRandomBookingBody</span><span>,
</span><span> </span><span style="color:#e9fdac;">futureOpenCheckinDate</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createRoom </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/room</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateJsonSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateAgainstSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateAgainstSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ POST requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">requestBody</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">room </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRoom</span><span>();
</span><span> </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">room</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">futureCheckinDate </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">checkInString </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureCheckinDate</span><span>.</span><span style="color:#8cdaff;">toISOString</span><span>().</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">T</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">0</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">checkOutString </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">2</span><span>);
</span><span>
</span><span> </span><span style="color:#e9fdac;">requestBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRandomBookingBody</span><span>(
</span><span> </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> </span><span style="color:#e9fdac;">checkInString</span><span>,
</span><span> </span><span style="color:#e9fdac;">checkOutString
</span><span> );
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST new booking with full body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: </span><span style="color:#e9fdac;">requestBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">booking </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">booking</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingdates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST_booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateAgainstSchema</span><span>(</span><span style="color:#e9fdac;">booking</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">phone</span><span style="color:#ffffff;">"</span><span>,
</span><span> ]);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateAgainstSchema</span><span>(
</span><span> </span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">BookingDates</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"
</span><span> );
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="6-utilizing-beforeeach-for-test-data-creation">6. Utilizing beforeEach() for Test Data Creation</h2>
<p>Looking back to the example above you can see a lot is happening in the <code>beforeEach()</code> section of the code. My goal of the test here is to do any data creation or manipulation that we need for the test to run in the <code>beforeEach()</code> block. In this case it meant:</p>
<ul>
<li>Creating a room</li>
<li>Setting the roomId variable</li>
<li>Getting an available future checkin data with the datafactory</li>
<li>Creating a valid checkin string</li>
<li>Creating a valid checkout string 2 days from a helper function</li>
<li>Creating a requestBody object utilizing the datafactory</li>
</ul>
<p>If this endpoint required authentication I would have also created the appropriate authorization headers in the <code>beforeEach()</code></p>
<p>Doing all of this makes the test very basic, all I had to do was make the <code>POST</code> request with the <code>requestBody</code> that was set, and then start making assertions!</p>
<p>💡</p>
<p>Every time a new test is written new data for that test should be created separate of any previously written test (ex. new account created for each test, new payment intent for each test and that's where the <code>Data Factory</code> comes in handy to keep our code DRY )</p>
<h2 id="7-when-making-assertions-always-start-with-status-code">7. When Making Assertions Always Start with Status Code</h2>
<p>From the above example still you can see the first assertion that we make is an <code>expect</code> on the response status code. I've found having this check first will save yourself a lot of headache.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">booking </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">booking</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span style="color:#ff5e5e;">...
</span></code></pre>
<p>When I first began writing API automation with playwright I typically would have this after setting the <code>const body = await response.json();</code> line of code, that were in most of my tests. The issue is sometimes a test would fail with an error like this. <code>SyntaxError: Unexpected end of JSON input</code>. I thought well, is my test broken, or is it the system I am checking broken. I didn't have a clear indicator what the problem was from this error message.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-12.png" alt="Image 6" /></p>
<p>The reason this error happened in this case was the response body was not in <code>JSON</code> format, it was returned as <code>TEXT</code> from the endpoint because the response code was not <code>201</code> it was <code>403</code>. Adjusting these two lines back around, now the test fails with a really useful error message.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-13.png" alt="Image 7" /></p>
<h2 id="8-have-a-test-data-strategy">8. Have a Test Data Strategy</h2>
<p>I do believe the hardest part of Test Automation is creating a strategy with your test data. I discuss this in-depth on Part 6, it's worth checking out if you haven't already.</p>
<p><a href="https://playwrightsolutions.com/the-definitive-guide-to-api-testcreating-a-datafactory-to-manage-test-data/">The Definitive Guide to API Test Automation With Playwright: Part 6</a></p>
<p>There are of course other strategies you could employ such as seeding the data through setup scripts, reseting the database to get data to a good state, or creating static data that will always be available. Each situation may require a different solution but what's important you need have "A Strategy" in place and make sure it's communicated far and wide for anyone contributing to the automation or using the environments the automation runs against.</p>
<h2 id="9-utilize-aftereach-when-logging-out">9. Utilize afterEach() When Logging Out</h2>
<p>If you have any kind of tests that utilize a saved cookie or logged in state, you need to make sure that if you have a logout test that destroy's the session your automation is using, that you utilize the <code>afterEach()</code> block of the test to re-create a newly authenticated state. I don't have an example of this within this codebase because I create new authentication any time I need authorization.</p>
<p>You can also utilzie <code>afterEach()</code> to clean up any data that other tests my rely on. This can be seen in the test below, specifically on the <code>PUT</code> test. you can see that after I change the branding, I run checks on the response body, and right after the assertions, another <code>PUT</code> request with the original body is made to update the data.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ./tests/branding/branding.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /branding/
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: PUT /branding/
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defaultBranding</span><span>, </span><span style="color:#e9fdac;">updatedBranding </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/branding</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateJsonSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateAgainstSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateAgainstSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">defaultBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">defaultBranding</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET website branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">defaultBody</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET_branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateAgainstSchema</span><span>(</span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateAgainstSchema</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">contact</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Contact</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateAgainstSchema</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">map</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Map</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// This test has the potential to cause other UI tests to fail as this branding endpoint is a critical part of the entire UI of the website
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/ PUT requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">defaultBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">defaultBranding</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">updatedBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">updatedBranding</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">defaultBody</span><span>,
</span><span> });
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT website branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">updatedBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">202</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updatedBody</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT_branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateAgainstSchema</span><span>(</span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="10-things-to-test-for-when-writing-api-checks">10. Things to Test For When Writing API Checks</h2>
<ul>
<li>Review the API documentation when writing automation. Check for all the different types of parameters that can be sent, and what parameters should be returned.</li>
<li>You should have shoot for at least 3 test cases where you can send: All Parameters, Required Parameters, and No Parameters, if there inputs on the endpoint.</li>
<li>Test for negative scenarios. This may sound crazy but the moment, an unauthorized API call returns a <code>200</code> rather than a <code>403</code> your security team and developer team will be thankful.</li>
<li>Another negative scenario could be attempting to send a number instead of a string to the API and check the response. It should be a clear error message for the end user, that you can assert on.</li>
<li>Create a <code>test/scenarios</code> folder under if there are multiple API calls that need to be made in sequence. These examples are typically tests that need chcecks across mutliple API endpoints such as: email notifications, apikey creation and validation (create an api key > then attempt to log in with it), permission endpoints that require steps to not just validate the permission was created, but that the permission rules are followed.</li>
</ul>
<p>I'm sure there are few great practices that I missed but for now this should get you to a great starting point!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-15.png" alt="Image 10" /></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-12-best-practices/</p>
<p>Published Time: 2023-10-02T12:30:56.000Z</p>
如何使用共享session来加速 Playwright 运行速度
2023-09-25T00:00:00+00:00
2023-09-25T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/speeding-up-tests-execution-in-playwright-shared-session/
<p>测试执行越快越好 — 我们可以更快地检查更改的结果。然而,一如既往,这取决于我们正在测试的应用程序的复杂性。</p>
<h2 id="yong-li-miao-shu-jian-jie"><strong>用例描述 — 简介</strong></h2>
<p>假设我们有一个应用程序,它至少允许三种类型的用户:只读、读写和管理员。每种类型都有一些可以执行的专用操作,但 UI 通常是相同的。还有一个登录表单用于验证特定上下文。我们也可以假设我们至少有六个 <a href="https://playwright.dev/docs/next/api/class-test#test-describe-1">describe</a> — 在 Playwright (以及 Protractor) 中意味着测试组(或测试套件)。每个 describe 都在单个 spec 文件中 — 如下例所示。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:313/1*wNJjaL8-2bovtmvM3vIY7w.png" alt="图片 2" /></p>
<p>每个 describe 至少包含 3 个测试用例,这些测试完全独立于彼此。项目配置为使用 '<a href="https://playwright.dev/docs/next/api/class-testproject#test-project-fully-parallel"><strong>fullyParallel</strong></a>' 标志,该标志已启用。顺便说一下,每个 describe 都包含一个 '<a href="https://playwright.dev/docs/next/api/class-test#test-before-all-1"><strong>beforeAll</strong></a>' 钩子,其中执行登录过程。describe 内的测试使用相同的上下文,即相同的用户。因此,如果我们以 <a href="https://playwright.dev/docs/next/test-parallel#serial-mode"><strong>串行模式</strong></a> 运行,那么每个 describe 将只执行一次登录过程,然后测试将一个接一个地执行。但我们使用的是 <a href="https://playwright.dev/docs/next/api/class-testproject#test-project-fully-parallel"><strong>fullyParallel</strong></a> 模式,这意味着每个实例都将为自己执行登录过程。</p>
<p>第一个问题:如果我们只有 3 个用户上下文(只读、读写、管理员),为什么不只使用 3 个 '<strong>describe</strong>'?我的观点是,如果我们使用 <a href="https://playwright.dev/docs/next/api/class-testproject#test-project-fully-parallel"><strong>fullyParallel</strong></a> 模式,每个启动的浏览器实例都将为自己执行登录过程。我还有一种感觉,我们将套件分得越多,就越能更好地管理它们,并行性也越好。在我的实验中,有时同一个 describe 内的用例的并行执行会被阻塞 — 不知道为什么 — 也许是某些 playwright 功能。;)</p>
<p>言归正传:我们如何加速这个过程?这里我将重点关注登录过程。在 playwright 中,我们可以轻松处理浏览器的 session 存储,正如你所知,所有负责用户授权(或保持用户身份验证)的 cookie、令牌和其他内容都存储在那里。因此,有一个名为 <a href="https://playwright.dev/docs/next/api/class-browsercontext#browser-context-storage-state"><strong>storageState</strong></a> 的方法 — 允许你将所有浏览器存储导出到文件中。但如何使用它呢?让我们看看需要做哪些更改。</p>
<h2 id="shi-li-yong-fa"><strong>示例用法</strong></h2>
<p><strong>当前状态:</strong></p>
<p>示例 mati-qa-suite2.spec.js 内容:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*Rt0W-cF7hD7bAGZ3-1Hwkg.png" alt="图片 3" /></p>
<p>默认的 playwright.config.js:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*vV8rOAzhR1rYghknpNU6Zw.png" alt="图片 4" /></p>
<p>如你所见,登录过程是从辅助文件中导入的(因为我们试图保持 <strong>PageObjectPattern</strong>) — 所以,所有登录所需的代码都存储在那里。这里是该方法可能的样子:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*iVRC5ewpPFtBSs2A-dfeMQ.png" alt="图片 5" /></p>
<p>最后一行(使用 '<a href="https://playwright.dev/docs/next/api/class-locator#locator-wait-for"><strong>waitFor</strong></a>' 方法)是为了确保我们已登录并可以继续。所有的 spec.js 文件都类似,只是用户上下文不同(只读、读写、管理员)。因此,再次强调,由于 <strong>fullyParallel</strong> 模式,每个浏览器实例都将使用自己的身份验证 — 这可能需要长达 10 秒的时间。在最坏的情况下,它将尝试为每个测试单独进行用户身份验证 — 大约 18 次 — 180 秒 — 3 分钟。</p>
<p><strong>更改</strong></p>
<p>为了加速这些过程,需要进行以下更改:</p>
<p>将我们的登录过程调用提取到一个单独的 spec 文件中,比如 <strong>read-only.session-creator.spec.js</strong>。基本上,你只需创建一个新的 spec.js 文件,并从那里调用 loginToThePortal 方法。唯一的变化是添加一行代码,在成功登录后导出存储状态。以下是它可能的样子:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:666/1*CqSDEvGM2G01eKkSsFuYFw.png" alt="图片 6" /></p>
<p>如你所见,这几乎是一个常规的 spec.js 文件。唯一的区别是我们从 Playwright 导入 <strong>test</strong> 并将其别名为 <strong>setup</strong>(代码的第一行)。然后我们定义一个 const 变量,包含我们将存储收集的浏览器 session 的文件路径。无论文件是否存在 — 如果不存在,将创建文件;如果存在,将覆盖文件。然后有一个 '<strong>setup</strong> == <strong>test</strong>' 块,其中我们调用我们的登录方法,最后(第 10 行)我们使用 <strong>storageState</strong> 方法和参数路径(定义的变量)保存/保存浏览器 session 存储以供进一步使用。</p>
<p>在 playwright.config.js 中更改项目。我们需要为每个用户上下文添加一个额外的项目。这些项目只负责运行那些 session-creator.spec.js 文件。然后,我们需要为相关的测试套件添加依赖项。以下是其中一对可能的样子(由于我们有三个用户上下文,我们需要三对):</p>
<p><img src="https://miro.medium.com/v2/resize:fit:615/1*hLWGaPp6epvjddruA3pQ1g.png" alt="图片 7" /></p>
<p>如你所见,我们有一个具有特定名称的新项目和 <a href="https://playwright.dev/docs/next/api/class-testproject#test-project-test-match"><strong>testMatch</strong></a> 属性,它可以是正则表达式或应执行的套件的直接名称。在我们的示例中,这是我们的 read-only.session-creator.spec.js 文件。然后我们需要根据名称为我们的主项目添加依赖项(上面屏幕的第 25 行,等于第 20 行),并在 use 标签内,我们需要设置将使用的 <strong>storageState</strong>(第 28 行)。我们还应该更新/重新考虑我们的 spec 文件名。我在这里建议为每个 spec 文件添加用户上下文名称作为前缀。因此,我们将使用 read-only.mati-qa-suite1.spec.js 而不是 mati-qa-suite1.spec.js。我认为,这是根据用户上下文区分套件的最简单方法。我们也可以在 describe 中使用标签,但这样查找使用特定上下文的 spec 会有点痛苦,因为我们需要打开每个文件并查看 describe 标题。</p>
<p>在我们执行登录的地方进行小改动 — 我们只需要调用输入 URL,而不是登录过程。因此,在我们包含所有用例的主 describe 中,我们需要做以下更改:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*0x9wrBtkPLYO04L7Hl_eJA.png" alt="图片 8" /></p>
<p>就是这样。现在,无论运行多少个浏览器实例,每个用户流程登录只会运行一次 — 所以,总共 3 次。经过所有更改后,我们的 'spec 结构' 应该是这样的:</p>
<p><img src="https://miro.medium.com/v2/resize:fit:355/1*Ud2NjOqVeHEAEGq6icVTpA.png" alt="图片 9" /></p>
<p>当然,我们现在可以稍微组织一下(在文件夹之间拆分,例如,admin、read-write、read-only),但这只是一个例子,所以不必漂亮。;)</p>
<h2 id="jie-lun">结论</h2>
<p>如你所见,有时即使是这样一个简单的更改也可能加速你的测试执行速度。当然,一切都取决于具体情况,但在大多数情况下,如果你的 / 你正在测试的应用程序包含登录流程,使用这种方法(共享 session)总是比显式登录更好。你永远不知道,当你的测试数量超过 100 时,每一秒都很重要。所以,玩得开心,多试验。;)</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://mati-qa.medium.com/speeding-up-tests-execution-in-playwright-shared-session-aca3d4d1b092">URL 来源</a></p>
<p>发布时间: 2023-09-25</p>
The Definitive Guide to API Test Automation With Playwright: Part 11 - Adding Multi Environment Support
2023-09-25T00:00:00+00:00
2023-09-25T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-11-adding-multi-environment-support/
<p>In part 11 of this series I will cover how you can add multi environment support to your Playwright project. There are multiple ways to handle this depending on how you have built your project. I'll cover the way I handled it which includes having different .env files per environment. As an added bonus I'll also cover how I added an AI code review bot to my repository.</p>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub - playwrightsolutions/playwright-api-test-demo</a></p>
<h2 id="multi-environment-support">Multi-Environment Support</h2>
<p>Adding multi-environment support is a critical step in making the test automation project more useful to you and your team members. Adding this should allow us to run our automation against any of our environments (assuming we planned well on our test data strategy) along with the ability for developers to run the automation against their local developer environments.</p>
<p>If we go back to Part 1 of this series you can see where we implemented the <code>.env</code> file with a URL as an environment variable.</p>
<p><a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-1-basics-of-api-testing-get/">The Definitive Guide to API Test Automation With Playwright</a></p>
<p>As we proceeded our final environment variables included added:</p>
<ul>
<li><code>URL</code></li>
<li><code>ADMIN_NAME</code></li>
<li><code>ADMIN_PASSWORD</code></li>
<li><code>SECRET_API_KEY</code></li>
</ul>
<p>It's possible that these could be different values in different environments. There are multiple ways to account for these changes, you could just override environment variables when running your playwright tests with something like</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>URL=http://localhost:3000 npx playwright test
</span></code></pre>
<p>The above command would override the environment variable <code>URL</code> with whatever we passed in using the default <code>.env</code> variable that we have configured. This is a decent strategy if you don't require a lot of additional environment variables per environment. This is actually how I have things configured in my repositories at work with over 130 UI tests and over 1300 API tests. This setup runs against local dev environments, our staging environments, and any number of ephemeral environments with unique URLs we spin up based on every pull request in our different front end and back end repositories. This strategy does get out of hand if you have different test data in different environments that needs to be specified in your <code>.env</code> environments.</p>
<h3 id="adding-an-env-class">Adding an Env class</h3>
<p>The first thing I did was create an <code>Env</code> class that will allows me more easily have access to my environment variables. this will give me type-ahead capabilities for my environment variables.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ./lib/helpers/env.ts
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>Env {
</span><span> </span><span style="color:#ff5e5e;">public static readonly </span><span style="color:#e9fdac;">URL </span><span style="color:#ff5e5e;">= </span><span>process.env.URL;
</span><span> </span><span style="color:#ff5e5e;">public static readonly </span><span style="color:#e9fdac;">ADMIN_NAME </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_NAME</span><span>;
</span><span> </span><span style="color:#ff5e5e;">public static readonly </span><span style="color:#e9fdac;">ADMIN_PASSWORD </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span>;
</span><span> </span><span style="color:#ff5e5e;">public static readonly </span><span style="color:#e9fdac;">SECRET_API_KEY </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">SECRET_API_KEY</span><span>;
</span><span>}
</span></code></pre>
<p>Once this was in place I was able to update all the files in the repository where I was using a <code>process.env...</code> variable to specificy the environment variables. This included updating 8 files, which includes the below example.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// ./lib/helpers/createHeaders.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">Env </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/env</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// original
</span><span style="color:#6d6d6d;">// const username = process.env.ADMIN_NAME;
</span><span style="color:#6d6d6d;">// const password = process.env.ADMIN_PASSWORD;
</span><span>
</span><span style="color:#6d6d6d;">// new updates
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">Env</span><span>.</span><span style="color:#e9fdac;">ADMIN_NAME</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">Env</span><span>.</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span>;
</span></code></pre>
<h3 id="updates-to-playwright-config-ts">Updates to playwright.config.ts</h3>
<p>I also made some updates to <code>playwright.config.ts</code> to check for an environment variable named <code>test_env</code>. This allows you to specificy which environment you want to run the tests against. If this environment variable is specified, it will load the environment file <code>.env.${test_env}</code>. If the <code>test_env</code> environment variable is not set, it will use the original <code>.env</code> file we created, that logic is seen in the else block below.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span>
</span><span style="color:#6d6d6d;">/* This allows you to pass in a `test_env` environment variable
</span><span style="color:#6d6d6d;">to specify which environment you want to run the tests against */
</span><span style="color:#ff5e5e;">if </span><span>(process.env.</span><span style="color:#e9fdac;">test_env</span><span>) {
</span><span> </span><span style="color:#8cdaff;">config</span><span>({
</span><span> path: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">.env.${process.env.</span><span style="color:#e9fdac;">test_env</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> override: </span><span style="color:#ff8942;">true</span><span>,
</span><span> });
</span><span>} </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#8cdaff;">config</span><span>();
</span><span>}
</span></code></pre>
<p>Now that this code is in place I can add a new config <code>.env.local</code> which will allow me to run the automation suite against my local machine using this config.</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">//</span><span> .env.local
</span><span>
</span><span style="color:#e9fdac;">URL</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">http://localhost/
</span><span style="color:#e9fdac;">ADMIN_NAME</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">admin
</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">password
</span><span style="color:#e9fdac;">SECRET_API_KEY</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">secret
</span></code></pre>
<h3 id="running-the-system-under-test-locally">Running the System Under Test Locally</h3>
<p>In order to run the automation against a local environment we have to run the API server on our local machine, to do this we I'll clone the repository to my local machine from GitHub. The link to the repo is below. I'll use the <code>git clone</code> command utilizing SSH my prefered method.</p>
<p><a href="https://github.com/mwinteringham/restful-booker-platform/tree/trunk">GitHub - mwinteringham/restful-booker-platform</a></p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">//</span><span> from my terminal where I want to install the project I run
</span><span>
</span><span style="color:#e9fdac;">git</span><span> clone git@github.com:mwinteringham/restful-booker-platform.git
</span><span>
</span><span style="color:#e9fdac;">//</span><span> cd into the directory
</span><span style="color:#6699cc;">cd</span><span> restful-booker-platform
</span><span>
</span><span style="color:#e9fdac;">//</span><span> run docker compose command
</span><span style="color:#e9fdac;">docker</span><span> compose up
</span></code></pre>
<p>Once downloaded I <code>cd</code> into the directory and then run the docker command to create the developer environment using Docker Compose. If you have never used docker before getting started is easy, just <a href="https://docs.docker.com/get-docker/">download docker desktop</a>, and run it to initialize. Running the <code>docker compose up</code> command will utilize the <a href="https://github.com/mwinteringham/restful-booker-platform/blob/trunk/docker-compose.yml">docker-compose.yml</a> file that is a part of the repository, provided by the developer. Once run, all the api services will be spun up on different ports, along with the main web service which will be available on port <code>80</code>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-2.png" alt="Image 7" /></p>
<h3 id="running-the-tests-against-localhost">Running the tests against localhost</h3>
<p>Now to run the tests using the <code>.env.local</code> config file we will use this command from the playwright main directory (be sure to go here in your terminal from the previous step).</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">test_env</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">local </span><span style="color:#e9fdac;">npx</span><span> playwright test
</span></code></pre>
<p>Boom, all the tests ran against the local environment, this is double checked using the <code>npx playwright show-report</code> and going into the trace file to see the actual network request.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-3.png" alt="Image 8" /></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-4.png" alt="Image 9" /></p>
<h3 id="adding-a-script-to-make-running-this-easy">Adding a script to make running this easy!</h3>
<p>Now that we have a working example let's add a script to the <code>package.json</code> file to make running tests even easier in different configurations. I've added 2 different test configurations one for a staging environment an another for the local environment.</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span style="color:#6d6d6d;">// package.json
</span><span>..
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ut</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">jest --verbose</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:staging</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test_env=staging npx playwright test</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:local</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test_env=local npx playwright test</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="background-color:#f92649;color:#f8f8f0;">..</span><span>
</span><span> },
</span></code></pre>
<p>I also went ahead and updated Playwright to the latest version <code>[1.38.1](https://playwright.dev/docs/release-notes#version-138)</code> to take advantage of the latest updates to the trace viewer making it even easier to see the API requests when debugging.</p>
<p>A link to the initial implementation can be found below along with some other changes.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/13">Update env variables by BMayhew</a></p>
<h2 id="adding-ai-to-code-review-process">Adding AI to code review process</h2>
<p>I am using the GitHub Action <a href="https://github.com/coderabbitai/ai-pr-reviewer">ai-pr-reviewer</a>, using the file below. All the docs can be found on the docs of the action. I did modify the original action to utilize <code>gpt-3.5-turbo</code> mainly because I am cheap, knowing that I will have lower quality results. I also updated the output attempting to make the reviewer snarky, arrogant, opinionated, critical, funny, and using slang that millennials use.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#fbe3bf;">// .github/workflows/openai-pr-reviewer.yml
</span><span>
</span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Code Review
</span><span>
</span><span style="color:#ff5e5e;">permissions</span><span>:
</span><span> </span><span style="color:#ff5e5e;">contents</span><span>: </span><span style="color:#fbe3bf;">read
</span><span> </span><span style="color:#ff5e5e;">pull-requests</span><span>: </span><span style="color:#fbe3bf;">write
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">pull_request_review_comment</span><span>:
</span><span> </span><span style="color:#ff5e5e;">types</span><span>: [</span><span style="color:#fbe3bf;">created</span><span>]
</span><span>
</span><span style="color:#ff5e5e;">concurrency</span><span>:
</span><span> </span><span style="color:#ff5e5e;">group</span><span>: </span><span style="color:#fbe3bf;">${{ github.repository }}-${{ github.event.number || github.head_ref ||
</span><span> </span><span style="color:#fbe3bf;">github.sha }}-${{ github.workflow }}-${{ github.event_name ==
</span><span> </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">pull_request_review_comment</span><span style="color:#ffffff;">' </span><span style="color:#ff5e5e;">&</span><span>& </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">pr_comment</span><span style="color:#ffffff;">' </span><span style="color:#ff5e5e;">|</span><span style="background-color:#f92649;color:#f8f8f0;">| 'pr' }}</span><span>
</span><span style="color:#fbe3bf;"> cancel-in-progress: ${{ github.event_name != 'pull_request_review_comment' }}
</span><span style="color:#fbe3bf;">
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">review</span><span>:
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">coderabbitai/ai-pr-reviewer@latest
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">GITHUB_TOKEN</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.GITHUB_TOKEN }}
</span><span> </span><span style="color:#ff5e5e;">OPENAI_API_KEY</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.OPENAI_API_KEY }}
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">debug</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">review_simple_changes</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">review_comment_lgtm</span><span>: </span><span style="color:#ff8942;">false
</span><span> </span><span style="color:#ff5e5e;">openai_light_model</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">gpt-3.5-turbo</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">openai_heavy_model</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">gpt-3.5-turbo</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">summarize_release_notes</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> Craft concise release notes for the pull request.
</span><span style="color:#fbe3bf;"> Focus on the purpose and user impact, categorizing changes as "New Feature", "Bug Fix",
</span><span style="color:#fbe3bf;"> "Documentation", "Refactor", "Style", "Test", "Chore", or "Revert". Provide a bullet-point list,
</span><span style="color:#fbe3bf;"> e.g., "- New Feature: Added search functionality to the UI". Limit your response to 50-100 words
</span><span style="color:#fbe3bf;"> and emphasize features visible to the end-user while omitting code-level details. You should end
</span><span style="color:#fbe3bf;"> every summary with a funny pun or dad joke based on the code that you reviewed.
</span><span style="color:#fbe3bf;"> There is no need to call it a dad joke or put just say it. An example of a
</span><span style="color:#fbe3bf;"> dad joke is "I'm afraid for the calendar. Its days are numbered."
</span><span style="color:#fbe3bf;">
</span><span> </span><span style="color:#ff5e5e;">system_message</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> You are `@coderabbitai` (aka `github-actions[bot]`), a language model
</span><span style="color:#fbe3bf;"> trained by OpenAI. Your purpose is to act as a highly experienced
</span><span style="color:#fbe3bf;"> professional with focus on cloud-native. You should use slang words that
</span><span style="color:#fbe3bf;"> milenials use such as yeet, lit, bruh, fam, etc. You should also use emojis.
</span><span style="color:#fbe3bf;"> When you do respond, you should respond as arrogant
</span><span style="color:#fbe3bf;"> and snarkey letting the developer know that they are not as good as
</span><span style="color:#fbe3bf;"> you are. You should also be very opinionated and not afraid to share
</span><span style="color:#fbe3bf;"> your opinion. You should also be very critical of the developer's
</span><span style="color:#fbe3bf;"> code, and not let them off easy when they make an error. Whenever there
</span><span style="color:#fbe3bf;"> is a chance to make a joke or pun, you should do so.
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;"> Company context -
</span><span style="color:#fbe3bf;"> CodeRabbit is an AI-powered Code reviewer.It boosts code quality and cuts manual effort.
</span><span style="color:#fbe3bf;"> Offers context-aware, line-by-line feedback, highlights critical changes,
</span><span style="color:#fbe3bf;"> enables bot interaction, and lets you commit suggestions directly from GitHub.
</span><span style="color:#fbe3bf;">
</span><span style="color:#fbe3bf;"> When reviewing or generating content focus on key areas such as -
</span><span style="color:#fbe3bf;"> - Accuracy
</span><span style="color:#fbe3bf;"> - Relevance
</span><span style="color:#fbe3bf;"> - Clarity
</span><span style="color:#fbe3bf;"> - Technical depth
</span><span style="color:#fbe3bf;"> - Call-to-action
</span><span style="color:#fbe3bf;"> - SEO optimization
</span><span style="color:#fbe3bf;"> - Brand consistency
</span><span style="color:#fbe3bf;"> - Grammar and prose
</span><span style="color:#fbe3bf;"> - Typos
</span><span style="color:#fbe3bf;"> - Hyperlink suggestions
</span><span style="color:#fbe3bf;"> - Graphics or images (suggest Dall-E image prompts if needed)
</span><span style="color:#fbe3bf;"> - Empathy
</span><span style="color:#fbe3bf;"> - Engagement
</span></code></pre>
<p>The review can get a bit long, but it could be useful. The last thing you will need to do in order for the GitHub Action to work is to Create an <a href="https://platform.openai.com/overview">OpenAI API key</a> and add it as a GitHub Secret on your project like so <code>Settings > Secrets and variables > Actions > New repository secret</code>. It needs to be named <code>OPENAI_API_KEY</code>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-7.png" alt="Image 12" /></p>
<p>Once added on your pull requests you will see summaries also reviews of each files included like the screenshots below.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-5.png" alt="Image 13" /></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-6.png" alt="Image 14" /></p>
<p>A link to the review can be found here. I will say I've found mixed quality in the results, but it is really interesting to see how far technology is continuing to progress.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/16">Updating .env and playwright version by BMayhew</a></p>
<p>If you wanted to take this a step further you could even configure the GitHub Actions to run against different environments based on what Environment variable is passed in. This way you can truly automate your CI/CD pipelines. An example of how to trigger automation from another repo can be found below.</p>
<p><a href="https://playwrightsolutions.com/how-do-i-trigger-playwright-tests-to-run-across-repositories-using-github-actions/">How do I make a GitHub Action trigger</a></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-8.png" alt="Image 19" /></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-11-adding-multi-environment-support/</p>
<p>Published Time: 2023-09-25</p>
The Definitive Guide to API Test Automation With Playwright: Part 10 - Adding Unit Tests for Helpers
2023-09-18T00:00:00+00:00
2023-09-18T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-10-adding-unit-tests-for-helpers/
<p>Welcome back! In this weeks guide I'm going walk you through the a pull request that was made by a reader <a href="https://www.linkedin.com/in/adam-pajda-b0ba03118/">Adam Pajda</a>. He took some time and added unit tests around 4 different functions that I created through this series. For this article I will walk through the different code that was added and why.</p>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<p>All code that was added can be found in the pull request linked below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/15">Add Unit Tests support for some helpers functions by pajdekPL</a></p>
<h2 id="installation-and-docs">Installation and Docs</h2>
<p>First off for unit testing <a href="https://jestjs.io/">Jest</a> was the test framework of choice. A quote from the Jest documentation below.</p>
<blockquote>
<p>Jest is a delightful JavaScript Testing Framework with a focus on simplicity.</p>
</blockquote>
<p>Jest is a very popular testing framework. In the early days of Playwright before there was a built in JS/TS test runner, Jest was a popular choice to implement.</p>
<p><a href="https://jestjs.io/">Jest</a></p>
<p>To install Jest into your project use the command below to install jest, typescript, ts-jest, and @types/jest. this command will update your <code>package.json</code> file with the appopriate dependencies, so when you run install your dependencies <code>npm install</code> on other machines or in CI all the correct packages are installed.</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> i</span><span style="font-style:italic;color:#fc9354;"> -D</span><span> jest typescript ts-jest @types/jest
</span></code></pre>
<h2 id="creating-the-jest-project">Creating the Jest project</h2>
<p>The command to initialize a <code>ts-jest</code> project is below.</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> ts-jest config:init
</span></code></pre>
<p>This command will create a file <code>jest.config.js</code></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// What the init script creates
</span><span>
</span><span style="color:#6d6d6d;">/** </span><span style="font-style:italic;color:#fbdfb5;">@type </span><span style="color:#6d6d6d;">{import('ts-jest').JestConfigWithTsJest} */
</span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> preset: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ts-jest</span><span style="color:#ffffff;">"</span><span>,
</span><span> testEnvironment: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">node</span><span style="color:#ffffff;">"</span><span>,
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// jest.config.ts
</span><span>
</span><span style="color:#6d6d6d;">// Final edits to the config for our specific project
</span><span>
</span><span style="color:#6d6d6d;">/* eslint-disable @typescript-eslint/no-var-requires */
</span><span style="color:#6d6d6d;">/* eslint-disable no-undef */
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">pathsToModuleNameMapper </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ts-jest</span><span style="color:#ffffff;">"</span><span>);
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span>{ </span><span style="color:#e9fdac;">compilerOptions </span><span>} </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./tsconfig</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">/** </span><span style="font-style:italic;color:#fbdfb5;">@type </span><span style="color:#6d6d6d;">{import('ts-jest').JestConfigWithTsJest} */
</span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> preset: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ts-jest</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#6d6d6d;">//Below lines are added to make it possible to use paths from the tsconfig.json file in UTs
</span><span> modulePaths: [</span><span style="color:#e9fdac;">compilerOptions</span><span>.</span><span style="color:#e9fdac;">baseUrl</span><span>],
</span><span> moduleNameMapper: </span><span style="color:#8cdaff;">pathsToModuleNameMapper</span><span>(</span><span style="color:#e9fdac;">compilerOptions</span><span>.</span><span style="color:#e9fdac;">paths</span><span>),
</span><span> roots: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib</span><span style="color:#ffffff;">"</span><span>],
</span><span>};
</span></code></pre>
<p>With the final config we add some ESLint disable sections, and we also make it possible to utilize the paths we setup in the <code>tsconfig.json</code> file.</p>
<h2 id="writing-the-unit-tests">Writing the unit tests</h2>
<p>The unit tests we will add are around the helper functions</p>
<ul>
<li><code>createAssertions</code></li>
<li><code>createHeaders</code></li>
<li><code>schemaHelperFunctions</code></li>
</ul>
<p>I didn't write these unit tests, but I was able to follow through each one and understand what is being checked.</p>
<h3 id="create-assertions-tests">Create Assertions Tests</h3>
<p>Within this test, there is a single test case that checks if calling the <code>createAssertions</code> function has the proper output when passing in a complex json object (which would typically be a response body) into the function.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/tests/createAssertions.test.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createAssertions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createAssertions</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// eslint-disable-next-line @typescript-eslint/no-empty-function
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">log </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">spyOn</span><span>(</span><span style="color:#fbe3bf;">console</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">log</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">mockImplementation</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{});
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createAssertions</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createAssertions logs proper assertions to console</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">input </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> one: </span><span style="color:#fdb082;">1</span><span>,
</span><span> two: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2</span><span style="color:#ffffff;">"</span><span>,
</span><span> three: {
</span><span> four: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">4</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cuatro</span><span style="color:#ffffff;">"</span><span>],
</span><span> five: [
</span><span> {
</span><span> six: [],
</span><span> },
</span><span> {
</span><span> seven: </span><span style="color:#ff8942;">null</span><span>,
</span><span> },
</span><span> ],
</span><span> },
</span><span> };
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expectedLogConsoleCalls </span><span style="color:#ff5e5e;">= </span><span>[
</span><span> [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">expect(body.one).toBe(1);</span><span style="color:#ffffff;">"</span><span>],
</span><span> [</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">expect(body.two).toBe("2");</span><span style="color:#ffffff;">'</span><span>],
</span><span> [</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">expect(body.three.four).toEqual(["4","cuatro"]);</span><span style="color:#ffffff;">'</span><span>],
</span><span> [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">expect(body.three.five[0].six).toEqual([]);</span><span style="color:#ffffff;">"</span><span>],
</span><span> [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">expect(body.three.five[1].seven).toBeNull();</span><span style="color:#ffffff;">"</span><span>],
</span><span> ];
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createAssertions</span><span>(</span><span style="color:#e9fdac;">input</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">log</span><span>.</span><span style="color:#e9fdac;">mock</span><span>.</span><span style="color:#e9fdac;">calls</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">expectedLogConsoleCalls</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>The next set of tests is exercising the <code>createHeaders</code> and <code>createInvalidHeaders</code> functions. It also mocks external dependencies such as <code>Env</code> and <code>createCookies</code>.</p>
<p>The first test ensures that <code>createHeaders</code> returns the expected header when provided with a token. The second test verifies that <code>createHeaders</code> correctly calls <code>createCookies</code> with credentials from <code>Env</code> when no token is given. Lastly, there's a test to confirm that <code>createInvalidHeaders</code> generates a header with an invalid cookie. There is a heavy use of <code>jest.mock()</code>, which you can read more about in the <a href="https://jestjs.io/docs/mock-functions#mocking-modules">Jest Documentation</a>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/tests/createHeaders.test.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders</span><span>, </span><span style="color:#e9fdac;">createInvalidHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createCookies </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/auth</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">Env </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/env</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">mock</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/env</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>({
</span><span> __esModule: </span><span style="color:#ff8942;">true</span><span>,
</span><span> default: {
</span><span> URL: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedUrl</span><span style="color:#ffffff;">"</span><span>,
</span><span> ADMIN_NAME: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedAdminName</span><span style="color:#ffffff;">"</span><span>,
</span><span> ADMIN_PASSWORD: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedAdminPassword</span><span style="color:#ffffff;">"</span><span>,
</span><span> SECRET_API_KEY: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedSecretApiKey</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> namedExport: </span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">fn</span><span>(),
</span><span>}));
</span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">mock</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/auth</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createHeaders</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createHeaders return header with given token</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">input </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mockedToken</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expected </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">input</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">actual </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>(</span><span style="color:#e9fdac;">input</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">actual</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">expected</span><span>);
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createHeaders call createCookies with credentials from Env when token is not given</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createCookiesMock </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">mocked</span><span>(</span><span style="color:#e9fdac;">createCookies</span><span>);
</span><span> </span><span style="color:#e9fdac;">createCookiesMock</span><span>.</span><span style="color:#8cdaff;">mockResolvedValue</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">token=mockedToken</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expected </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mockedToken</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">actual </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">createCookies</span><span>).</span><span style="color:#8cdaff;">toHaveBeenCalledWith</span><span>(
</span><span> </span><span style="color:#e9fdac;">Env</span><span>.</span><span style="color:#e9fdac;">ADMIN_NAME</span><span>,
</span><span> </span><span style="color:#e9fdac;">Env</span><span>.</span><span style="color:#e9fdac;">ADMIN_PASSWORD
</span><span> );
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">actual</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">expected</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createInvalidHeaders</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should return header with invalid cookie</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expected </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cookie=invalid</span><span style="color:#ffffff;">"</span><span>,
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">actual </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createInvalidHeaders</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">actual</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">expected</span><span>);
</span><span> });
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="schema-helper-functions-tests">Schema Helper Functions Tests</h3>
<p>In this section we are actually creating 2 types of tests within two files. The first is an integration test, that tests more than one function. This test focuses on testing two functions: <code>writeJsonFile</code> and <code>createJsonSchema</code> from the <code>schemaHelperFunctions</code> module.</p>
<p>The <code>writeJsonFile</code> test ensures that the <code>writeJsonFile</code> function correctly writes data to the specified path, and it also cleans up the test file after the test.</p>
<p>The <code>createJsonSchema</code> test validates that the <code>createJsonSchema</code> function successfully creates and writes a new JSON schema file to a specific directory, verifying that the generated schema matches the expected schema structure. It also sets up and cleans up a test directory for this test.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/tests/schemaHelperFunctions.integration.test.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">createJsonSchema</span><span>,
</span><span> </span><span style="color:#e9fdac;">writeJsonFile</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaHelperFunctions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs/promises</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">schemaHelperFunctions Integration Tests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">writeJsonFile</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">inputFile </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/helpers/tests/fake.json</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">afterAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">unlink</span><span>(</span><span style="color:#e9fdac;">inputFile</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">writeJsonFile should write data properly to the given path</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">mockedData </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>({ some: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedField</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">writeJsonFile</span><span>(</span><span style="color:#e9fdac;">inputFile</span><span>, </span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">readFile</span><span>(</span><span style="color:#e9fdac;">inputFile</span><span>, { encoding: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf8</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">data</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span> });
</span><span> });
</span><span> </span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createJsonSchema</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">endpointDir </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mocked_endpoint</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">endpointFullPath </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">.api/${</span><span style="color:#e9fdac;">endpointDir</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schemaName </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">get_mocked</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">mkdir</span><span>(</span><span style="color:#e9fdac;">endpointFullPath</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">afterAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">rm</span><span>(</span><span style="color:#e9fdac;">endpointFullPath</span><span>, { recursive: </span><span style="color:#ff8942;">true</span><span>, force: </span><span style="color:#ff8942;">true </span><span>});
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should create and write a new schema file to the endpoints directory</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">endpointSchemaExpectedPath </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">endpointFullPath</span><span style="color:#fbe3bf;">}/${</span><span style="color:#e9fdac;">schemaName</span><span style="color:#fbe3bf;">}_schema.json</span><span style="color:#ffffff;">`</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">mockedData </span><span style="color:#ff5e5e;">= </span><span>{ some: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedField</span><span style="color:#ffffff;">" </span><span>};
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expected </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> type: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> properties: {
</span><span> some: {
</span><span> type: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> },
</span><span> required: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">some</span><span style="color:#ffffff;">"</span><span>],
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createJsonSchema</span><span>(</span><span style="color:#e9fdac;">schemaName</span><span>, </span><span style="color:#e9fdac;">endpointDir</span><span>, </span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">data </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">readFile</span><span>(</span><span style="color:#e9fdac;">endpointSchemaExpectedPath</span><span>, {
</span><span> encoding: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf8</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#e9fdac;">data</span><span>)).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">expected</span><span>);
</span><span> });
</span><span> });
</span><span>});
</span></code></pre>
<p>The second is test is a unit test that tests similar functions. In the first test the <code>writeJsonFile</code> function is exercised. The test ensures that <code>fs.writeFile</code> is called with the provided file path and data.</p>
<p>In the <code>createJsonSchema</code> test, it verifies that the <code>createJsonSchema</code> function utilizes the <code>createSchema</code> function from the "genson-js" library to create a schema based on provided data and then writes the resulting schema as JSON to a specified file path using <code>fs/promises</code>. Mocks are used to isolate these functions and capture their interactions.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/tests/schemaHelperFunctions.test.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createJsonSchema</span><span>, </span><span style="color:#e9fdac;">writeJsonFile </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaHelperFunctions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs/promises</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Schema</span><span>, </span><span style="color:#e9fdac;">createSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">genson-js</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">mock</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs/promises</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">mock</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">genson-js</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">schemaHelperFunctions</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">clearAllMocks</span><span>();
</span><span> });
</span><span> </span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">writeJsonFile</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should call fs.writeFile with given filePath and Data</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">inputFile </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mocked/input/path.json</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">mockedData </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>({ someMocked: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedField</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">writeJsonFile</span><span>(</span><span style="color:#e9fdac;">inputFile</span><span>, </span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#e9fdac;">writeFile</span><span>).</span><span style="color:#8cdaff;">toBeCalledWith</span><span>(</span><span style="color:#e9fdac;">inputFile</span><span>, </span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span> });
</span><span> });
</span><span> </span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">createJsonSchema</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createSchemaMock </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">jest</span><span>.</span><span style="color:#8cdaff;">mocked</span><span>(</span><span style="color:#e9fdac;">createSchema</span><span>);
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should create schema using createSchema from genson-js and write file using fs/promises</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">endpointPath </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mocked_endpoint</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schemaFile </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">get_mocked</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expectedFullPath </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.api/mocked_endpoint/get_mocked_schema.json</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">mockedData </span><span style="color:#ff5e5e;">= </span><span>{ someMocked: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">MockedField</span><span style="color:#ffffff;">" </span><span>};
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">mockedSchema </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> type: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> properties: {
</span><span> someMocked: {
</span><span> type: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> },
</span><span> required: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">someMocked</span><span style="color:#ffffff;">"</span><span>],
</span><span> } </span><span style="color:#ff5e5e;">as </span><span>Schema;
</span><span> </span><span style="color:#e9fdac;">createSchemaMock</span><span>.</span><span style="color:#8cdaff;">mockReturnValueOnce</span><span>(</span><span style="color:#e9fdac;">mockedSchema</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">expectedSchemaJsonContent </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">mockedSchema</span><span>, </span><span style="color:#ff8942;">null</span><span>, </span><span style="color:#fdb082;">2</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createJsonSchema</span><span>(</span><span style="color:#e9fdac;">schemaFile</span><span>, </span><span style="color:#e9fdac;">endpointPath</span><span>, </span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">createSchema</span><span>).</span><span style="color:#8cdaff;">toBeCalledWith</span><span>(</span><span style="color:#e9fdac;">mockedData</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#e9fdac;">writeFile</span><span>).</span><span style="color:#8cdaff;">toBeCalledWith</span><span>(</span><span style="color:#e9fdac;">expectedFullPath</span><span>, </span><span style="color:#e9fdac;">expectedSchemaJsonContent</span><span>);
</span><span> });
</span><span> });
</span><span>});
</span></code></pre>
<p>With the unit test additions <a href="https://www.linkedin.com/in/adam-pajda-b0ba03118/">Adam Pajda</a> also refactored the <code>schemaHelperFunctions.ts</code> file with changes that can be found <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/15/files#diff-1d40a1077f0749978b82e2033fb3389bbca5703a748cf761e2084b68db110ef1">here</a>. This included renaming one of my functions to make it more clear, and adding an export to one of the functions so the unit test could utilize the function in the test.</p>
<p>Running all the tests will give you the following output.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image-1.png" alt="Image 5" /></p>
<h2 id="updating-your-ci-pipeline">Updating your CI Pipeline</h2>
<p>Don't forget to add a script in your <code>package.json</code> file so you can run <code>npm run ut</code> to run the jest tests.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// package.json
</span><span>
</span><span style="color:#ff5e5e;">...
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ut</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">jest --verbose</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test:test</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test_env=test npx playwright test</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> },
</span><span style="color:#ff5e5e;">...
</span></code></pre>
<p>Now you can go ahead and update your GitHub actions file so this command is run whenever we make a pull request as a part of our CI pipeline.</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#fbe3bf;">// .github/workflows/run-playwright.yml
</span><span>---
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run lint
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run lint
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run prettier
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run prettier
</span><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run UnitTests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm run ut
</span></code></pre>
<p><img src="https://playwrightsolutions.com/content/images/2023/09/image.png" alt="Image 6" /></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-10-adding-unit-tests-for-helpers/</p>
<p>Published Time: 2023-09-18T12:30:33.000Z</p>
如何在 Playwright Test 中全局设置每个测试前后的钩子函数?
2023-09-04T00:00:00+00:00
2023-09-04T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-you-set-hooks-before-or-after-each-spec-globally-in-playwright-test/
<p>这是最近在 Playwright <a href="https://discord.com/channels/807756831384403968/1139590010111266816/1139590010111266816">Discord 频道</a>中有人提出的问题。</p>
<blockquote>
<p>我想在每个测试用例结束后对特定数据表进行某种"重置"操作。我可以在每个测试文件中设置 <code>afterAll</code> 钩子来实现,但这会导致大量重复代码(想象一下有 100 个测试文件)。所以我们之前在 <code>test.ts</code> 文件中添加了钩子函数。我们真的以为这样就能全局生效了。"哦,既然我们在测试文件中定义了这些钩子,它们就会像全局钩子一样工作"。但我们后来发现事实并非如此。我知道 Playwright 有全局的设置和清理函数,但据我所知它们只会在所有测试开始前和结束后各运行一次。我们确实需要一个在每个测试文件结束后运行的钩子函数。如果能在每个 <code>describe</code> 块后运行也可以,但我觉得我们无法覆盖它。这个功能目前是否在讨论或已被提出?如果没有,我该怎么做?或者有什么方法/技巧可以实现我们想要的效果?先谢谢大家!我很想听听你们的建议。</p>
</blockquote>
<p>帖子中的第一个回答是来自 <a href="https://www.linkedin.com/in/tallybarak/">Tally Barak</a> 的自动 fixture(Automatic Fixtures)链接。</p>
<p><a href="https://playwright.dev/docs/test-fixtures#automatic-fixtures">自动 fixture</a></p>
<p>自动 fixture</p>
<p>文档中说:"自动 fixture 会为每个测试/工作进程设置,即使测试没有直接列出它们。要创建自动 fixture,请使用元组语法并传递 <code>{ auto: true }</code>。"</p>
<p>这意味着只要在文件顶部导入了 fixture,无论 fixture 中包含什么内容,都会自动运行,而不需要在 <code>test()</code> 块中引用它。</p>
<p>下面的解决方案并不能完全满足原始需求,因为问题提出者想要在每个 describe 块后或每个测试文件 <code>xxxx.spec.ts</code> 完成后运行某些操作。据我所知,目前还无法实现这一点。下面的解决方案将涵盖在每个测试运行后执行 afterEach 的用例。</p>
<p>我只实现过几个 fixture,所以我想尝试为这个问题提供一个解决方案。下面是一个示例。这个 fixture 扩展了 <code>test</code> 类,允许在 <code>await use()</code> 之前添加代码(这些代码将在测试代码之前执行),而在 <code>await use()</code> 之后添加的代码将在测试代码之后执行。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/hook.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span><{ </span><span style="color:#e9fdac;">testHook</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">void </span><span>}>({
</span><span> testHook: [
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">来自fixture的 BEFORE EACH 钩子</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 这里的任何代码都将作为 before each 钩子运行
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>();
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">来自fixture的 AFTER EACH 钩子</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 在这里放置你想在每个测试后自动运行的代码
</span><span> },
</span><span> { auto: </span><span style="color:#ff8942;">true </span><span>},
</span><span> ],
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>; </span><span style="color:#6d6d6d;">// 从基础测试中导出 'expect',以便在 spec.ts 文件中使用
</span></code></pre>
<p>使用该 fixture 的测试规范如下。我在这里使用 <code>console.log()</code> 来展示每行代码的运行时机。注意,我在这个测试文件中做的唯一改变是从我们上面创建的 fixture <code>../../lib/fixtures/hook</code> 中导入 <code>test</code> 和 <code>expect</code>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/ui/hooks.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/fixtures/hook</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">最高层级</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">x</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span>;
</span><span> </span><span style="color:#e9fdac;">x </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">1</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">--所有测试之前的问候--</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">--所有测试之后的问候--</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;"><<每个测试之后的问候</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">>>每个测试之前的问候</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterAll</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">所有测试之后的问候</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试一</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">x</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试一 v2</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">x</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试二</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">x</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试二 v2</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">x</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>测试结果的输出如下所示。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-24.png" alt="Image 3" /></p>
<p>这些更改的 pull request 可以在这里找到。</p>
<p><a href="https://github.com/BMayhew/playwright-demo/pull/29">pull request</a></p>
<p>总结一下,如果你需要在每个测试之前或之后执行代码或捕获信息,使用这样的 fixture 可能会非常有用。</p>
<p>⚠️ 需要考虑的一个风险是,如果你在 before 或 after 钩子中通过数据库 seed 脚本(创建或删除数据库中数据的脚本)或重置脚本修改测试数据,并且运行多个 <code>shard</code> 或多个 <code>worker</code>,那么数据修改可能会影响其他正在运行的测试。</p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或考虑 <a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想在收件箱中收到更多内容,请在下方订阅,别忘了留下一个 ❤️ 来表示你的喜爱。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/how-do-you-set-hooks-before-or-after-each-spec-globally-in-playwright-test/</p>
<p>发布时间: 2023-09-04T12:30:14.000Z</p>
The Definitive Guide to API Test Automation With Playwright: Part 9 - Validating JSON Schema
2023-08-28T00:00:00+00:00
2023-08-28T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-9-validating-json-schema/
<p>Welcome back! In this weeks guide I'm going walk you through the tooling I use to help me create JSON schema snapshots, and asserting on those snapshots within Playwright API tests.</p>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<h2 id="what-is-json-schema">What is JSON Schema?</h2>
<blockquote>
<p><strong>JSON Schema</strong> is a declarative language that allows you to <strong>annotate</strong> and <strong>validate</strong> JSON documents. - <a href="https://json-schema.org/">json-schema.org</a></p>
</blockquote>
<p>This is different than OpenAPI spec but shares some similarities. I like to take a hands on approach when learning new things so let's dive right in.</p>
<p>For our testing I will capture the response body in json from the <code>booking/summary?roomid=1</code> test.</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookings</span><span style="color:#ffffff;">"</span><span>: [
</span><span> {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingDates</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkin</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2022-02-01</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkout</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2022-02-05</span><span style="color:#ffffff;">"
</span><span> }
</span><span> }
</span><span> ]
</span><span>}
</span></code></pre>
<p>As you can see this is very basic information, I took this body and took it over to <a href="https://www.jsonschema.net/app/schemas/329125">https://www.jsonschema.net/app/schemas/329125</a> with the following settings.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-19.png" alt="Image 2" /></p>
<p>And generated the following JSON schema</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">$schema</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://json-schema.org/draft/2019-09/schema</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">required</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookings</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">properties</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookings</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">array</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">items</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">required</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingDates</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">properties</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingDates</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">required</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkin</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkout</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">properties</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkin</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"
</span><span> },
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkout</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"
</span><span> }
</span><span> }
</span><span> }
</span><span> }
</span><span> }
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<p>As you can see the JSON schema give us all the information about the body that was received. This is a very simple example, as these can get very complex, especially using large response body where some values may be null while others are strings. What we will be using JSON schema for is validating that the snapshot we create and save actually matches our response body that we will convert to schema and then compare. To learn more about JSON Schema, check out the article below.</p>
<p><a href="https://testerops.com/2023/03/13/json-schema-validation/">JSON Schema</a></p>
<h2 id="validatejsonschema-ts">validateJsonSchema.ts</h2>
<p>I won't walk through each section of this code, but I do use the below libraries for different needs. <code>genson-js</code> for creating the schema we save to a file in the <code>.api/...</code> directory, and <code>ajv</code> for converting and comparing the live response from a test to the snapshot. We also use playwright <code>expect</code> in order to get feedback within the test report if the assertion fails.</p>
<p><a href="https://www.npmjs.com/package/ajv">ajv Another JSON Schema Validator</a></p>
<p><a href="https://www.npmjs.com/package/genson-js">genson-js</a></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/validateJsonSchema.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/schemaHelperFunctions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">Ajv </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ajv</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * Validates an object against a JSON schema.
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#6d6d6d;">{string} </span><span style="color:#e9fdac;">fileName</span><span style="color:#6d6d6d;"> - The first part of the name of the JSON schema file. The full name will be `${fileName}_schema.json`.
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#6d6d6d;">{string} </span><span style="color:#e9fdac;">filePath</span><span style="color:#6d6d6d;"> - The path to the directory containing the JSON schema file.
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#6d6d6d;">{object} </span><span style="color:#e9fdac;">body</span><span style="color:#6d6d6d;"> - The object to validate against the JSON schema.
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#6d6d6d;">{boolean} </span><span style="color:#e9fdac;">[createSchema</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">false]</span><span style="color:#6d6d6d;"> - Whether to create the JSON schema if it doesn't exist.
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * const body = await response.json();
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * // This will run the assertion against the existing schema file
</span><span style="color:#6d6d6d;"> * await validateJsonSchema("POST_booking", "booking", body);
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * // This will create or overwrite the schema file
</span><span style="color:#6d6d6d;"> * await validateJsonSchema("POST_booking", "booking", body, true);
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">validateJsonSchema</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">fileName</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">filePath</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">body</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">object</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">createSchema </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">false
</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">jsonName </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">fileName</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">path </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">filePath</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">createSchema</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createJsonSchema</span><span>(</span><span style="color:#e9fdac;">jsonName</span><span>, </span><span style="color:#e9fdac;">path</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// eslint-disable-next-line @typescript-eslint/no-var-requires
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">existingSchema </span><span style="color:#ff5e5e;">= </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">../../.api/${</span><span style="color:#e9fdac;">path</span><span style="color:#fbe3bf;">}/${</span><span style="color:#e9fdac;">jsonName</span><span style="color:#fbe3bf;">}_schema.json</span><span style="color:#ffffff;">`</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">ajv </span><span style="color:#ff5e5e;">= new </span><span>Ajv({ allErrors: </span><span style="color:#ff8942;">false </span><span>});
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">validate </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">ajv</span><span>.</span><span style="color:#6699cc;">compile</span><span>(</span><span style="color:#e9fdac;">existingSchema</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">validRes </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">validate</span><span>(</span><span style="color:#e9fdac;">body</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">validRes</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">SCHEMA ERRORS:</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">validate</span><span>.</span><span style="color:#e9fdac;">errors</span><span>),
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">RESPONSE BODY:</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">body</span><span>)
</span><span> );
</span><span> }
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">validRes</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span>}
</span></code></pre>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/schemaHelperFunctions.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">genson-js</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs/promises</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createJsonSchema</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">name</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">path</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">json</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">object
</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">filePath </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./.api/${</span><span style="color:#e9fdac;">path</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">mkdir</span><span>(</span><span style="color:#e9fdac;">filePath</span><span>, { recursive: </span><span style="color:#ff8942;">true </span><span>});
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schema </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">createSchema</span><span>(</span><span style="color:#e9fdac;">json</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schemaString </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">schema</span><span>, </span><span style="color:#ff8942;">null</span><span>, </span><span style="color:#fdb082;">2</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">schemaName </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">.api/${</span><span style="color:#e9fdac;">path</span><span style="color:#fbe3bf;">}/${</span><span style="color:#e9fdac;">name</span><span style="color:#fbe3bf;">}_schema.json</span><span style="color:#ffffff;">`</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">writeJsonFile</span><span>(</span><span style="color:#e9fdac;">schemaName</span><span>, </span><span style="color:#e9fdac;">schemaString</span><span>);
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">JSON Schema created and saved.</span><span style="color:#ffffff;">"</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">err</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#e9fdac;">err</span><span>);
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">writeJsonFile</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">location</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">data</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">writeFile</span><span>(</span><span style="color:#e9fdac;">location</span><span>, </span><span style="color:#e9fdac;">data</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">err</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#e9fdac;">err</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<p>To actually use this functionality in a test you will first need to create a schema file. For our example we will use the <code>booking.get.spec.ts</code> file. Before we start asserting on an existing JSON schema snapshot, we will need to generate one. By Importing the helper and adding this line after assigning the <code>body</code> variable in the test, you will be able to generate a JSON schema snapshot file.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET_booking_summary</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ff8942;">true</span><span>);
</span></code></pre>
<p>The full test can be seen here</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/booking/booking.get.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/summary
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders</span><span>, </span><span style="color:#e9fdac;">createInvalidHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateJsonSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">addWarning </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/warnings</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">invalidHeader</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> </span><span style="color:#e9fdac;">invalidHeader </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createInvalidHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET_booking_summary</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>The JSON schema file that gets created is below. If you compare this to the file we received from the online tool you will notice it is very similar.</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span style="color:#6d6d6d;">// .api/booking/GET_booking_summary_schema.json
</span><span>
</span><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">properties</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookings</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">array</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">items</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">properties</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingDates</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">properties</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkin</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"
</span><span> },
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkout</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"
</span><span> }
</span><span> },
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">required</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkin</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkout</span><span style="color:#ffffff;">"</span><span>]
</span><span> }
</span><span> },
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">required</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingDates</span><span style="color:#ffffff;">"</span><span>]
</span><span> }
</span><span> }
</span><span> },
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">required</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookings</span><span style="color:#ffffff;">"</span><span>]
</span><span>}
</span></code></pre>
<p>Now that we have the JSON schema snapshot we will need to update our function removing <code>true</code> as the last passed in parameter. The only time you should use that in the future is if you need to generate a new snapshot if the response body has changed.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET_booking_summary</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span></code></pre>
<p>Now we should be able to run the test and validate things pass! One thing I like to do when writing automation is making the test fail when it should fail. How can we really trust our tests if we aren't testing them? So for this example I will save a new variable from the <code>body</code>, response and modify it and pass it into the validateJsonSchema function.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/booking/booking.get.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/summary
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders</span><span>, </span><span style="color:#e9fdac;">createInvalidHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateJsonSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">addWarning </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/warnings</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">invalidHeader</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> </span><span style="color:#e9fdac;">invalidHeader </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createInvalidHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">badBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>;
</span><span> </span><span style="color:#e9fdac;">badBody</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">1234567890</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET_booking_summary</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">badBody</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>When running the test in this state this is the failure. The highest level error tells us that the validateJsonSchema failed. When viewing the test or the console.log() of the test run you can see the reasons why.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-20.png" alt="Image 9" /></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-22.png" alt="Image 10" /></p>
<p>The full error message is below, you can see we overwrote the <code>checkin</code> property with a <code>number</code> instead of an expected string in our test above. The validateJsonSchema failed because a <code>number</code> != <code>string</code>.</p>
<p>[{"instancePath":"/bookings/0/bookingDates/<strong>checkin</strong>","schemaPath":"#/properties/bookings/items/properties/bookingDates/properties/<strong>checkin</strong>/<strong>type</strong>","keyword":"type","params":{"<strong>type</strong>":"<strong>string</strong>"},"message":"must be string"}]</p>
<p>Hopefully you can see with that example how this can be a a really quick way to add some checks in place around JSON schema.</p>
<h2 id="things-to-look-out-for">Things to Look out For</h2>
<p>The JSON schema comparison isn't perfect, and won't solve all your problems, but it should help give you some guard rails. Here are a few things to consider as you add these assertions to your project.</p>
<ul>
<li>Depending on your API, if responses allow both values or <code>null</code> this can cause issues. for example let's say you create your schema for a GET all rooms, while only 1 room exists, but in reality there may be 10-15 rooms that have been created by your automation, that may have a null value (which may be allowed). Your snapshot doesn't match reality and your test will fail. If you create a new snapshot with the 10-15 rooms that had different data, that may be a workaround. That or updating the snapshot manually.</li>
<li>When new properties are added to your API response body, the snapshot will still pass, and you don't have any kind of alert/notice to investigate the new property. This may be something that can be overcome by updating the logic, but this is a risk I didn't plan on solving with this tool.</li>
<li>If you commit the <code>createSchema=true</code> to your repo, your test isn't checking against the recorded snapshot, and it's in a bad state. Luckily there is a workaround for that!</li>
</ul>
<h2 id="add-an-esling-rule">Add an ESLing rule</h2>
<p>If you followed the previous article we configured our project with ESLint and Husky for pre-commit hooks, if any of the linting from ESLint fails it will block you committing the code on your local machine. Knowing this I wanted to create a safeguard to prevent me from committing the <code>createSchema=true</code>.</p>
<p>In the below code snippet I've added a new custom rule for <code>no-restricted-syntax</code>. If you attempt to commit <code>validateJsonSchema(*,*,*,true)</code> the linter will block your commit and alert you to your mistake. Now I won't make that same mistake twice!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// .eslintrc.cjs
</span><span>
</span><span style="color:#6d6d6d;">/* eslint-env node */
</span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> extends: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">eslint:recommended</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">plugin:@typescript-eslint/recommended</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">plugin:@typescript-eslint/stylistic</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prettier</span><span style="color:#ffffff;">"</span><span>,
</span><span> ],
</span><span> parser: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint/parser</span><span style="color:#ffffff;">"</span><span>,
</span><span> plugins: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint</span><span style="color:#ffffff;">"</span><span>],
</span><span> root: </span><span style="color:#ff8942;">true</span><span>,
</span><span> rules: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">no-console</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">0</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">no-restricted-syntax</span><span style="color:#ffffff;">"</span><span>: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">"</span><span>,
</span><span> {
</span><span> selector: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">CallExpression[callee.property.name='only']</span><span style="color:#ffffff;">"</span><span>,
</span><span> message: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">We don't want to leave .only on our tests😱</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> {
</span><span> selector:
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">CallExpression[callee.name='validateJsonSchema'][arguments.length!=3]</span><span style="color:#ffffff;">"</span><span>,
</span><span> message: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">We don't want to commit validateJsonSchema(*,*,*,true)😎</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> ],
</span><span> },
</span><span>};
</span></code></pre>
<p>Now if I attempt to commit with a <code>true</code> in <code>validateJsonSchema()</code> I will get an error shown below. This should help prevent mistakes!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-27.png" alt="Image 11" /></p>
<h2 id="update-your-readme-md">Update your README.md</h2>
<p>Be a good steward, and document how you expect the function to be used within your repo. My readme example is below.</p>
<h3 id="json-schema">Json Schema</h3>
<p>We generate json schemas with a <code>POST, PUT, PATCH and GET</code> test but not with a delete. To generate a json schema. An example of a test that generates a schema is below. It's best to follow the similar naming conventions</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// Creates a snapshot of the schema and save to .api/booking/POST_booking_schema.json
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST_booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ff8942;">true</span><span>);
</span><span>
</span><span style="color:#6d6d6d;">// Asserts that the body matches the snapshot found at .api/booking/POST_booking_schema.json
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST_booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span></code></pre>
<p>Example of how this is used in a test:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateJsonSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ POST requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST new booking with full body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: </span><span style="color:#e9fdac;">requestBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST_booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="updating-a-test-to-not-be-flaky">Updating a test to not be flaky</h2>
<p>The spec that was flaky was the <code>tests/booking/booking.put.spec.ts</code> specifically the first test. The main issue is we hard coded the <code>roomid</code> as 1, which is a room that is a part of the seed data. The problem with this is to be able to make a <code>PUT</code> request to a booking we have to create a booking. When using <code>roomid</code> as 1, there are other tests that use <code>roomid</code> 1 creating data, so when we attempt to get a future booking date, there is another tests getting a similar booking date, and I would get a <code>409</code> response letting me know there was a conflict, another booking was already booked for that time slot. With the built in retries in Playwright it would pass the 2nd time it ran most of the time, but we can easily refactor it to not be flaky at all.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/booking/booking.put.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: PUT /booking/{id}
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">getBookingById</span><span>,
</span><span> </span><span style="color:#e9fdac;">futureOpenCheckinDate</span><span>,
</span><span> </span><span style="color:#e9fdac;">createFutureBooking</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate</span><span>, </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders</span><span>, </span><span style="color:#e9fdac;">createInvalidHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createRoom </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/room</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">validateJsonSchema </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/validateJsonSchema</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/{id} PUT requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">invalidHeader</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">bookingId</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">room</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">firstname </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Happy</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">lastname </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">McPathy</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">depositpaid </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">false</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">email </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testy@mcpathyson.com</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">phone </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">5555555555555</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureBooking</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureCheckinDate</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> </span><span style="color:#e9fdac;">invalidHeader </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createInvalidHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">room </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRoom</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Flaky</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#fdb082;">67</span><span>);
</span><span> </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">room</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>;
</span><span> </span><span style="color:#e9fdac;">futureBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createFutureBooking</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="color:#e9fdac;">bookingId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureBooking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>;
</span><span> </span><span style="color:#e9fdac;">futureCheckinDate </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">PUT booking with specific room id</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">firstname</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">booking </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">booking</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingdates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">validateJsonSchema</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT_booking_id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">body</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Verify booking was updated</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBookingBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getBookingById</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBookingDates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span> });
</span><span> });
</span><span>});
</span></code></pre>
<p>What was really nice about this change is I only had to add/update 4 lines of code.</p>
<ul>
<li><code>import{createRoom}from"@datafactory/room"</code> importing the createRoom datafactory</li>
<li><code>let room;</code> and updated <code>let roomId;</code> within the describe block</li>
<li>I updated the beforeEach block to have<code>room = await createRoom("Flaky", 67);</code> and then <code>roomId = room.roomid;</code></li>
</ul>
<p>Once this was updated, this spec is no longer flaky, because we are creating a room specifically for this tests, and not relying on static data, which was getting modified. Again, one of the hardest problems in test automation is TEST DATA!</p>
<h2 id="warning-message-functionality">Warning Message Functionality</h2>
<p>I won't cover this too much as there isn't quite a use case for this yet, but I did add the ability to create and send warning messages from within your tests, that can print out in the console after all your tests run.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-23.png" alt="Image 12" /></p>
<p>Below is an example how you could call this within a test. I've found this useful when you may want to notify your future self, without failing an actual test.</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>await addWarning("This test should be refactored: '" + test.info().title + "' to use custom assertions");
</span></code></pre>
<p>You can dig through the Pull Request and see the changes made with this article including the <code>addWarning()</code> function.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/11">Json schema by BMayhew</a></p>
<h2 id="final-notes">Final Notes</h2>
<p>The way I a checking for JSON schema is 1 of many ways to accomplish this goal. The below article <a href="https://www.linkedin.com/in/tim-deschryver/">Tim Deschryver</a> who has some great <a href="https://timdeschryver.dev/blog?q=Playwright">Playwright content</a>, walks us through how to validate using <a href="https://zod.dev/">zod</a>.</p>
<p><a href="https://timdeschryver.dev/blog/playwright-api-testing-with-zod">Playwright API testing with zod</a></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-28.png" alt="Image 17" /></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-9-validating-json-schema/</p>
<p>Published Time: 2023-08-28T12:30:39.000Z</p>
The Definitive Guide to API Test Automation With Playwright: Part 8 - Adding ESlint, Prettier, and Husky
2023-08-21T00:00:00+00:00
2023-08-21T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-8-adding-eslint-prettier-and-husky/
<p>I'm a big fan of consistency within a codebase. I somewhat care less about the specifics as long as it's the same. Today I'll cover extra tooling that are common in the JS/TS ecosystem to help solve common errors and consistency. If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far.</p>
<ul>
<li><a href="https://eslint.org/">ESLint</a> - ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.</li>
<li><a href="https://prettier.io/">Prettier</a> - An opinionated code formatter - By far the biggest reason for adopting Prettier is to stop all the ongoing debates over styles.</li>
<li><a href="https://typicode.github.io/husky/">Husky</a> - Modern native git hooks made easy</li>
</ul>
<p>Each of these tools bring something different to the table. In this guide I'll be covering how I currently configure these tool in my repos.</p>
<h2 id="eslint">ESLint</h2>
<p>For ESLint I will be using a typescript-eslint, following this <a href="https://typescript-eslint.io/getting-started">guide</a>. This is the command <code>npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript</code>. This will install all the depencies that we need.</p>
<p>Next create a file <code>.eslintrc.cjs</code> at the root of the directory, this will be our config file.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// .eslintrc.cjs
</span><span>
</span><span style="color:#6d6d6d;">/* eslint-env node */
</span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> extends: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">eslint:recommended</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">plugin:@typescript-eslint/recommended</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">plugin:@typescript-eslint/stylistic</span><span style="color:#ffffff;">"</span><span>,
</span><span> ],
</span><span> parser: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint/parser</span><span style="color:#ffffff;">"</span><span>,
</span><span> plugins: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint</span><span style="color:#ffffff;">"</span><span>],
</span><span> root: </span><span style="color:#ff8942;">true</span><span>,
</span><span> parserOptions: {
</span><span> project: </span><span style="color:#ff8942;">true</span><span>,
</span><span> tsconfigRootDir: __dirname,
</span><span> },
</span><span>};
</span></code></pre>
<p>Running <code>npx eslint .</code> will run ESLint and you will more than likely have a lot of errors. This is because all files in the directory are being linted, there are many files that we don't care about such as the files in the <code>node_modules</code> folder or our playwright test folders, let's make sure those aren't in the scope of our lint command by creating an ignore file. Creating a file named <code>.eslintignore</code> at the root directory and add the following text.</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span>
</span><span style="color:#e9fdac;">//</span><span> .eslintignore
</span><span>
</span><span style="color:#6d6d6d;"># Playwright Specific
</span><span style="color:#e9fdac;">node_modules/
</span><span style="color:#e9fdac;">test-results/
</span><span style="color:#e9fdac;">playwright-report
</span><span style="color:#e9fdac;">summary.json
</span><span>
</span><span style="color:#6d6d6d;"># IDE - VSCode
</span><span style="color:#e9fdac;">.vscode/*
</span><span>
</span><span style="color:#6d6d6d;"># System Files
</span><span style="color:#e9fdac;">.DS_Store
</span><span style="color:#e9fdac;">Thumbs.db
</span><span style="color:#e9fdac;">{</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mode</span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">:</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">full</span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">,</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">isActive</span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">:false</span><span>}
</span><span>
</span><span style="color:#6d6d6d;"># Docs files
</span><span style="color:#e9fdac;">*_spec3.json
</span></code></pre>
<p>Now if you run <code>npx eslint .</code> you will notice a much smaller number, and if your code is the exact same as mine, you will have the below output.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-2.png" alt="Image 1" /></p>
<p>I would highly encourage you to take time and read each new error you come across, and understand the "why" to why the linter isn't happy. I've learned a lot about good coding practices from linting my own code over the years in Ruby (<a href="https://rubocop.org/">RuboCop</a> I still remember our love hate relationship).</p>
<p>Once you have a decent understanding of the changes, you can also utilize ESLint to "fix" our issues if it knows how by passing in the --fix option into the command like so <code>npx eslint . --fix</code>. After doing this I went ahead and ran all the tests to ensure that all the code is still functional, and all tests passed. Now when I run my <code>npx eslint .</code> command I have 15 failures that I need to resolve on my own.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-3.png" alt="Image 2" /></p>
<p>I took 5 minutes and was able to update all but 1 of the issues in my files. The specific error was 'createAssertions' is defined but never used. This is an import statement, where I have <code>createHeaders()</code> commented out in my code below. I want to keep the import there, and have ESLint ignore that line of code. To accomplish this I add a comment to the line that I want ignored <code>// eslint-disable-line</code>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/room/room.get.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /room/
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /room/{id}
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createRoom</span><span>, </span><span style="color:#e9fdac;">defaultRoom </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/room</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createAssertions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createAssertions</span><span style="color:#ffffff;">"</span><span>; </span><span style="color:#6d6d6d;">// eslint-disable-line
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">room/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">room</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId</span><span>;
</span><span style="color:#ff5e5e;">...</span><span>..
</span></code></pre>
<p>Now when re-running the linter I have everything passing! Go ahead and take a few minutes and read through all the other ways you can disable ESLint at the below site. The below is a great resource worth bookmarking.</p>
<p><a href="https://learn.coderslang.com/favicon.png">How to disable ESLint for some lines, files or folders ESLint</a>](https://learn.coderslang.com/0023-eslint-disable-for-specific-lines-files-and-folders/)</p>
<p>Now onto prettier, what we will be using for our formatting/styling needs.</p>
<h2 id="prettier">Prettier</h2>
<p>For Prettier we will continue to use the typescript-eslint guide linked below.</p>
<p><a href="https://typescript-eslint.io/linting/troubleshooting/formatting">What About Formatting?</a></p>
<p>Before we install we need to install this package eslint-config-prettier. This will disable settings that may conflict with the prettier plugin.</p>
<p><code>npm install --save-dev eslint-config-prettier</code></p>
<p>Once installed we will need to update our ESLint config file by adding <code>prettier</code> to the extends array.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// eslintrc.cjs
</span><span>
</span><span style="color:#6d6d6d;">/* eslint-env node */
</span><span style="color:#fbe3bf;">module</span><span>.</span><span style="color:#fbe3bf;">exports </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> extends: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">eslint:recommended</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">plugin:@typescript-eslint/recommended</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">plugin:@typescript-eslint/stylistic</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prettier</span><span style="color:#ffffff;">"</span><span>,
</span><span> ],
</span><span> parser: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint/parser</span><span style="color:#ffffff;">"</span><span>,
</span><span> plugins: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@typescript-eslint</span><span style="color:#ffffff;">"</span><span>],
</span><span> root: </span><span style="color:#ff8942;">true</span><span>,
</span><span>};
</span></code></pre>
<p>Now we should install Prettier itself as a node package. The guide I'm using to install Prettier can be found <a href="https://prettier.io/docs/en/install">here</a> on their site. The command to install is <code>npm install --save-dev --save-exact prettier</code>.</p>
<p>Now you will still need to create a <code>.prettierrc</code> file in your projects root directory. This file will include the configurations you want prettier to use, mine is below. The different options that can be added/edited can be found in the docs <a href="https://prettier.io/docs/en/options">here</a>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// .prettierrc
</span><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">semi</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">trailingComma</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">es5</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">singleQuote</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">false</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">printWidth</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">120
</span><span>}
</span></code></pre>
<p>You should also go ahead and create a <code>.prettierignore</code> file that should look the same as your <code>.eslintignore</code>.</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">//</span><span> .prettierignore
</span><span style="color:#6d6d6d;"># Playwright Specific
</span><span style="color:#e9fdac;">node_modules/
</span><span style="color:#e9fdac;">test-results/
</span><span style="color:#e9fdac;">playwright-report
</span><span style="color:#e9fdac;">summary.json
</span><span>
</span><span style="color:#6d6d6d;"># IDE - VSCode
</span><span style="color:#e9fdac;">.vscode/*
</span><span>
</span><span style="color:#6d6d6d;"># System Files
</span><span style="color:#e9fdac;">.DS_Store
</span><span style="color:#e9fdac;">Thumbs.db
</span><span style="color:#e9fdac;">{</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mode</span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">:</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">full</span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">,</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">isActive</span><span style="color:#ffffff;">"</span><span style="color:#e9fdac;">:false</span><span>}
</span><span>
</span><span style="color:#6d6d6d;"># Docs files
</span><span style="color:#e9fdac;">*_spec3.json
</span></code></pre>
<p>Now that we have that in place let's run the prettier command and see the results. <code>npx prettier . --check</code>. When I ran this command this was my output.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-5.png" alt="Image 7" /></p>
<p>To go ahead and apply the changes prettier wants to make, you can run the command <code>npx prettier . --write</code>. A full list of CLI commands can be found in their <a href="https://prettier.io/docs/en/cli">docs</a>. Once the files are updated, I will go ahead and commit and push them to my working branch. At this point, we have a working ESLint command and working prettier command. Now how can we force ourselves, teams, and collaborators to use this tools without thinking about it?</p>
<h2 id="husky">Husky</h2>
<p>We will utilize a package called <a href="https://typicode.github.io/husky/">Husky</a> to help us create and manage our local git pre-commit hooks. This will allow us to insert commands to run our tooling before we commit code to our local branch every single time. I'll be following this <a href="https://typicode.github.io/husky/getting-started.html">guide</a>. The first command that needs to be run <code>npx husky-init && npm install</code>. This command will:</p>
<ul>
<li>Add <code>prepare</code> script to <code>package.json</code></li>
<li>Create a sample <code>pre-commit</code> hook that you can edit in the directory .husky/pre-commit</li>
<li>Configure Git hooks path</li>
</ul>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-6.png" alt="Image 8" /></p>
<p>The default file is above, We will modify this file to run the commands that we want to run as a part of a pre-commit. Before we just add the long commands that were listed in this article, we should go ahead and create some scripts in our <code>package.json</code> file to make things simpler. In the scripts section let's add a scripts for the following. This will allow us to run <code>npm run lint</code> and have all our files linted.</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span style="color:#6d6d6d;">// package.json
</span><span>
</span><span>....
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test --ui</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lint</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">eslint .</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lint:fix</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">eslint . --fix</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prettier</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prettier . --check</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prettier:fix</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prettier . --write</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">prepare</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">husky install</span><span style="color:#ffffff;">"
</span><span> },
</span><span> ....
</span></code></pre>
<p>Let's go back to our <code>.husky/pre-commit</code> file and modify the file to include 2 of the scripts we just created.</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">//</span><span> .husky/pre-commit
</span><span>
</span><span style="color:#6d6d6d;">#!/usr/bin/env sh
</span><span style="color:#6699cc;">. </span><span style="color:#ffffff;">"$</span><span style="color:#fbe3bf;">(</span><span style="color:#e9fdac;">dirname</span><span style="color:#ff5e5e;"> -- </span><span style="color:#ffffff;">"$</span><span style="color:#e9fdac;">0</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">)/_/husky.sh</span><span style="color:#ffffff;">"
</span><span>
</span><span style="color:#e9fdac;">npm</span><span> run lint </span><span style="color:#ff5e5e;">&& </span><span style="color:#e9fdac;">npm</span><span> run prettier
</span></code></pre>
<p>Now we should be able to add our files, and attempt to commit our code and our commands should run by default. Below is an example of the checks running and everything passing with no issue, which allowed the commit to be created.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-7.png" alt="Image 9" /></p>
<p>Sometimes though you will try and commit code that will fail the linter, this is what the error will look like, when this happens. This will block your commit from committing, and force you to fix the issue before proceeding. The nice thing is we just created a command that should fix the lint issues if is automatically fixable <code>npm run lint:fix</code>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-8.png" alt="Image 10" /></p>
<p>pre-commit ESLint failure</p>
<p>Similarly when you attempt to commit code that doesn't meet the prettier formatting, you will receive an error that matches the below, and your commit will not be committed. You must update the file(s) in question with the correct formatting, this can be achieved by <code>npm run prettier:fix</code> to run the custom script we created.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-10.png" alt="Image 11" /></p>
<p>pre-commit prettier failure</p>
<p>If you ever run into a situation where you want to break the rules and force a commit, you can add a <code>--no-verify</code> option to the end of your git commit message. Ex: <code>git commit -m "forcing the commit" --no-verify</code>. This is not something that should be done often if even at all, but this will allow you to bypass the checks if needed. If you force the commit more than likely other folks that work in your repo will be faced with the same error when they pull down the changes that caused the error. USE WISELY....</p>
<h2 id="update-your-readme">Update your Readme</h2>
<p>One thing that irks me when working in a new repo is not having all the information I need to get started in some sort of documentation. Below is an example of what I've added to my readme, so everyone can get up to speed in contributing with pre-commit hooks after cloning the repo down.</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>// README.md
</span><span>
</span><span>...
</span><span>## Contributing to playwright-api-test-demo
</span><span>
</span><span>### Husky, ESLint, and Prettier
</span><span>
</span><span>We use a mix of [Husky](https://github.com/typicode/husky), [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) within our repository to help enforce consistent coding practices. Husky is a tool that will install a pre-commit hook to run the linter any time before you attempt to make a commit. This replaces the old pre-commit hook that was used before. to install the pre-commit hook you will need to run
</span><span>
</span><span>```bash
</span><span>npm run prepare
</span><span>
</span><span>npx husky install
</span><span>```
</span><span>
</span><span>You shouldn't have to run this command but for reference, the command used to generate the pre-commit file was
</span><span>
</span><span>```bash
</span><span>npx husky add .husky/pre-commit "npm run lint && npm run prettier"
</span><span>```
</span><span>
</span><span>You are still able to bypass the commit hook by passing in --no-verify to your git commit message if needed.
</span><span>ESLint is a popular javascript/typescript linting tool. The configuration for ESLint can be found in `.eslintrc.cjs` file. Prettier, helps with styling (spaces, tabs, quotes, etc), config found in `.prettierrc`.
</span><span>...
</span><span>
</span><span>## Extending ESLint to account for custom errors
</span><span>
</span><span>One of my big problems that I used to run into a lot before ESLint was introduced into my life, was accidentally committing `.only` into my test files. I would use this syntax `test.only()` to execute/debug a single test quickly from the command line. When the `.only` would get committed it would only run that 1 test as a part of our CI and cause a lot of back and forth. To solve this I created a custom error rule and added it to my `eslintrc.cjs`. See the rules section specifically `no-restricted-syntax`. I set the message as error, and followed the docs to create a matcher that would flag this issue and block commits with a custom message.
</span><span>
</span><span>```javascript
</span><span>// eslintrc.cjs
</span><span>
</span><span>/* eslint-env node */
</span><span>module.exports = {
</span><span> extends: [
</span><span> "eslint:recommended",
</span><span> "plugin:@typescript-eslint/recommended",
</span><span> "plugin:@typescript-eslint/stylistic",
</span><span> "prettier",
</span><span> ],
</span><span> parser: "@typescript-eslint/parser",
</span><span> plugins: ["@typescript-eslint"],
</span><span> root: true,
</span><span> "rules": {
</span><span> "no-console": 0,
</span><span> "no-restricted-syntax": [
</span><span> "error",
</span><span> {
</span><span> "selector": "CallExpression[callee.property.name='only']",
</span><span> "message": "We don't want to leave .only on our tests😱"
</span><span> },
</span><span>
</span><span> ],
</span><span> },
</span><span>};
</span><span>```
</span><span>
</span><span>
</span><span>
</span><span>The sky is the limit on what you can do with this knowledge!
</span><span>
</span><span>## Other Resources
</span><span>
</span><span>I personally don't use the `eslint-plugin-playwright` but it can easily be added to the ESLint configuration and setup you just created for your repo. Start by Installing `npm install -D eslint-plugin-playwright` and updating `.eslintrc.cjs` to include `"plugin:playwright/recommended"` in the extends array you can have access to some specific Playwright rules.
</span><span>
</span><span>[eslint-plugin-playwright ESLint](https://www.npmjs.com/package/eslint-plugin-playwright?activeTab=readme)
</span><span>
</span><span>### VS Code Extensions
</span><span>
</span><span>These VS code extensions are helpful as they will give you feedback
</span><span>
</span><span>[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
</span><span>
</span><span>[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
</span><span>
</span><span>### VS Code Settings file
</span><span>
</span><span>The last recommendation that I enjoy enabling for my repos is the auto format/auto save. Below is my setting file which also includes some eslint settings as well that I found [here](https://www.aleksandrhovhannisyan.com/blog/format-code-on-save-vs-code-eslint/#automatically-formatting-code-on-save).
</span><span>
</span><span>```
</span><span>// .vscode/settings.json
</span><span>
</span><span>{
</span><span> "eslint.validate": ["javascript", "typescript"],
</span><span> "editor.codeActionsOnSave": {
</span><span> "source.fixAll.eslint": true
</span><span> },
</span><span> "editor.formatOnSave": true,
</span><span> "editor.defaultFormatter": "esbenp.prettier-vscode",
</span><span>}
</span><span>```
</span><span>
</span><span>You should be all set and good to go with all the changes, you now can have consistency within your files, and an extra set of checks that will help guard you from pushing bad code to your repository!
</span><span>
</span><span>All the code I added is available in this repo.
</span><span>
</span><span>[GitHub - playwrightsolutions/playwright-api-test-demo: This repository will serve as a place where I add API test Automation checks for articles written at https://playwrightsolutions.com This repository will serve as a place where I add API test Automation checks for articles written at https://playwrightsolutions.com - GitHub - playwrightsolutions/playwright-api-test-demo: This re... GitHubplaywrightsolutions ](https://github.com/playwrightsolutions/playwright-api-test-demo)
</span><span>
</span><span>
</span><span>
</span><span>---
</span><span>
</span><span>Thanks for reading! If you found this helpful, reach out and let me know on [LinkedIn](https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew) or consider [buying me a cup of coffee](https://ko-fi.com/butchmayhew). If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.
</span><span>
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-8-adding-eslint-prettier-and-husky/</p>
<p>Published Time: 2023-08-21T12:30:22.000Z</p>
如何使用组件来重构playwright的代码
2023-08-20T00:00:00+00:00
2023-08-20T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-component-demo/
<h2 id="playwright-component-demo">playwright-component-demo</h2>
<p>基于组件模型重写的 Playwright TodoMVC 应用演示测试测试用例</p>
<h2 id="dong-ji">动机</h2>
<p>页面对象模型（pom）是组织测试代码的推荐方法。然而,对于大型应用来说,许多元素在不同页面间保持不变,如导航栏、页眉和页脚。这不仅涉及相同的部分,还包括可复用的部分。</p>
<p>以表格为例。通常应用会有一个用于渲染表格内部组件,并在各处使用。因此,编写涉及表格的测试时,所需的逻辑基本上是一样的。许多情况下,应用还会有基于表格组件的复合组件,添加特定逻辑,如带搜索功能的用户表格或可排序的发票表格。</p>
<p>这种可可复用性和可组合性使得基于组件的模型成 web 前端开发的最佳方式。那么,为什么不在编写自动化测试用例时采用同样的方法呢?</p>
<h2 id="shi-xian">实现</h2>
<p>我们的核心思想是创建一个中间层的组件来抽象具体的 web 应用,所有测试都基于这些组件。TodoMVC 演示应用的组件可以在<code>tests/components</code>文件夹中找到。</p>
<p>一般情况下模版是这样的:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">Component </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">parent</span><span>, </span><span style="font-style:italic;color:#fc9354;">options </span><span style="color:#ff5e5e;">= </span><span>{}</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">self </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">parent</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ff5e5e;">...</span><span>); </span><span style="color:#6d6d6d;">// 组件根节点的定位器
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">child </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">self</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ff5e5e;">...</span><span>); </span><span style="color:#6d6d6d;">// 过于简单而不需要单独成为组件的子元素
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">otherComponent </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">options</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">OtherComponent</span><span>(</span><span style="color:#e9fdac;">self</span><span>, </span><span style="color:#e9fdac;">options</span><span>); </span><span style="color:#6d6d6d;">// 子组件
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 组件的操作隐藏了内部细节,不暴露具体使用哪个子元素或组件
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">someAction </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">child</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">anotherAction </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">param</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">otherComponent</span><span>({ </span><span style="color:#e9fdac;">param </span><span>}).</span><span style="color:#8cdaff;">action</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 导出具体的API接口:
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#e9fdac;">someAction</span><span>,
</span><span> </span><span style="color:#e9fdac;">anotherAction</span><span>,
</span><span> </span><span style="color:#8cdaff;">expect</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>({
</span><span> </span><span style="color:#ff5e5e;">...</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">locator</span><span>), </span><span style="color:#6d6d6d;">// 复制Playwright的所有标准断言
</span><span> </span><span style="color:#8cdaff;">toHaveCustomCondition</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">child</span><span>).</span><span style="color:#8cdaff;">toHaveClass</span><span>(</span><span style="color:#ff5e5e;">...</span><span>) </span><span style="color:#6d6d6d;">// 自定义断言以隐藏内部细节
</span><span> })
</span><span> };
</span><span>}
</span></code></pre>
<p>在测试用例中的使用示例:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">component </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">Component</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">component</span><span>.</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">component</span><span>.</span><span style="color:#8cdaff;">someAction</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">component</span><span>.</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toHaveCustomCondition</span><span>();
</span><span>});
</span></code></pre>
<h2 id="dui-bi">对比</h2>
<p>以下是原始测试和更新后测试的几个对比:</p>
<h4 id="shi-li-1">示例 1</h4>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">应该允许我将所有项目标记为已完成</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 完成所有待办事项
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByLabel</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">全部标记为完成</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">check</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 确保所有待办事项都有'completed'类
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">todo-item</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toHaveClass</span><span>([
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">completed</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">completed</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">completed</span><span style="color:#ffffff;">"</span><span>,
</span><span> ]);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">checkNumberOfCompletedTodosInLocalStorage</span><span>(</span><span style="color:#e9fdac;">page</span><span>, </span><span style="color:#fdb082;">3</span><span>);
</span><span>});
</span></code></pre>
<p>对比</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">应该允许我将所有项目标记为已完成</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 完成所有待办事项
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">Header</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">completeAll</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 确保所有待办事项都有'completed'类
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">TodoList</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toHaveAllCompleted</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">checkNumberOfCompletedTodosInLocalStorage</span><span>(</span><span style="color:#e9fdac;">page</span><span>, </span><span style="color:#fdb082;">3</span><span>);
</span><span>});
</span></code></pre>
<h4 id="shi-li-2">示例 2</h4>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">当没有已完成的项目时应该隐藏</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.todo-list li .toggle</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">first</span><span>().</span><span style="color:#8cdaff;">check</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">清除已完成</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">清除已完成</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toBeHidden</span><span>();
</span><span>});
</span></code></pre>
<p>对比</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">当没有已完成的项目时应该隐藏</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">TodoList</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">todoAt</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#8cdaff;">complete</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">footer </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">Footer</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#8cdaff;">clearCompleted</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toAllowClearCompleted</span><span>(</span><span style="color:#ff8942;">false</span><span>);
</span><span>});
</span></code></pre>
<h4 id="shi-li-3">示例 3</h4>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">应该高亮当前应用的过滤器</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">全部</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toHaveClass</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">selected</span><span style="color:#ffffff;">"
</span><span> );
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">活动</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 页面变化 - 活动项目
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">活动</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toHaveClass</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">selected</span><span style="color:#ffffff;">"
</span><span> );
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">已完成</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// 页面变化 - 已完成项目
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">已完成</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toHaveClass</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">selected</span><span style="color:#ffffff;">"
</span><span> );
</span><span>});
</span></code></pre>
<p>对比</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">应该高亮当前应用的过滤器</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">footer </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">Footer</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#6699cc;">link</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">全部</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toBeSelected</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#8cdaff;">selectLink</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">活动</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 页面变化 - 活动项目
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#6699cc;">link</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">活动</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toBeSelected</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#8cdaff;">selectLink</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">已完成</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 页面变化 - 已完成项目
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">footer</span><span>.</span><span style="color:#6699cc;">link</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">已完成</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">expect</span><span>().</span><span style="color:#8cdaff;">toBeSelected</span><span>();
</span><span>});
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://github.com/vangelov/playwright-component-demo</p>
The Definitive Guide to API Test Automation With Playwright: Part 7 - Creating Helper Functions for Common tasks
2023-08-14T00:00:00+00:00
2023-08-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-7-creating-helper-functions-for-common-tasks/
<p>Welcome back as we continue our series on API Test Automation with Playwright! Today I'll walk through the changes made in the pull request, which include:</p>
<ul>
<li>Helper Functions</li>
<li>Create Assertion Helper</li>
<li>Update to Absolute paths instead of Relative paths</li>
<li>branding, message, report, and room endpoint coverage to 100%</li>
</ul>
<p>If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. The pull request with comments and code changes is listed below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/9">adding additional coverage by BMayhew · Pull Request #9</a></p>
<h2 id="helper-functions">Helper Functions</h2>
<h3 id="branding-helper">Branding helper</h3>
<p>There are two main helper functions that I created during my coding session. The first was <code>lib/helpers/branding.ts</code> which is just a variable export for a 2 different json objects to help with the branding api test. The below spec file found below handles both the GET and PUT api requests. The branding api handles what brand the website is using, for example name of the business, phone number, address, email, welcome photo, latitude, longitude, etc. Changing the branding will change the way the site renders, which is something to consider when it comes to the state of the website/api. If there are other tests that are expecting this branding information (which we will change with our <code>PUT</code> request) those tests will more than likely fail.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-13.png" alt="Image 4" /></p>
<p>With this context in mind, I made a choice to but both the <code>GET</code> and <code>PUT</code> tests within the same test file. With my current configuration, they will not run at the same time, even if I am running my tests in parallel. Notice I am importing <code>defaultBranding</code> and <code>updatedBranding</code> from the branding helper. One other thing to note with the <code>PUT</code> spec, I am utilizing an <code>afterEach</code> block where I update the branding to the default setting.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/branding/branding.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /branding/
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: PUT /branding/
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defaultBranding</span><span>, </span><span style="color:#e9fdac;">updatedBranding </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/branding</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">defaultBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">defaultBranding</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET website branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">defaultBody</span><span>);
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// This test has the potential to cause other UI tests to fail as this branding endpoint is a critical part of the entire UI of the website
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/ PUT requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">defaultBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">defaultBranding</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">updatedBody </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">updatedBranding</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">defaultBody</span><span>,
</span><span> });
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT website branding</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">updatedBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">202</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updatedBody</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>For the helper file, I am keeping this very simple, I am exporting two variables as JSON objects that I can use for the api request body in my tests. I decided to hard code these values as there didn't seem like a lot of value to randomize the inputs here, as the branding information is likely not to change often once it's set.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/branding.ts
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">defaultBranding </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Shady Meadows B&B</span><span style="color:#ffffff;">"</span><span>,
</span><span> map: {
</span><span> latitude: </span><span style="color:#fdb082;">52.6351204</span><span>,
</span><span> longitude: </span><span style="color:#fdb082;">1.2733774</span><span>,
</span><span> },
</span><span> logoUrl: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.mwtestconsultancy.co.uk/img/rbp-logo.png</span><span style="color:#ffffff;">"</span><span>,
</span><span> description:
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Welcome to Shady Meadows, a delightful Bed & Breakfast nestled in the hills on Newingtonfordburyshire. A place so beautiful you will never want to leave. All our rooms have comfortable beds and we provide breakfast from the locally sourced supermarket. It is a delightful place.</span><span style="color:#ffffff;">"</span><span>,
</span><span> contact: {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Shady Meadows B&B</span><span style="color:#ffffff;">"</span><span>,
</span><span> address: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">The Old Farmhouse, Shady Street, Newfordburyshire, NE1 410S</span><span style="color:#ffffff;">"</span><span>,
</span><span> phone: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">012345678901</span><span style="color:#ffffff;">"</span><span>,
</span><span> email: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fake@fakeemail.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">updatedBranding </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Test Name</span><span style="color:#ffffff;">"</span><span>,
</span><span> map: {
</span><span> latitude: </span><span style="color:#fdb082;">41.8781</span><span>,
</span><span> longitude: </span><span style="color:#fdb082;">87.6298</span><span>,
</span><span> },
</span><span> logoUrl: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://media.tenor.com/KaCUHzQxVWcAAAAC/house.gif</span><span style="color:#ffffff;">"</span><span>,
</span><span> description: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">description</span><span style="color:#ffffff;">"</span><span>,
</span><span> contact: {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Testy McTester</span><span style="color:#ffffff;">"</span><span>,
</span><span> address: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">100 Testing Way</span><span style="color:#ffffff;">"</span><span>,
</span><span> phone: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">5555555555</span><span style="color:#ffffff;">"</span><span>,
</span><span> email: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testy@testymtesterface.com</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>};
</span></code></pre>
<h3 id="room-features-helper">Room features helper</h3>
<p>The rooms helper we have built has a bit more functionality. First off we do have a variable named <code>roomFeatures</code> which is an array of different types of features/test data that we will be using, a function that returns all room features, one that returns a random room feature, and one that will return X number of room features you pass into the function. Having these helpers makes it easy to quickly generate random data for our tests and allow me to simplify my datafactory methods.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/roomFeatures.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">roomFeatures </span><span style="color:#ff5e5e;">= </span><span>[
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">TV</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">WiFi</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Safe</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mini Bar</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Tea/Coffee</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Balcony</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bath</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Shower</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sea View</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mountain View</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">City View</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">River View</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Garden View</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Pool View</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Patio</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Terrace</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Air Conditioning</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Heating</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Kitchen</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dining Area</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sofa</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Fireplace</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Private Entrance</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Soundproofing</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Wardrobe</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Clothes Rack</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Ironing Facilities</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Desk</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Seating Area</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Sofa Bed</span><span style="color:#ffffff;">"</span><span>,
</span><span>];
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">allRoomFeatures</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">roomFeatures</span><span>;
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">randomRoomFeatures</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">roomFeatures</span><span>[
</span><span> </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">number</span><span>.</span><span style="color:#8cdaff;">int</span><span>({ min: </span><span style="color:#fdb082;">0</span><span>, max: </span><span style="color:#e9fdac;">roomFeatures</span><span>.length </span><span style="color:#ff5e5e;">- </span><span style="color:#fdb082;">1 </span><span>})
</span><span> ];
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">randomRoomFeaturesCount</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">count</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">features </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span>
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>; </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">count</span><span>; </span><span style="color:#e9fdac;">i</span><span style="color:#ff5e5e;">++</span><span>) {
</span><span> </span><span style="color:#e9fdac;">features</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#8cdaff;">randomRoomFeatures</span><span>());
</span><span> }
</span><span> </span><span style="color:#6d6d6d;">// This will remove all duplicates from the array
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#fbe3bf;">Array</span><span>.</span><span style="color:#8cdaff;">from</span><span>(</span><span style="color:#ff5e5e;">new </span><span>Set(</span><span style="color:#e9fdac;">features</span><span>));
</span><span>}
</span></code></pre>
<p>One of the specs that I've updated was the <code>room.put.spec.ts</code>, by adding a 2nd test utilizing the <code>randomRoomFeaturesCount()</code> function. Adding this spec was very easy, before I make a <code>PUT</code> call to the API endpoint, I create a variable <code>randomFeatures</code> with an array of 10 random room features, I then use the existing <code>updateRoomBody</code> (which gets set in the <code>beforeEach</code> block) and overwrite the values for the <code>features</code> with the 10 random room features. Then make the <code>PUT</code> api request, and validate the response of the features is the same as the <code>randomFeatures</code> variable we set earlier.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/room/room.put.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: PUT /room/{id}
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createRoom</span><span>, </span><span style="color:#e9fdac;">createRandomRoomBody </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/room</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">randomRoomFeaturesCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/roomFeatures</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">room/ PUT requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">room</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">authHeaders</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">updateRoomBody</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">room </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRoom</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#fdb082;">50</span><span>);
</span><span> </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">room</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>;
</span><span> </span><span style="color:#e9fdac;">authHeaders </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> </span><span style="color:#e9fdac;">updateRoomBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRandomRoomBody</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT /room to update values</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/room/${</span><span style="color:#e9fdac;">roomId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">authHeaders</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">updateRoomBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">202</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.name).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.name);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">accessible</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">accessible</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.description).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.description);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">features</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">features</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">image</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">image</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">roomName</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">roomName</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.type).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.type);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT /room to update features</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">randomFeatures </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">randomRoomFeaturesCount</span><span>(</span><span style="color:#fdb082;">10</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Overwrites the features array with random features
</span><span> </span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">features </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">randomFeatures</span><span>;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/room/${</span><span style="color:#e9fdac;">roomId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">authHeaders</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">updateRoomBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">202</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.name).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.name);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">accessible</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">accessible</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.description).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.description);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">features</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">randomFeatures</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">image</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">image</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">roomName</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.</span><span style="color:#e9fdac;">roomName</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.type).</span><span style="color:#8cdaff;">toEqual</span><span>(</span><span style="color:#e9fdac;">updateRoomBody</span><span>.type);
</span><span> });
</span><span>});
</span></code></pre>
<p>I also simplified our <code>room</code> datafactory utilizing <code>randomRoomFeaturesCount()</code> function to create random room features. Now anytime a new room is created using <code>createRandomRoomBody()</code> there will be random features returned. If you follow along with the code you will see that I am actually setting a variable named <code>features</code> to <code>randomRoomFeaturesCount(6)</code>, and replace my hardcoded features list.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-14.png" alt="Image 5" /></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/room.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">randomRoomFeaturesCount </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/roomFeatures</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createRandomRoomBody</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">roomName</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">roomPrice</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">number
</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomType </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Single</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Double</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Twin</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">features </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">randomRoomFeaturesCount</span><span>(</span><span style="color:#fdb082;">6</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> roomName: </span><span style="color:#e9fdac;">roomName </span><span style="color:#ff5e5e;">|| </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">string</span><span>.</span><span style="color:#8cdaff;">numeric</span><span>(</span><span style="color:#fdb082;">3</span><span>),
</span><span> type: </span><span style="color:#e9fdac;">roomType</span><span>[</span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">floor</span><span>(</span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">* </span><span style="color:#e9fdac;">roomType</span><span>.length)], </span><span style="color:#6d6d6d;">// returns a random value from the array
</span><span> accessible: </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">< </span><span style="color:#fdb082;">0.5</span><span>, </span><span style="color:#6d6d6d;">//returns true or false
</span><span> image: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">image</span><span>.</span><span style="color:#8cdaff;">urlLoremFlickr</span><span>({
</span><span> category: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cat</span><span style="color:#ffffff;">"</span><span>,
</span><span> width: </span><span style="color:#fdb082;">500</span><span>,
</span><span> height: </span><span style="color:#fdb082;">500</span><span>,
</span><span> }),
</span><span> description: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">hacker</span><span>.</span><span style="color:#8cdaff;">phrase</span><span>(),
</span><span> features: </span><span style="color:#e9fdac;">features</span><span>.</span><span style="color:#6699cc;">sort</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#fdb082;">0.5 </span><span style="color:#ff5e5e;">- </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>()).</span><span style="color:#6699cc;">slice</span><span>(</span><span style="color:#fdb082;">0</span><span>, </span><span style="color:#fdb082;">3</span><span>), </span><span style="color:#6d6d6d;">// returns 3 random values from the array
</span><span> roomPrice: </span><span style="color:#e9fdac;">roomPrice </span><span style="color:#ff5e5e;">|| </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">string</span><span>.</span><span style="color:#8cdaff;">numeric</span><span>(</span><span style="color:#fdb082;">3</span><span>),
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">roomBody</span><span>;
</span><span>}
</span></code></pre>
<h2 id="createassertions">createAssertions()</h2>
<p>The next helper to be discussed is <code>createAssertions()</code>. All the credit for this goes to <a href="https://www.linkedin.com/in/sgapanovich/">Sergei Gapanovich</a> for the JS/TS implementation, and <a href="https://www.linkedin.com/in/joel-black-1344a267/">Joel Black</a>, for the O.G. Ruby implementation which I discussed in a <a href="https://www.ministryoftesting.com/testbash-talks/1f8d5688?s_id=15535642">Ministry of Testing Test.Bash() talk</a>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-15.png" alt="Image 6" /></p>
<p>The helper code is below for our Playwright repo as an async function, that requires 2 parameters to be passed, first the body object and second a name for the object, typically "body" that the assertion builder will use.</p>
<p>🌮</p>
<p>Big thanks to <a href="https://www.linkedin.com/in/pakhilov/">Dmitry Pakhilov</a> for a suggestion to simply the createAssertions.ts file by removing the index loop and using a for loop!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helper/createAssertions.ts
</span><span>
</span><span style="color:#6d6d6d;">/* eslint-disable @typescript-eslint/prefer-for-of */
</span><span>
</span><span style="color:#6d6d6d;">/*
</span><span style="color:#6d6d6d;"> this function logs in console ready to use expects
</span><span style="color:#6d6d6d;"> example: passing the following object (body) to the function
</span><span style="color:#6d6d6d;"> {
</span><span style="color:#6d6d6d;"> "one": 1,
</span><span style="color:#6d6d6d;"> "two": "2",
</span><span style="color:#6d6d6d;"> "three": {
</span><span style="color:#6d6d6d;"> "four": ["4", "cuatro"],
</span><span style="color:#6d6d6d;"> "five": [
</span><span style="color:#6d6d6d;"> {
</span><span style="color:#6d6d6d;"> "six": []
</span><span style="color:#6d6d6d;"> },
</span><span style="color:#6d6d6d;"> {
</span><span style="color:#6d6d6d;"> "seven": null
</span><span style="color:#6d6d6d;"> }
</span><span style="color:#6d6d6d;"> ]
</span><span style="color:#6d6d6d;"> }
</span><span style="color:#6d6d6d;"> }
</span><span style="color:#6d6d6d;">
</span><span style="color:#6d6d6d;"> would generate the following ready to use assertions:
</span><span style="color:#6d6d6d;">
</span><span style="color:#6d6d6d;"> expect(body.one).toBe(1);
</span><span style="color:#6d6d6d;"> expect(body.two).toBe("2");
</span><span style="color:#6d6d6d;"> expect(body.three.four).toEqual(["4","cuatro"]);
</span><span style="color:#6d6d6d;"> expect(body.three.five[0].six).toEqual([]);
</span><span style="color:#6d6d6d;"> expect(body.three.five[1].seven).toBe(null);
</span><span style="color:#6d6d6d;">*/
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createAssertions</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">object</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">object</span><span>, </span><span style="font-style:italic;color:#fc9354;">paramName </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">body</span><span style="color:#ffffff;">")</span><span style="color:#ff5e5e;">: </span><span>Promise<</span><span style="color:#fbe3bf;">void</span><span>> {
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">key </span><span style="color:#ff5e5e;">in </span><span style="color:#e9fdac;">object</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">object</span><span>[</span><span style="color:#e9fdac;">key</span><span>];
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">expect(${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}).toBe("${</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">}");</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">=== </span><span style="color:#ff8942;">null</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">expect(${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}).toBeNull();</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">expect(${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}).toBe(${</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">});</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#fbe3bf;">Array</span><span>.</span><span style="color:#8cdaff;">isArray</span><span>(</span><span style="color:#e9fdac;">value</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">value</span><span>.length </span><span style="color:#ff5e5e;">=== </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">expect(${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}).toEqual([]);</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">value</span><span>[</span><span style="color:#fdb082;">0</span><span>] </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">object</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#8cdaff;">createAssertions</span><span>(</span><span style="color:#e9fdac;">value</span><span>, </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newArray </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">value</span><span>.</span><span style="color:#8cdaff;">map</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">item</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string </span><span style="color:#ff5e5e;">| </span><span style="color:#fbe3bf;">number </span><span style="color:#ff5e5e;">| </span><span style="color:#fbe3bf;">null</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">item </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">? </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">"${</span><span style="color:#e9fdac;">item</span><span style="color:#fbe3bf;">}"</span><span style="color:#ffffff;">` </span><span style="color:#ff5e5e;">: </span><span>(</span><span style="color:#e9fdac;">item </span><span style="color:#ff5e5e;">as </span><span style="color:#fbe3bf;">number</span><span>)
</span><span> );
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">expect(${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}).toEqual([${</span><span style="color:#e9fdac;">newArray</span><span style="color:#fbe3bf;">}]);</span><span style="color:#ffffff;">`</span><span>);
</span><span> }
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#fbe3bf;">Object</span><span>.</span><span style="color:#6699cc;">keys</span><span>(</span><span style="color:#e9fdac;">value</span><span>).length </span><span style="color:#ff5e5e;">=== </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">expect(${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}).toEqual({});</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#6699cc;">parseInt</span><span>(</span><span style="color:#e9fdac;">key</span><span>) </span><span style="color:#ff5e5e;">>= </span><span style="color:#fdb082;">0</span><span>) {
</span><span> </span><span style="color:#8cdaff;">createAssertions</span><span>(</span><span style="color:#e9fdac;">value</span><span>, </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}[${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}]</span><span style="color:#ffffff;">`</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#8cdaff;">createAssertions</span><span>(</span><span style="color:#e9fdac;">value</span><span>, </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">paramName</span><span style="color:#fbe3bf;">}.${</span><span style="color:#e9fdac;">key</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span> }
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<p>So let's see this in action. I use the reports get spec to demonstrate how this works, the code is below the video walk through. When adding <code>await createAssertions(body, "body")</code> after we make an API call, we get a console.log message with our assertions. It is not a good idea to copy, paste, commit these assertions blindly, you will need to think through how best to modify the assertions to work for what you want to test for. For the spec below I used the expects to build out a for loop to do basic date validations and string validations as the data returned from this endpoint will never be consistent.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/reports/reports.get.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /report/
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /report/room/{id}
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createFutureBooking </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createRoom </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/room</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createAssertions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createAssertions</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">report/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">room</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> </span><span style="color:#e9fdac;">room </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRoom</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createFutureBooking</span><span>(</span><span style="color:#e9fdac;">room</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET a report</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/report/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Leaving this here for demo purposes
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">createAssertions</span><span>(</span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">body</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// I am asserting on each booking in the report array
</span><span> </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>.</span><span style="color:#6699cc;">forEach</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">booking</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.start)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">end</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">booking</span><span>.title).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET room report by id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/report/room/${</span><span style="color:#e9fdac;">room</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">roomid</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>[</span><span style="color:#fdb082;">0</span><span>].start)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">end</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">report</span><span>[</span><span style="color:#fdb082;">0</span><span>].title).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Unavailable</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>This is a really useful tool and gets even more useful the larger the Body that is returned.</p>
<h2 id="updating-to-absolute-paths">Updating to Absolute paths</h2>
<p>One quality of life change that I made with this pull request was update my imports to use Absolute paths. This is a feature that Typescript offers, and really makes the code look a lot cleaner.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-16.png" alt="Image 7" /></p>
<p>To enable this functionality I had to create a <code>tsconfig.json</code> file at my root directory, and use the compilerOptions > paths to allow absolute paths. More details about path mapping can be found within the <a href="https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping">docs</a>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tsconfig.json
</span><span>
</span><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">compilerOptions</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">baseUrl</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#6d6d6d;">// This must be specified if "paths" is.
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">paths</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@datafactory/*</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/datafactory/*</span><span style="color:#ffffff;">"</span><span>],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@helpers/*</span><span style="color:#ffffff;">"</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/helpers/*</span><span style="color:#ffffff;">"</span><span>],
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<h2 id="endpoint-coverage-to-100">Endpoint coverage to 100%</h2>
<p>I was able to add coverage for all the rest of the endpoints. This did include branding, message, report, and room endpoints. The message endpoint also had a datafactory for <code>message</code> as well that is worth checking out on the <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pulls">Pull Request</a>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-17.png" alt="Image 8" /></p>
<p>What's nice is if new endpoints get added to the existing areas our coverage percentage will drop and we can take action. If you need a refresher on how we built the endpoint coverage check out <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-5-calculating-endpoint-coverage/">Part 5 of the series</a>. Also keep in mind, the 100% means we have at least 1 test per endpoint, not scenario that should be tested 😁.</p>
<p>The pull request can be found below with all the changes that were made this round.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/9">adding additional coverage by BMayhew · Pull Request #9 · playwrightsolutions/playwright-api-test-demo Summary by CodeRabbitNew Features: Added new modules for managing messages, room configurations, branding data, and room features.Enhanced booking.ts with updated faker methods for more realisti... <img src="https://github.com/fluidicon.png" alt="Image 9" />GitHubplaywrightsolutions <img src="https://opengraph.githubassets.com/e92d1ed099daeb413e715cc56c0a7fd79bdaddd010666b77e0b0a5e382746859/playwrightsolutions/playwright-api-test-demo/pull/9" alt="Image 10" /></a></p>
<h2 id="challenge-for-you">Challenge for you!</h2>
<p>One thing that I realize as I run my suite, there is 1 flaky test that will pass after a single retry, that can be refactored. If you are following along or want to test your skills, pull down the repo in its current state, and see if you can find a way to make the spec less flakey.</p>
<p>In light of reaching 100% coverage!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-18.png" alt="Image 11" /></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-7-creating-helper-functions-for-common-tasks/</p>
<p>Published Time: 2023-08-14T12:30:25.000Z</p>
Playwright 中能否对特定的 spec 文件设置重试次数
2023-08-07T00:00:00+00:00
2023-08-07T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/is-it-possible-to-override-retry-attempts-on-a-specific-spec-file-in-playwright-expect-poll-expect-topass/
<p>这个问题最近在 Playwright Discord 的 #help-playwright 频道中被提出。如果你还没加入,现在就<a href="https://discord.gg/playwright-807756831384403968">加入吧</a>!</p>
<p>今天的解决方案我将使用 <a href="https://practicesoftwaretesting.com/#/">https://practicesoftwaretesting.com/</a> 网站作为测试对象。源码的 pull request 可以在下面的链接找到。</p>
<p>主要涉及的主题包括 <code>test.describe.configure({ retries: x })</code>, <code>expect.poll()</code>, 和 <code>expect.toPass()</code></p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com/pull/2">Adding Retry Count Logic By Spec by BMayhew</a></p>
<p>在深入了解具体解决方案之前,我认为值得问问自己:为什么测试套件中需要重试?许多人会认为,不应该在测试套件中重试,而应该要研究每次失败的用例,要么修复存在的 bug,要么改进不稳定的测试以使其更加稳定。</p>
<p>但实际上,这并非总是可行,具体取决于你的环境。在我目前的环境中,我们确实依赖重试来帮助我们获得正确的结果。这是我们做出的选择和愿意承担风险,对套件中的每个测试进行最多 2 次重试。我们通常会定期审查重试情况,研究测试最初失败的原因,并努力修复测试的逻辑问题。在我的环境中,大多数情况下,不稳定性更多来自于我们在"临时"和"预发布"环境中的机器规格问题。我遇到的许多错误恰好是服务器 502、503,即服务器响应时间过长。对我们来说,这些环境比生产环境小,并不总能优雅地处理我们的自动化测试所产生的所有流量。我发现我们的测试并不是不稳定的,而是我们的机器规格和基础设施不稳定。</p>
<p>话虽如此,我们的自动化检查实际上帮助我们识别了一个负载均衡器计时问题(在 TCP/IP 级别),这是由大量的失败而引起的,重新运行后就通过了。我们在深入研究"重试"的测试用例并与 SRE 团队一起回顾后,才发现了应用程序会话超时和负载均衡器健康检查超时之间的配置错误。</p>
<p>说完这些,让我们进入解决方案吧!</p>
<h2 id="test-describe-configure-retries-x">test.describe.configure({ retries: x })</h2>
<p>在 <code>playwright.config.ts</code> 文件中,我将重试次数设置为 <code>2</code>。在特定的测试文件中,我可以在文件开头(在任何 <code>test.describe()</code> 或 <code>test()</code> 块之外)使用 <code>test.describe.configure()</code> 来覆盖重试次数。以下代码将把该文件中的所有测试设置为重试 5 次。这是一种非常直接的方法,但还有其他方法!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#e9fdac;">describe</span><span>.</span><span style="color:#8cdaff;">configure</span><span>({ retries: </span><span style="color:#fdb082;">5 </span><span>});
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试重试 </span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({ storageState: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/customer01.json</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用有效的客户凭据登录并验证品牌页面不可访问</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-user-menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Jane Doe</span><span style="color:#ffffff;">"
</span><span> );
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/admin/brands</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/auth/login1</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p><a href="https://playwright.dev/docs/test-retries#retries">官方文档里的描述</a></p>
<p>值得一提的是,你可以通过在 Playwright 测试中使用 <code>expect.poll()</code> 或 <code>expect.toPass()</code> 功能来解决许多与测试重试相同的问题。让我们看看下面每种方法的例子。</p>
<h2 id="expect-poll">expect.poll()</h2>
<p>expect.poll() 是一个很有用的工具，它可以让我们重复检查某个条件是否满足，直到成功或超时。想象你在等一个网页加载，但不知道具体要多久。你可能会不断刷新页面，直到看到你想要的内容。expect.poll() 就是在自动帮你做这件事。</p>
<p>在下面的例子中，我们设置了 20 秒的等待时间。代码会不断尝试，看是否能找到包含 "/#/auth/login1" 的内容。如果找到了，就立即停止；如果 20 秒内都没找到，就会报告失败。</p>
<p>这个方法特别适合处理那些需要一定时间才能完成的操作。比如，在我的一个项目中，我们首先让浏览器打开一个网页，然后等待它可能发生的跳转。我们不断检查当前的网址，直到它变成我们期望的地址。这样，即使网页经过了几次跳转，我们最终也能确认它到达了正确的位置。</p>
<p>不过要注意，如果在这个等待过程中，我们设置的任何检查条件失败了（比如找不到某个元素），整个测试就会立即失败，不会继续等待了。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试轮询 </span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({ storageState: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/customer01.json</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用有效的客户凭据登录并验证品牌页面不可访问</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-user-menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Jane Doe</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">expect
</span><span> .</span><span style="color:#8cdaff;">poll</span><span>(
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/admin/brands</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 如果下面的断言失败,测试就失败
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>();
</span><span> },
</span><span> {
</span><span> timeout: </span><span style="color:#fdb082;">20_000</span><span>,
</span><span> }
</span><span> )
</span><span> .</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/auth/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p><a href="https://playwright.dev/docs/test-assertions#expectpoll">官方文档的描述</a></p>
<h2 id="expect-topass">expect.toPass()</h2>
<p><code>toPass()</code> 方法和前面说的轮询方法很像，但它有个很重要的不同点。想象你在做一道复杂的数学题，里面有好几个步骤。</p>
<ul>
<li>
<p>使用 <code>expect.poll()</code> 就像你在检查最后一个步骤是否正确。如果最后一步错了，整个题就算做错了。</p>
</li>
<li>
<p>而使用 <code>toPass()</code> 就像老师给你多次机会重做整道题。如果任何一个步骤做错了，你就要从头再来，直到所有步骤都做对，或者直到用完了所有的重做机会（也就是到达了设定的超时时间）。</p>
</li>
</ul>
<p>具体到代码中：</p>
<ul>
<li>在 <code>await expect(async()....</code> 这个代码块里，可能有多个检查点（就像数学题的多个步骤）。</li>
<li>如果其中任何一个检查失败了，<code>toPass()</code> 会让整个代码块重新运行，从头再来。</li>
<li>这个过程会一直重复，直到所有的检查都通过，或者超过了设定的时间限制。</li>
</ul>
<p>这就是 <code>expect.poll()</code> 和 <code>expect.toPass()</code> 最大的区别：<code>toPass()</code> 在失败时会重试整个过程，而不仅仅是最后一步。这对于处理那些需要多个步骤都成功的复杂操作特别有用。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试 toPass </span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({ storageState: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/customer01.json</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用有效的客户凭据登录并验证品牌页面不可访问</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-user-menu</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Jane Doe</span><span style="color:#ffffff;">"
</span><span> );
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/admin/brands</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 如果下面的断言失败,整个块将被重试
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/#/auth/login</span><span style="color:#ffffff;">"</span><span>);
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>({
</span><span> timeout: </span><span style="color:#fdb082;">10_000</span><span>,
</span><span> });
</span><span> });
</span><span>});
</span></code></pre>
<p><a href="https://playwright.dev/docs/test-assertions#expecttopass">官方文档</a></p>
<p>反复运行测试而不分析原因是很危险的。想象一下，你在做一道难题，一直得不到正确答案。如果你只是不停地重做，而不去思考为什么错了，可能永远也解不开这道题。</p>
<p>我们进行自动化测试的真正目的是什么呢？就像是给开发团队一个"安全网"。每次他们修改代码后，我们都要确保：</p>
<ol>
<li>新的改动没有把原本正常工作的功能弄坏。</li>
<li>整个应用程序仍然运行良好，没有变得更糟糕。</li>
</ol>
<p>如果测试能稳定地通过，它就像是给了我们一个"绿灯"，让我们有信心说："好的，这次的改动没问题，我们可以放心地把新版本发布出去了。"</p>
<p>所以，与其盲目地重复测试，不如仔细分析每次失败的原因，这样才能真正提高软件的质量和可靠性。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image.png" alt="图片 9" /></p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想在收件箱中收到更多内容,请在下方订阅,别忘了留下一个 ❤️ 表示你的喜爱。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/is-it-possible-to-override-retry-attempts-on-a-specific-spec-file-in-playwright-expect-poll-expect-topass/</p>
<p>发布时间: 2023-08-07</p>
为什么我从 Cypress 转向了 Playwright
2023-08-02T00:00:00+00:00
2023-08-02T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/why-i-switched-from-cypress-to-playwright/
<p>我从 2019 年开始使用 <a href="https://www.cypress.io/">Cypress</a>,当时我所在的公司决定在新项目中放弃 <a href="https://www.protractortest.org/">Protractor</a>。那时我使用的框架是 <a href="https://angular.io/">Angular</a>,我有机会实施 Cypress 概念验证。最近,我换了工作,现在使用 <a href="https://react.dev/">React</a>,在那里我也有机会实施 <a href="https://playwright.dev/">Playwright</a> 概念验证。</p>
<p>在 Angular 和 React 方面都有经验后,我偏好使用 <code>data-testid</code> 属性进行测试。这让我能够保持一致的 UI 端到端测试方法,我没有观察到 Angular 和 React 应用程序测试之间有任何显著差异。</p>
<p>注意:本文中我使用 React 应用作为 Cypress 和 Playwright 的示例。</p>
<div class="w-full md:w-1/2 mx-auto">
<img src="https://miro.medium.com/v2/resize:fit:600/0*8FsR8lzrCfAf8W2J.jpg"/>
</div>
<h2 id="zhe-liang-ge-ce-shi-kuang-jia-ti-gong-liao-shen-me">这两个测试框架提供了什么?</h2>
<p>Cypress 和 Playwright 都提供了出色的 UI 测试体验(您也可以测试 API)。它们的自动等待功能使开发人员能够轻松编写测试,它们提供了 UI 来可视化运行的测试,还可以生成测试的屏幕截图和视频,并支持 TypeScript。</p>
<p>这两个框架还支持可视化组件测试,但我不会在本文中涉及这个主题。</p>
<p>由于这两个框架提供了非常相似的功能,我将分析它们如何实现以下方面,以及它们如何影响开发人员的体验/生产力:</p>
<ul>
<li>用于编写测试的语法在学习曲线和每个框架的整体易用性方面起着关键作用。包括但不限于使用自定义命令扩展框架和录制用例。</li>
<li>测试执行和可维护性是影响开发人员对测试信心和花费在调试上的时间的重要因素,特别是在速度和稳定性方面。</li>
<li>测试报告在测试过程中起着关键作用,评估它们的设置 ease 和提供的信息级别对两个框架都很重要。</li>
</ul>
<h2 id="wo-de-cypress-jing-yan">我的 Cypress 经验</h2>
<p>安装 Cypress 很简单,基本上就是一个 NPM 依赖项,然后就可以开始了。然而,不久之后就遇到了需要了解的 Cypress 复杂细节,才能使用它。以下是一些主要的问题:</p>
<ul>
<li><strong>用于编写测试的语法:</strong> Cypress 使用类似 promise 的语法来编写测试。这一开始可能看起来并不令人困惑,但开发人员往往认为因为他们的 API 看起来像 promise,所以它的行为就像 promise(async/await)。悲哀的现实是它不是这样的,这导致开发人员花费大量时间学习如何使用 Cypress API 并使其适合他们特定的测试场景。<br />
如果您需要使用 async/await,您有两个选择:要么将其包装在 Cypress 命令中以便将其添加到 <em>Cypress 命令链</em> 中,要么使用像 <a href="https://www.npmjs.com/package/cypress-promise">cypress-promise</a> 这样的库。以下是每个选项的示例:</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// async-await.spec.ts
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">promisify </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cypress-promise</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">sleep</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">milliseconds</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return new </span><span>Promise(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">resolve</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#e9fdac;">milliseconds</span><span>));
</span><span>}
</span><span>
</span><span style="color:#ff5e5e;">async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">asyncFunction</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">text</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">started asyncFunction </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">text</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">sleep</span><span>(</span><span style="color:#fdb082;">3000</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">finalized asyncFunction </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">text</span><span>);
</span><span>}
</span><span>
</span><span style="color:#8cdaff;">context</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Async/Await Test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#8cdaff;">visit</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">it</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">convert promises into cypress commands, do not write tests using async/await</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#8cdaff;">wrap</span><span>(</span><span style="color:#ff8942;">null</span><span>).</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">asyncFunction</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">first</span><span style="color:#ffffff;">"</span><span>));
</span><span> </span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#8cdaff;">wrap</span><span>(</span><span style="color:#ff8942;">null</span><span>).</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#8cdaff;">asyncFunction</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">second</span><span style="color:#ffffff;">"</span><span>));
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">it</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">convert cypress commands to promises, should be able to code with async/await</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">foo </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">promisify</span><span>(</span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#8cdaff;">wrap</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">foo</span><span style="color:#ffffff;">"</span><span>));
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bar </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">promisify</span><span>(</span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#8cdaff;">wrap</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar</span><span style="color:#ffffff;">"</span><span>));
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">foo</span><span>).</span><span style="color:#e9fdac;">to</span><span>.</span><span style="color:#8cdaff;">equal</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">foo</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bar</span><span>).</span><span style="color:#e9fdac;">to</span><span>.</span><span style="color:#8cdaff;">equal</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bar</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<ul>
<li><strong>测试报告:</strong> Cypress 缺乏内置的测试报告功能,这意味着获得所有测试的综合摘要、它们的持续时间以及失败的额外元素(如屏幕截图和链接视频)可能是一个具有挑战性和繁琐的过程。尽管在配置报告方面投入了相当大的努力,但仍可能存在生成的报告中缺少屏幕截图的情况。</li>
</ul>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*QgXR5prXZLNJ8HBm3tLfqg.png" alt="图片 3" /></p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span> </span><span style="color:#6d6d6d;">// package.json: 繁琐的测试报告设置示例
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">-------------------- E2E Commands --------------------</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">""</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cypress:open</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nyc cypress open</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cypress:run</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npm-run-all -s --continue-on-error _clean _cypress-run:run _cypress-run:html</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">-------------------- Supporting Commands --------------------</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">""</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_clean</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx rimraf coverage cypress/output/junit cypress/output/mocha-json cypress/output/mocha-html/*.html cypress/output/mocha-html/*.json .nyc_output</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_coverage-report</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx nyc report --reporter html</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_cypress-run:run</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nyc cypress run --headless --browser chrome</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_cypress-run:html:merge-json</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">mochawesome-merge cypress/output/mocha-json/*.json > cypress/output/mocha-html/merged-mochawesome.json</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_cypress-run:html:gen-html-from-json</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">marge cypress/output/mocha-html/merged-mochawesome.json -f cypress -o cypress/output/mocha-html -i true --charts true</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">_cypress-run:html</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npm-run-all -s _cypress-run:html:merge-json _cypress-run:html:gen-html-from-json _coverage-report</span><span style="color:#ffffff;">"
</span><span> },
</span></code></pre>
<ul>
<li><strong>如何运行有界面测试:</strong> Cypress 在其自己的浏览器应用程序内运行您的 web 应用程序。它首先打开一个列出所有 <code>specs</code> 的页面,然后您可以单击一个 spec 来运行该 spec 内的所有测试。我可能会补充说,所有这些都相当慢。此外,如果您只想运行 <code>spec</code> 中的一个测试,您需要将其标记为 <code>only</code>,保存,然后只有该测试会自动重新加载。</li>
</ul>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*DA01oS_nrO9ZdiSIb37IRw.png" alt="图片 4: 在 Cypress 浏览器中运行的应用程序。" /></p>
<ul>
<li><strong>如何在无界面运行中访问浏览器控制台日志:</strong> 浏览器控制台日志仅在以有界面形式运行测试时可见(打开 DevTools)。这意味着如果您的测试在本地成功运行但在 CI 流水线上失败,那么您将花费很长时间试图将这些日志带到流水线控制台。幸运的是,有一个插件可以简化这个过程,但由于 Cypress 插件的工作方式,它不仅仅是即插即用的工作。</li>
</ul>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*pBBISRJOKqAbxp0kxmQlXg.png" alt="图片 5" /></p>
<p>只有在打开 DevTools 时才能看到浏览器控制台日志。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// cypress/plugins/index.ts
</span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>Browsers {
</span><span> </span><span style="color:#e9fdac;">family</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>;
</span><span> </span><span style="color:#e9fdac;">name</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>;
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>LaunchOptions {
</span><span> </span><span style="color:#e9fdac;">args</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[];
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">cypressPLugins </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">on</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">unknown</span><span>, </span><span style="font-style:italic;color:#fc9354;">config</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">unknown</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@cypress/code-coverage/task</span><span style="color:#ffffff;">"</span><span>)(</span><span style="color:#e9fdac;">on</span><span>, </span><span style="color:#e9fdac;">config</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 将 console.* 消息记录到 cypress 控制台,
</span><span> </span><span style="color:#6d6d6d;">// 当 CI/CD 流水线上出现错误时会有帮助
</span><span> </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cypress-log-to-output</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">install</span><span>(</span><span style="color:#e9fdac;">on</span><span>, </span><span style="color:#e9fdac;">consoleToLogConfig</span><span>);
</span><span> </span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@cypress/react/plugins/react-scripts</span><span style="color:#ffffff;">"</span><span>)(</span><span style="color:#e9fdac;">on</span><span>, </span><span style="color:#e9fdac;">config</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// @ts-ignore
</span><span> </span><span style="color:#8cdaff;">on</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">before:browser:launch</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">browser</span><span style="color:#ff5e5e;">: </span><span>Browsers, </span><span style="font-style:italic;color:#fc9354;">launchOptions</span><span style="color:#ff5e5e;">: </span><span>LaunchOptions</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#e9fdac;">family </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">chrome</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">|| </span><span style="color:#e9fdac;">browser</span><span>.name </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">chrome</span><span style="color:#ffffff;">"</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Adding chrome config...</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#e9fdac;">launchOptions</span><span>.</span><span style="color:#e9fdac;">args</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">--disable-dev-shm-usage</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#e9fdac;">launchOptions</span><span>.</span><span style="color:#e9fdac;">args</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">--lang=en</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">launchOptions</span><span>;
</span><span> }
</span><span> );
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">config</span><span>;
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">consoleToLogConfig </span><span style="color:#ff5e5e;">= </span><span>(
</span><span> </span><span style="font-style:italic;color:#fc9354;">_type</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">unknown</span><span>,
</span><span> event</span><span style="color:#ff5e5e;">: </span><span>{ </span><span style="color:#e9fdac;">level</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>; </span><span style="color:#e9fdac;">type</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string </span><span>}
</span><span>) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 从此插件返回 true 或 false 以控制事件是否记录在 cypress 控制台上
</span><span> </span><span style="color:#6d6d6d;">// `type` 是 `console` 或 `browser`
</span><span> </span><span style="color:#6d6d6d;">// 如果 `type` 是 `browser`, `event` 是 `LogEntry` 类型的对象:
</span><span> </span><span style="color:#6d6d6d;">// https://chromedevtools.github.io/devtools-protocol/tot/Log/#type-LogEntry
</span><span> </span><span style="color:#6d6d6d;">// 如果 `type` 是 `console`, `event` 是传递给 `Runtime.consoleAPICalled` 的对象类型:
</span><span> </span><span style="color:#6d6d6d;">// https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#event-consoleAPICalled
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 只显示错误事件:
</span><span> </span><span style="color:#ff5e5e;">return </span><span>event.</span><span style="color:#e9fdac;">level </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">|| </span><span>event.type </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">"</span><span>;
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">cypressPLugins</span><span>;
</span></code></pre>
<ul>
<li><strong>调试测试:</strong> Cypress 有几种不同的调试选项,网上有很多关于这个主题的文章。主要的要点是,由于 Cypress 命令异步运行,您不能简单地添加一个 <code>debugger</code> 命令。<br />
本质上,Cypress 为您提供了两个有用的命令: <code>debug()</code> 和 <code>pause()</code>。第一个将 <code>debugger</code> 命令添加到 Cypress 运行器中,而后者则在该点停止测试运行。两者都允许您检查 DOM,但只有使用 <code>pause()</code> 才能逐步执行测试中即将到来的每个 Cypress 命令。<br />
鉴于 Cypress 使用类似 promise 的链式 API,您可以将这两个命令中的任何一个与任何 Cypress 命令链接起来:</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#6699cc;">get</span><span>([</span><span style="color:#e9fdac;">data</span><span style="color:#ff5e5e;">-</span><span style="color:#e9fdac;">testid</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username-input</span><span style="color:#ffffff;">"</span><span>]).</span><span style="color:#8cdaff;">type</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">my-username</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">pause</span><span>();
</span></code></pre>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*Z1gGMf2DP-xhqNg8YIQDkA.png" alt="图片 6" /></p>
<ul>
<li><strong>测试并行化:</strong> Cypress 不支持在本地并行运行测试。有很多库可以帮助您实现并行化,但这并非易事。在我之前的公司,我们试图并行化我们的测试以改善流水线运行时间,但努力结果如此巨大,以至于我们降低了它的优先级。<br />
副作用是,开发人员很少在本地运行完整的 Cypress 测试套件,他们只是等待流水线的反馈。</li>
<li><strong>速度:</strong> Cypress 在无界面和有界面浏览器格式下运行时都很慢。这是我们想要并行化测试的主要原因。即使在本地运行测试也非常慢。在开发测试时,当您修改文件时,测试会自动重新加载,即使在我的 MacBook Pro 上,这也可能需要几秒钟。</li>
<li><strong>测试稳定性:</strong> Cypress 以在 CI/CD 流水线上不稳定而闻名,这导致开发人员花费大量时间追踪幽灵。我见过开发人员实施的常见 <em>黑客解决方案</em> 是在测试中添加 <code>cy.wait(<ms>)</code>,并在 CI/CD 流水线中添加重试。</li>
<li><strong>自定义命令:</strong> 如果您在测试中经常使用常见功能,您很可能想要为其创建一个自定义 Cypress 命令。不幸的是,添加这样的命令既不直观也不类型安全(除非您额外努力):</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// cypress/support/commands.ts
</span><span style="color:#e9fdac;">Cypress</span><span>.</span><span style="color:#e9fdac;">Commands</span><span>.</span><span style="color:#6699cc;">add</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">getByTestId</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">selector</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="color:#ff5e5e;">...</span><span style="font-style:italic;color:#fc9354;">args</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">unknown</span><span>[]</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">[data-testid=${</span><span style="color:#e9fdac;">selector</span><span style="color:#fbe3bf;">}]</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">...</span><span style="color:#e9fdac;">args</span><span>);
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// cypress/typings/cypress.d.ts
</span><span style="color:#ff5e5e;">declare </span><span style="font-style:italic;color:#fbdfb5;">namespace </span><span>Cypress {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>Chainable {
</span><span> </span><span style="color:#8cdaff;">getByTestId</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">selector</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="color:#ff5e5e;">...</span><span style="font-style:italic;color:#fc9354;">args</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">unknown</span><span>[]</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">: </span><span>Chainable;
</span><span> }
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">// 您现在可以在测试中使用此命令:
</span><span style="color:#8cdaff;">it</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should type username in username input</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">cy</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username-input</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">type</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">my-username</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<ul>
<li><strong>录制用例:</strong> Cypress 现在提供了 <em>Cypress Studio</em>,这是一个我个人还没有尝试过的实验性功能。</li>
</ul>
<h2 id="wo-de-playwright-jing-yan">我的 Playwright 经验</h2>
<p>我从 2023 年初开始使用 React,当时我的团队还没有任何 UI 测试。因此,我决定考虑引入 Cypress。然而,我们也开始引入 web 组件,并计划使用 <a href="https://storybook.js.org/">Storybook</a> 来记录和测试我们的 web 组件。由于 Storybook 在底层使用 Playwright,我调查了 Playwright 能提供什么。最初的吸引力是:我的团队只需要学习一个框架就可以测试 web 组件和我们的 UI。</p>
<p>安装 Playwright 非常简单:不到一小时我就完成了全面的测试。</p>
<ul>
<li><strong>用于编写测试的语法:</strong> 编写 Playwright 测试就像编写普通的 TypeScript 代码一样简单,没有特殊的 API 需要学习。最好的部分是您可以编写普通的 async/await 代码,因此您可以使用所有正常的 TypeScript 支持函数。示例:</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Playwright test with async/await</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">sleep</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">milliseconds</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return new </span><span>Promise(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">resolve</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="color:#e9fdac;">resolve</span><span>, </span><span style="color:#e9fdac;">milliseconds</span><span>));
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">asyncFunction</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">text</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">started asyncFunction </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">text</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">sleep</span><span>(</span><span style="color:#fdb082;">3000</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">finalized asyncFunction </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">text</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should open storybook and click around</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://localhost:6006/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Storybook 7.1.1 is available! Your current version is: 7.0.2 Dismiss notification</span><span style="color:#ffffff;">"</span><span>,
</span><span> })
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Storybook</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#internal-components-overview--docs</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">should test the async methods used in previous example</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">asyncFunction</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">first</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">asyncFunction</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">second</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<ul>
<li><strong>测试报告:</strong> 这是一个如此令人愉快的惊喜:我不需要做任何事情!Playwright 生成的开箱即用报告非常棒。您还可以非常轻松地在多个浏览器上运行测试(只需更改配置,Playwright 将为您安装所需的浏览器)。<br />
我将其配置为仅包含失败测试的跟踪信息、屏幕截图和视频;否则,就像 Cypress 一样,测试运行会很慢。在下面的示例中,我们的第一个测试失败了。如果我们点击它,我们会得到以下信息:导致失败的异常、测试的哪些步骤失败了、测试的视频以及测试的完整跟踪。</li>
</ul>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*i7YqewHSh9Pu93jRBCioew.png" alt="图片 7" /></p>
<p>Playwright HTML 报告概览</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*VVDm5lT4OEQbhKZ0HCoscA.png" alt="图片 8" /></p>
<p>失败测试 Playwright 报告摘要</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*WOa3ZZLGfQGUR7GTfRxPLw.png" alt="图片 9" /></p>
<p>Playwright 测试跟踪</p>
<ul>
<li><strong>如何运行有界面测试:</strong> Playwright 由 Microsoft 开发,所以他们当然为 <a href="https://code.visualstudio.com/">VS Code</a> 提供了一个插件。我自己是 IntelliJ 用户,但当我想运行 Playwright 测试时,我发现自己会切换到 VS Code。</li>
</ul>
<p>与 Cypress 不同,您不必启动任何东西就可以运行一个或多个测试。只需在 VS Code 中打开您的代码,然后点击常用的单元测试绿色三角形,或者如果您之前已经运行过测试,则点击绿色勾号/红色 X。您还可以选择是否要打开浏览器或跟踪查看器。<br />
这里的开发人员体验非常棒。测试打开速度快,反应灵敏。</p>
<p><img src="https://miro.medium.com/v2/resize:fit:1000/1*TNZ7F8L-5g02deAoA09xGg.png" alt="图片 10" /></p>
<ul>
<li><strong>如何在无界面的浏览器运行中访问浏览器控制台日志:</strong> 与 Cypress 一样,Playwright 不会在运行 Playwright 的控制台中显示浏览器日志。为了实现这一点,您可以扩展 Playwright <code>Page</code> 对象以将浏览器日志转发到控制台日志(还有其他方法可以做到这一点,例如扩展 <code>test</code> 对象本身)。</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// utils/console.util.ts
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">configureLogForwarding </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span style="color:#ff5e5e;">: </span><span>Page</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">on</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">console</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">msg</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(process.env.</span><span style="color:#e9fdac;">PLAYWRIGHT_LOG_TO_CONSOLE </span><span style="color:#ff5e5e;">=== </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">'</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">switch </span><span>(</span><span style="color:#e9fdac;">msg</span><span>.</span><span style="color:#8cdaff;">type</span><span>()) {
</span><span> </span><span style="color:#ff5e5e;">case </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">info</span><span style="color:#ffffff;">'</span><span>:
</span><span> </span><span style="color:#ff5e5e;">case </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">log</span><span style="color:#ffffff;">'</span><span>: {
</span><span> </span><span style="color:#6d6d6d;">// eslint-disable-next-line no-console
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Log: "${</span><span style="color:#e9fdac;">msg</span><span style="color:#fbe3bf;">.</span><span style="color:#8cdaff;">text</span><span style="color:#fbe3bf;">()}"</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#ff5e5e;">break</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">case </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">warning</span><span style="color:#ffffff;">'</span><span>: {
</span><span> </span><span style="color:#6d6d6d;">// eslint-disable-next-line no-console
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Warning: "${</span><span style="color:#e9fdac;">msg</span><span style="color:#fbe3bf;">.</span><span style="color:#8cdaff;">text</span><span style="color:#fbe3bf;">()}"</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#ff5e5e;">break</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">case </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">assert</span><span style="color:#ffffff;">'</span><span>:
</span><span> </span><span style="color:#ff5e5e;">case </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">error</span><span style="color:#ffffff;">'</span><span>: {
</span><span> </span><span style="color:#6d6d6d;">// eslint-disable-next-line no-console
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Error: "${</span><span style="color:#e9fdac;">msg</span><span style="color:#fbe3bf;">.</span><span style="color:#8cdaff;">text</span><span style="color:#fbe3bf;">()}"</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#ff5e5e;">break</span><span>;
</span><span> }
</span><span> }
</span><span> }
</span><span> });
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// tests/demo-tests.spec.ts
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Playwright test with async/await</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">configureLogForwarding</span><span>(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#e9fdac;">hostAppNavigationPo </span><span style="color:#ff5e5e;">= new </span><span>HostAppNavigationPo(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#e9fdac;">genericAssetModalPo </span><span style="color:#ff5e5e;">= new </span><span>GenericAssetModalPo(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> });
</span><span style="color:#6d6d6d;">// ...
</span></code></pre>
<ul>
<li><strong>调试测试:</strong> 这是我最喜欢的功能之一。要调试测试,设置一个断点,然后右键单击绿色三角形/绿色勾号/红色 X,然后单击 <em>调试测试</em>。浏览器将打开,运行将在您的断点处停止。从这里开始,它就是开发人员习惯的正常调试会话。</li>
</ul>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*YpMNIAHnhHhMDNG7JWX1zA.png" alt="图片 11" /></p>
<p>在 Playwright 中开始调试会话</p>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*018sTeChOw29tDN9uGVuJg.png" alt="图片 12" /></p>
<p>Playwright 正在进行的调试会话</p>
<ul>
<li><strong>测试并行化:</strong> Playwright 支持开箱即用的并行化(当然,您的被测系统必须能够支持并行运行测试)。考虑到我们的 CI/CD 工具没有太多资源,因此速度较慢,我们在流水线中关闭了并行测试。然而,当我在编码时,我能够在本地非常快速地运行所有测试。诚然,我们只使用了 Playwright 大约 5 个月,所以我们只有约 80 个测试。这里有一些非科学的数字:约 80 个测试,在 CI/CD 中 5 分钟(1 个工作进程),在本地 2 分钟(1 个工作进程),在本地 55 秒(5 个工作进程)。</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> </span><span style="color:#6d6d6d;">/* 其他配置... */
</span><span> </span><span style="color:#6d6d6d;">/* 在 CI 上选择退出并行测试。 */
</span><span> workers: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">1 </span><span style="color:#ff5e5e;">: </span><span style="color:#ff8942;">undefined</span><span>,
</span><span> </span><span style="color:#6d6d6d;">/* 并行运行 spec 文件中的测试 */
</span><span> fullyParallel: </span><span style="color:#ff8942;">true</span><span>,
</span><span>});
</span></code></pre>
<ul>
<li><strong>速度:</strong> 当以无界面形式运行等效测试时(就像在 CI/CD 流水线中那样),Playwright 比 Cypress 快约 1.5 倍。<br />
此外,Playwright 能够在不到一秒的时间内在浏览器上启动测试(在我的 MacBook Pro 上)。这意味着我可以随时运行任何测试,在任何规范中,而无需启动 <em>Playwright 服务器</em> 等。与 Cypress 不同,对于 Cypress,您首先必须启动 Cypress UI,然后在该 UI 中导航到要运行的测试。<br />
这为开发人员提供了绝佳的体验!</li>
<li><strong>测试稳定性:</strong> 我们已经编写测试 5 个月了,我们还没有遇到任何不稳定的情况,也不需要在测试中使用任何等待或睡眠。由于我不再在之前使用 Cypress 的公司工作,很难确定将那些不稳定的测试迁移到 Playwright 是否会使它们稳定下来。</li>
<li><strong>自定义命令:</strong> Playwright 提供了一种<a href="https://playwright.dev/docs/api/class-test#test-extend">扩展基础</a> <code>[test](https://playwright.dev/docs/api/class-test#test-extend)</code> 的方法,这样您就可以在测试期间轻松访问自定义命令和/或页面对象。这种模式简单易懂,直观且类型安全。Playwright 的示例:</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// my-test.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">TodoPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./todo-page</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">type </span><span>Options </span><span style="color:#ff5e5e;">= </span><span>{ </span><span style="color:#e9fdac;">defaultItem</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string </span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// 通过提供 "defaultItem" 选项和 "todoPage" fixture 来扩展基本测试。
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#8cdaff;">extend</span><span><Options </span><span style="color:#ff5e5e;">& </span><span>{ </span><span style="color:#e9fdac;">todoPage</span><span style="color:#ff5e5e;">: </span><span>TodoPage }>({
</span><span> </span><span style="color:#6d6d6d;">// 定义一个选项并提供默认值。
</span><span> </span><span style="color:#6d6d6d;">// 我们稍后可以在配置中覆盖它。
</span><span> defaultItem: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Do stuff</span><span style="color:#ffffff;">"</span><span>, { option: </span><span style="color:#ff8942;">true </span><span>}],
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 定义一个 fixture。请注意,它可以使用内置 fixture "page"
</span><span> </span><span style="color:#6d6d6d;">// 和一个新选项 "defaultItem"。
</span><span> </span><span style="color:#8cdaff;">todoPage</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">defaultItem </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">todoPage </span><span style="color:#ff5e5e;">= new </span><span>TodoPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">todoPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">todoPage</span><span>.</span><span style="color:#8cdaff;">addToDo</span><span>(</span><span style="color:#e9fdac;">defaultItem</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">todoPage</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">todoPage</span><span>.</span><span style="color:#8cdaff;">removeAll</span><span>();
</span><span> },
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// example.spec.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./my-test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test 1</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">todoPage </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">todoPage</span><span>.</span><span style="color:#8cdaff;">addToDo</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">my todo</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// ...
</span><span>});
</span></code></pre>
<ul>
<li><strong>录制用例:</strong> Playwright 提供了使用他们的 VS Code 插件记录 UI 测试的选项。您只需按下 <code>Record new</code> 按钮,Playwright 就会为您打开一个浏览器。然后输入 web 应用程序的 URL 并开始点击。Playwright 记录的最好部分是,如果存在 <code>data-testid</code> 选择器,它会选择该选择器 ( <code>await page.getByTestId('dialog-title');</code> )。</li>
</ul>
<p><img src="https://miro.medium.com/v2/resize:fit:700/1*clsfh46nro1biK36LZC0RQ.png" alt="图片 13" /></p>
<p>Playwright 还有许多其他优势,我在本文中没有涵盖,主要是因为我没有大量使用这些方面,但这里有一些例子:</p>
<ul>
<li><strong>iFrames:</strong> Playwright 开箱即用地与 iFrames 配合使用,体验非常流畅。我们在当前的工作中使用 iFrames,但在我之前的工作中没有使用(当时我在使用 Cypress)。然而,据我所知,您需要安装 Cypress 插件才能测试 iFrames。这篇<a href="https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/">文章</a>详细解释了为什么 Cypress 在处理 iFrames 时遇到困难以及如何测试它们。</li>
<li><strong>Web 应用服务器:</strong> Cypress 和 Playwright 都需要您的应用程序正在运行才能运行测试。对 Cypress 的一个常见请求是希望框架能够在运行测试之前启动被测系统。我个人在运行测试时总是让我的应用程序保持运行状态,无论是在本地还是在 CI/CD 流水线中。然而,开发人员的愿望已经被听到了(被 Playwright):</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> </span><span style="color:#6d6d6d;">// 在开始测试之前运行您的本地开发服务器。
</span><span> webServer: {
</span><span> command: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npm run start</span><span style="color:#ffffff;">"</span><span>,
</span><span> url: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://127.0.0.1:3000</span><span style="color:#ffffff;">"</span><span>,
</span><span> reuseExistingServer: </span><span style="color:#ff5e5e;">!</span><span>process.env.</span><span style="color:#e9fdac;">CI</span><span>,
</span><span> },
</span><span>});
</span></code></pre>
<ul>
<li><strong>禁止</strong> <code>only</code> <strong>关键字:</strong> 一个常见的用例是,当开发人员想要运行单个测试时,他们会将其标记为 <code>only</code>。不幸的是,他们经常忘记在提交之前删除它。Playwright 带有一个配置来检测这一点,而对于 Cypress,我们必须添加 eslint 规则。</li>
</ul>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">'</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> </span><span style="color:#6d6d6d;">/* 如果您在源代码中不小心留下了 test.only,在 CI 上使构建失败。 */
</span><span> forbidOnly: </span><span style="color:#ff5e5e;">!!</span><span>process.env.</span><span style="color:#e9fdac;">CI</span><span>,
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// example.spec.ts
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">Playwright test with async/await</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">only</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">should test the async methods used in previous example</span><span style="color:#ffffff;">'</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">asyncFunction1</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">asyncFunction2</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 更多测试...
</span></code></pre>
<ul>
<li>
<p><strong>多个页面:</strong> Cypress 在其自己的 web 应用程序中运行您的 web 应用程序,这带来了 Cypress 一次只能在一个页面上运行测试的限制。而 Playwright 则可以在每个浏览器中打开多个 <a href="https://playwright.dev/docs/api/class-browsercontext">BrowserContext</a> 和/或多个 <code>Page</code>,所有这些都可以有不同的网站/域等,并在它们之间运行测试。</p>
</li>
<li>
<p><strong>多语言支持:</strong> 在 Cypress 中,您可以选择使用 JavaScript 或 TypeScript 编写测试。然而,在 Playwright 中,编写测试的语言选项更加多样化。您可以选择使用 JavaScript、TypeScript、Java、Python 或 .NET 编写测试,为开发人员提供了更大的灵活性,可以选择他们喜欢的编程语言进行测试自动化。</p>
</li>
</ul>
<h2 id="jie-lun">结论</h2>
<p>在多年成为 Cypress 的粉丝并强烈倡导 UI 测试之后,开始使用一个我不确定是否会像 Cypress 那样好，使用的新框架并不是一个容易的决定。话虽如此,发现 Playwright 不仅可以做到 Cypress 所能做到的,而且在我能想到的所有方面都超越了它,这是一个如此令人愉快的惊喜。</p>
<p>最后,Cypress 和 Playwright 的开发者社区都相当庞大。尽管 Cypress 仍然更受欢迎,但随着更多开发者发现 Playwright 的开发体验有多棒,Playwright 社区正在快速增长。</p>
<p>我建议任何已经在使用 Cypress 或正在考虑进行 UI 测试的人都应该考虑 Playwright 作为一个值得的选择。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://medium.com/@oldiazg/why-i-switched-from-cypress-to-playwright-dc41ce4d5e1b">来源</a></p>
<p>发布时间: 2023-08-02</p>
使用 Playwright 进行现代网页测试
2023-07-28T00:00:00+00:00
2023-07-28T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/modern-web-testing-with-playwright/
<p>Playwright 是一个出色的新型网页测试框架,它可以帮助你采用现代方法进行网页的测试开发。让我们一起来了解如何使用它。</p>
<h2 id="shen-ru-si-kao-ce-shi-de-ben-zhi">深入思考测试的本质</h2>
<p>让我问你一系列问题:</p>
<p>问题 1: 你喜欢代码中出现 bug 吗? 大概率不会。Bug 就是麻烦,它们本不该出现,而且还需要花精力去修复。总之,bug 就是个大麻烦。</p>
<p>问题 2: 你愿意让这些 bug 流入生产环境吗? 当然不愿意! 我们希望在用户看到之前就修复 bug。严重的 bug 可能会对系统、业务甚至声誉造成巨大损害。一旦 bug 不小心溜进了生产环境,我们也要尽快发现并修复。</p>
<p>问题 3: 你喜欢创建测试来提前捕获 bug 吗? 嗯...这个问题就不那么容易回答了。大多数人都明白,好的测试能为软件质量提供宝贵的反馈,但并非每个人都乐意投入精力进行测试。</p>
<h2 id="wei-shen-me-dui-ce-shi-bu-tai-gan-mou">为什么对测试不太感冒?</h2>
<p>为什么不是所有人都喜欢测试呢? <strong>因为测试很难!</strong> 以下是我经常听到的抱怨:</p>
<ul>
<li>测试太慢 - 运行时间太长!</li>
<li>测试很脆弱 - 应用稍有变动就会失败!</li>
<li>测试不稳定 - 经常莫名其妙地崩溃!</li>
<li>测试难以理解 - 复杂且难以阅读!</li>
<li>测试不创造价值 - 我们应该把时间花在开发新功能上!</li>
<li>测试需要切换上下文 - 打断了开发工作流!</li>
</ul>
<p><img src="https://automationpanda.com/wp-content/uploads/2023/07/testing-pain-points-1061611341-e1690484881718.png" alt="图1: 测试挑战" /></p>
<p>这些都是合理的理由。为了缓解这些痛点,软件团队历来围绕<a href="https://automationpanda.com/2018/08/01/the-testing-pyramid/">测试金字塔</a>制定测试策略,从上到下将测试分为以下几层:</p>
<ul>
<li>UI 测试</li>
<li>API 测试</li>
<li>组件测试</li>
<li>单元测试</li>
</ul>
<p><img src="https://automationpanda.com/wp-content/uploads/2023/07/testing-pyramid-3004920334-e1690484079544.png" alt="图2: 测试金字塔" /></p>
<p>底层测试被认为"更好",因为它们更接近代码,更容易自动化,执行速度更快。它们也被认为不太容易出现不稳定的情况,因此更易于维护。顶层测试则恰恰相反:规模大、速度慢、成本高。金字塔的形状暗示团队应该在金字塔底部的测试上投入更多时间,而在顶部的测试上投入较少时间。</p>
<p>端到端测试其实非常有价值。遗憾的是,测试金字塔将它们标记为"困难"和"糟糕",主要是因为不良实践和工具的局限性。这也导致团队制定的测试策略更强调测试的类别,而不是测试所能提供的结果。</p>
<h2 id="zhong-xin-si-kao-xian-dai-wang-zi-dong-hua-de-ce-shi-mu-biao">重新思考现代网自动化的测试目标</h2>
<p>测试不必如此困难,也不必受制于过去的问题。我们应该用全新的方式来测试现代网页应用。</p>
<p>以下是现代网页测试的三个主要目标:</p>
<ol>
<li>专注于建立<strong>快速反馈循环</strong>,而不是特定类型的测试。</li>
<li>让测试开发变得<strong>尽可能快速和轻松</strong>。</li>
<li>选择能自然<strong>融入开发工作流</strong>的测试工具。</li>
</ol>
<p><img src="https://automationpanda.com/wp-content/uploads/2023/07/modern-web-testing-goals-2430785089-e1690484965113.png" alt="图3: 现代测试目标" /></p>
<p>这些目标强调了<em>结果</em>和<em>效率</em>。测试应该成为开发过程中自然而然的一部分,不应产生任何隔阂。</p>
<h2 id="playwright-jian-jie">Playwright 简介</h2>
<p><a href="https://playwright.dev/">Playwright</a>是一个现代网页测试框架,可以帮助我们实现这些目标。</p>
<ul>
<li>它是微软的一个开源项目。</li>
<li>它通过(超快的)调试协议操控浏览器。</li>
<li>它支持 Chromium/Chrome/Edge、Firefox 和 WebKit。</li>
<li>它提供自动等待、录制回放、UI 调试模式等功能。</li>
<li>它可以同时测试 UI 和 API。</li>
<li>它为 JavaScript/TypeScript、Python、Java 和 C#提供绑定。</li>
</ul>
<p><img src="https://automationpanda.com/wp-content/uploads/2023/07/playwright-overview-145765983-e1690485021191.png" alt="图4: Playwright概览" /></p>
<p>Playwright 采用了独特的浏览器自动化方法。首先,它使用浏览器<em>项目</em>而不是完整的浏览器应用。例如,这意味着你会测试 Chromium 而不是 Google Chrome。浏览器项目更小,占用的资源也比完整浏览器少。Playwright 还会为你管理浏览器项目,所以你不需要安装额外的东西。</p>
<p>其次,它非常高效地使用浏览器:</p>
<ol>
<li>Playwright 不会为每个测试启动一个全新的浏览器实例,而是为整个测试套件启动一个浏览器<em>实例</em>。</li>
<li>然后,它为每个测试从该实例创建一个唯一的<em>浏览器上下文</em>。浏览器上下文本质上就像一个隐身模式:它有自己的会话存储和标签页,不与其他上下文共享。浏览器上下文的创建和销毁都非常快。</li>
<li>之后,每个浏览器上下文可以有一个或多个<em>页面</em>。所有 Playwright 交互都通过页面进行,比如点击和抓取。大多数测试只需要一个页面。</li>
</ol>
<p><img src="https://automationpanda.com/wp-content/uploads/2023/07/browsers-contexts-pages-880645586-e1690484653870.png" alt="图5: Playwright的浏览器、上下文和页面" /></p>
<p>Playwright 会自动为你处理所有这些设置。</p>
<h2 id="playwright-yu-qi-ta-gong-ju-de-bi-jiao">Playwright 与其他工具的比较</h2>
<p>Playwright 并不是唯一的浏览器自动化工具。其他两个最流行的工具是<a href="https://www.selenium.dev/">Selenium</a>和<a href="https://www.cypress.io/">Cypress</a>。以下是一个高层次的比较图表:</p>
<p><img src="https://automationpanda.com/wp-content/uploads/2023/07/tool-comparison-3467232613-e1690485288193.png" alt="图6: 浏览器自动化工具比较" /></p>
<p>这三个都是不错的工具,各有优势。Playwright 的主要优势在于它提供了出色的开发者体验,执行速度最快,支持多种编程语言,并且有几个提高生活质量的特性。</p>
<h2 id="xue-xi-playwright">学习 Playwright</h2>
<p>如果你想学习如何使用 Playwright 进行网页测试自动化,可以尝试我的教程*<a href="https://github.com/AutomationPanda/awesome-web-testing-playwright">使用 Playwright 进行精彩的网页测试</a>*。所有说明和示例代码都在 GitHub 上。这个教程设计为自学指南,快来试试吧!</p>
<p>Test Automation University 还提供了一个<a href="https://testautomationu.applitools.com/learningpaths.html?id=playwright-path">Playwright 学习路径</a></p>
<p>Playwright 是一个出色的现代网页测试框架。快来尝试一下,告诉我你用它自动化了什么!</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://automationpanda.com/2023/07/28/modern-web-testing-with-playwright/</p>
<p>发布时间: 2023-07-28T13:00:00+00:00</p>
如何在 Playwright 测试中途把浏览器改成暗夜模式?
2023-07-24T00:00:00+00:00
2023-07-24T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/is-it-possible-to-change-colorscheme-in-the-middle-of-a-playwright-tests/
<p>这个问题最近在 Playwright Discord 服务器的 #help-playwright 频道中被提出。如果你还没加入,现在就<a href="https://discord.gg/playwright-807756831384403968">加入吧</a>!</p>
<blockquote>
<p>大家好,我希望能在测试过程中改变系统/浏览器的主题偏好,因为我的应用可以在不刷新页面的情况下响应用户偏好的变化。为了验证这一点,我需要能够在测试运行时更改系统/浏览器的主题。</p>
</blockquote>
<p>值得注意的是,有多种方法可以实现这一目标,让我们来看看!</p>
<h2 id="shi-yong-test-use">使用 test.use()</h2>
<p>第一种方法是使用 codegen 工具来构建 UI 测试。使用以下命令时,会以暗夜模式的 <code>color-scheme</code> 启动 codegen 工具。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npx</span><span> playwright codegen</span><span style="font-style:italic;color:#fc9354;"> --color-scheme</span><span style="color:#ff5e5e;">=</span><span>dark
</span></code></pre>
<p>默认情况下,生成的 codegen 文件如下:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">use</span><span>({
</span><span> colorScheme: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dark</span><span style="color:#ffffff;">"</span><span>,
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{});
</span></code></pre>
<p>这个例子展示了如何在测试用例外使用 <code>test.use()</code> 功能。这将确保该文件中运行的所有测试都使用深色 <code>colorScheme</code>。</p>
<p><a href="https://playwright.dev/docs/emulation#color-scheme-and-media">playwright 的模拟能力</a></p>
<h2 id="shi-yong-page-emulatemedia">使用 page.emulateMedia()</h2>
<p>另一种实现方法是在测试用例里使用 <code>page.emulateMedia()</code>。这允许你在同一个测试中进行多次检查和断言。在下面的例子中:</p>
<ul>
<li>我访问 <a href="https://www.reddit.com/">https://www.reddit.com</a></li>
<li>创建一个名为 postContainer 的定位器变量</li>
<li>将页面设置为深色模式(暗夜模式) <code>colorScheme</code></li>
<li>验证 CSS 背景颜色是深灰色</li>
<li>将页面设置回浅色模式(白天模式) <code>colorScheme</code></li>
<li>验证 CSS 背景颜色是白色</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">selectors</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证深色和浅色 CSS</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">selectors</span><span>.</span><span style="color:#8cdaff;">setTestIdAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">data-testid</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.reddit.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">postContainer </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">post-container</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">first</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">emulateMedia</span><span>({ colorScheme: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dark</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">postContainer</span><span>).</span><span style="color:#8cdaff;">toHaveCSS</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">background-color</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">rgba(26, 26, 27, 0.8)</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">tests/ui/reddit.com/screenshot/reddit-home-dark.png</span><span style="color:#ffffff;">`</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">emulateMedia</span><span>({ colorScheme: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">light</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">postContainer</span><span>).</span><span style="color:#8cdaff;">toHaveCSS</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">background-color</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">rgba(255, 255, 255, 0.8)</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">tests/ui/reddit.com/screenshot/reddit-home-light.png</span><span style="color:#ffffff;">`</span><span>,
</span><span> });
</span><span>});
</span></code></pre>
<p>特别感谢 Twitter 上的 <a href="https://twitter.com/r_ydv?ref_src=twsrc%5Etfw%7Ctwcamp%5Eembeddedtimeline%7Ctwterm%5Escreen-name%3Ar_ydv%7Ctwcon%5Es2">@r_ydv</a>,他创建了下面这篇文章,指导你如何进行 CSS 断言!</p>
<p><a href="https://testerops.com/playwright-and-css-validation/">Playwright 验证 CSS</a></p>
<h2 id="zai-newcontext-he-newpage-zhong-zhi-ding">在 newContext 和 newPage 中指定</h2>
<p>在下面的例子中,我们将在 <code>test</code> 块用 context 动态设置 <code>colorScheme</code>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">探索其他选项</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">browser </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 创建深色模式的上下文
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">context </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> colorScheme: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dark</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#6d6d6d;">// 或 'light'
</span><span> });
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 创建深色模式的页面
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newPage </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">browser</span><span>.</span><span style="color:#8cdaff;">newPage</span><span>({
</span><span> colorScheme: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dark</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#6d6d6d;">// 或 'light'
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://www.reddit.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">newPage</span><span>.</span><span style="color:#8cdaff;">screenshot</span><span>({
</span><span> path: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">tests/ui/reddit.com/screenshot/reddit-home-dark-context.png</span><span style="color:#ffffff;">`</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#6699cc;">close</span><span>();
</span><span>});
</span></code></pre>
<h2 id="zong-jie">总结</h2>
<p>通过这些例子,你应该有足够多的方法来更新你正在测试的浏览器的 <code>colorScheme</code>。所有代码示例都可以在<a href="https://github.com/BMayhew/playwright-demo/tree/master/tests/ui/reddit.com">这里</a>找到。享受深色模式下的测试乐趣吧!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/07/image-12.png" alt="图片 5" /></p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想在收件箱中收到更多内容,请在下面订阅,别忘了留下一个 ❤️ 来表示你的喜爱。</p>
<h2 id="lai-yuan">来源</h2>
<p>来源 URL: https://playwrightsolutions.com/is-it-possible-to-change-colorscheme-in-the-middle-of-a-playwright-tests/</p>
<p>发布时间: 2023-07-24</p>
在 Playwright 中处理不同测试间的多种登录状态
2023-07-17T00:00:00+00:00
2023-07-17T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/handling-multiple-login-states-between-different-tests-in-playwright/
<p>本周，我受到了与同事 <a href="https://playwrightsolutions.com/author/joel/">Joel</a> 的对话以及在 <a href="https://discord.com/channels/807756831384403968/1128777494401663020/1128777494401663020">Discord 频道</a> 中被提到的问题的启发，写下了如何在 Playwright 项目中处理不同登录状态的文章。</p>
<blockquote>
<p>我按照 <a href="https://playwright.dev/docs/auth">https://playwright.dev/docs/auth</a> 中的文档将“已登录”状态存储在 JSON 文件中。接下来的测试一切顺利，直到我测试注销功能的那一步。在注销测试场景之后，接下来的测试中用户的登录态没了!!。为什么会这样？请帮我理解并修复它。谢谢！</p>
</blockquote>
<p><strong>注意</strong>：有许多不同的方法可以解决这个问题，我将介绍我选择的解决方法，这取决于我正在测试的 web 应用程序。如果你有更简单或更健壮的方法来解决这个问题，请与我联系，我很想听听你的意见！</p>
<p><strong>注意 2</strong>：我在下面测试用例中的断言是不太完美的。我在这里投入了最少的时间，以突出 <code>sessionStorage</code> 和测试设置。</p>
<h2 id="tan-suo-wo-men-jiang-yao-ce-shi-de-wang-zhan">探索我们将要测试的网站</h2>
<p>但在开始之前，我们必须了解我们将要编写自动化测试的网站。我们将使用 <a href="https://practicesoftwaretesting.com/">https://practicesoftwaretesting.com/</a> 作为我们的测试系统（有关该站点的更多详细信息，请参阅 <a href="https://github.com/testsmith-io/practice-software-testing">GitHub 项目页面</a>。</p>
<p>在我的探索性测试过程中，我发现管理员 <code>auth-token</code> 在登录时生成，并且可以在同一浏览器的不同标签页中用于保持认证状态。如果我打开一个新的隐身窗口，会话不会激活，我没有登录，但我可以使用相同的用户名和密码创建第二个已认证会话。这两个会话可以同时存在。一旦我使用注销功能，我发现与之对应的 <code>auth-token</code> 现在失效了，而另一个 <code>auth-token</code> 仍然可以使用。这告诉我，当我要编写验证注销功能的测试时，直接依赖于当前登录用户的测试是行不通的。</p>
<p>这告诉我，我们正在测试的应用程序具有良好的安全性实践。当我们从系统注销时，<code>auth-token</code> 会失效。因此，当我们创建注销测试时，可能应该避免使用我们的默认 <code>auth-token</code>。</p>
<h2 id="zai-playwright-zhong-chuang-jian-yi-ge-she-zhi-xiang-mu">在 Playwright 中创建一个设置项目</h2>
<p>我使用的提交代码的仓库可以在下面找到。</p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com">使用 Playwright 测试 https://practicesoftwaretesting.com 示例 - GitHub</a></p>
<p>我们需要做的第一步是建立一个新的 <code>setup project</code>。在下面的配置文件中，我们有两个项目，第一个是 <code>setup</code>，它查找 <code>*.setup.ts</code> 文件并运行它们，第二个项目是 <code>ui-tests</code>，它依赖于 <code>setup</code> 项目成功运行才能继续。有关 defineConfig 的更多信息，请参阅 playwright 文档中的 <a href="https://playwright.dev/docs/test-configuration">测试配置</a> 部分。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import type </span><span>{ </span><span style="color:#e9fdac;">APIRequestOptions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./lib/fixtures/apiRequest</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">TestOptions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./lib/pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">config</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span>(</span><span style="color:#e9fdac;">defineConfig </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">APIRequestOptions</span><span>) </span><span style="color:#ff5e5e;">&
</span><span> (</span><span style="color:#e9fdac;">TestOptions </span><span style="color:#ff5e5e;">>
</span><span> {
</span><span> projects: [
</span><span> { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>, testMatch: </span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">setup</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">ts</span><span style="color:#ffffff;">/</span><span>, fullyParallel: </span><span style="color:#ff8942;">true </span><span>},
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui-tests</span><span style="color:#ffffff;">"</span><span>,
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>],
</span><span> },
</span><span> ],
</span><span> testDir: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./tests</span><span style="color:#ffffff;">"</span><span>,
</span><span> fullyParallel: </span><span style="color:#ff8942;">true</span><span>,
</span><span> forbidOnly: </span><span style="color:#ff5e5e;">!!</span><span>process.env.</span><span style="color:#e9fdac;">CI</span><span>,
</span><span> retries: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">2 </span><span style="color:#ff5e5e;">: </span><span style="color:#fdb082;">0</span><span>,
</span><span> workers: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">1 </span><span style="color:#ff5e5e;">: </span><span style="color:#ff8942;">undefined</span><span>,
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>]],
</span><span> use: {
</span><span> testIdAttribute: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">data-test</span><span style="color:#ffffff;">"</span><span>,
</span><span> baseURL: process.env.</span><span style="color:#e9fdac;">UI_URL</span><span>,
</span><span> apiURL: process.env.</span><span style="color:#e9fdac;">API_URL</span><span>,
</span><span> apiBaseURL: process.env.</span><span style="color:#e9fdac;">API_URL</span><span>,
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">on</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span></code></pre>
<h2 id="tian-jia-wo-men-de-she-zhi-jiao-ben">添加我们的设置脚本</h2>
<p>如你所见，<code>auth.setup.ts</code> 依赖于我在此文件（.env 和 LoginPage）下的一些代码块。因为这个设置文件被设置为一个项目，我们可以访问重命名为 <code>setup</code> 的测试块，以表明这些是初始化步骤而不是真正的测试。</p>
<p><code>auth.setup.ts</code> 文件的前半部分为不同的电子邮件、密码和文件名设置变量。这些变量在每个设置块中使用。分解实际的 <code>setup</code> 步骤，包括：</p>
<ul>
<li>创建一个 LoginPage 类，以便我们可以利用页面对象</li>
<li>访问登录页面</li>
<li>使用登录异步函数，传入指定的电子邮件和密码</li>
<li>验证用户已登录</li>
<li>将 <code>storageState</code> 保存到指定文件</li>
</ul>
<p>在三个不同用户（管理员、customer01 和 customer02）的三个设置块中重复这些步骤。</p>
<p>另一个需要注意的是，我在 <code>playwright.config.ts</code> 中设置了 <code>fullyParallel: true</code>，这将在多个工作线程中运行时同时运行每个 setup 步骤。这将有助于加快 setup 步骤的速度。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/auth.setup.ts
</span><span>
</span><span style="color:#6d6d6d;">// 通过设置测试将你的存储状态保存到 .auth 目录中的文件
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">LoginPage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@pages</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">setup</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">adminEmail </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_USERNAME</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">adminPassword </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">adminAuthFile </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/admin.json</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">customer01Email </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">CUSTOMER_01_USERNAME</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">customer01Password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">CUSTOMER_01_PASSWORD</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">customer01AuthFile </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/customer01.json</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">customer02Email </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">CUSTOMER_02_USERNAME</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">customer02Password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">CUSTOMER_02_PASSWORD</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">customer02AuthFile </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/customer02.json</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">setup</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Create Admin Auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">context </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#e9fdac;">adminEmail</span><span>, </span><span style="color:#e9fdac;">adminPassword</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">navAdminMenu</span><span>.</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">John Doe</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">storageState</span><span>({ path: </span><span style="color:#e9fdac;">adminAuthFile </span><span>});
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">setup</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Create Customer 01 Auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">context </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#e9fdac;">customer01Email</span><span>, </span><span style="color:#e9fdac;">customer01Password</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">navUserMenu</span><span>.</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Jane Doe</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">storageState</span><span>({ path: </span><span style="color:#e9fdac;">customer01AuthFile </span><span>});
</span><span>});
</span><span>
</span><span style="color:#8cdaff;">setup</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Create Customer 02 Auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">context </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#e9fdac;">customer02Email</span><span>, </span><span style="color:#e9fdac;">customer02Password</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">navUserMenu</span><span>.</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Jack Howe</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">storageState</span><span>({ path: </span><span style="color:#e9fdac;">customer02AuthFile </span><span>});
</span><span>});
</span></code></pre>
<p>首先要注意的是，我使用了 <code>dotenv</code> 包来管理存储在 <code>.env</code> 文件中的环境变量。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// .env
</span><span>
</span><span># </span><span style="color:#e9fdac;">URLS
</span><span style="color:#e9fdac;">UI_URL</span><span style="color:#ff5e5e;">=</span><span>https:</span><span style="color:#6d6d6d;">//practicesoftwaretesting.com
</span><span style="color:#e9fdac;">API_URL</span><span style="color:#ff5e5e;">=</span><span>https:</span><span style="color:#6d6d6d;">//api.practicesoftwaretesting.com
</span><span>
</span><span># </span><span style="color:#e9fdac;">Logins
</span><span style="color:#e9fdac;">CUSTOMER_01_USERNAME</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">customer</span><span>@</span><span style="color:#e9fdac;">practicesoftwaretesting</span><span>.</span><span style="color:#e9fdac;">com
</span><span style="color:#e9fdac;">CUSTOMER_01_PASSWORD</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">welcome01
</span><span style="color:#e9fdac;">CUSTOMER_02_USERNAME</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">customer2</span><span>@</span><span style="color:#e9fdac;">practicesoftwaretesting</span><span>.</span><span style="color:#e9fdac;">com
</span><span style="color:#e9fdac;">CUSTOMER_02_PASSWORD</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">welcome01
</span><span style="color:#e9fdac;">ADMIN_USERNAME</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">admin</span><span>@</span><span style="color:#e9fdac;">practicesoftwaretesting</span><span>.</span><span style="color:#e9fdac;">com
</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span style="color:#ff5e5e;">=</span><span style="color:#e9fdac;">welcome01
</span></code></pre>
<p>我还使用了 <code>登录页面</code> 的页面对象。这是从我在 <code>tsconfig.json</code> 文件中设置的 <code>@pages</code> 路径导入的。我在任何指南中都没有涵盖这一点，但计划很快写一些文章说明一下，现在只需知道它是一个不错的快捷方式，我可以使用它，而无需在导入中使用完整路径。在页面文件中，我们有一些定位器和两个方法。一个用于访问登录页面，另一个用于登录，需要传入电子邮件和密码作为变量。</p>
<p>这样做可以简化我的测试和设置文件。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/pages/loginPage.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">Page </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>LoginPage {
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">email</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">submit </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">login-submit</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">navUserMenu </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-user-menu</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">navAdminMenu </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-admin-menu</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">navSignOut </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-sign-out</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">readonly </span><span style="color:#e9fdac;">navSignIn </span><span style="color:#ff5e5e;">= </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-sign-in</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">goto</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page
</span><span>
</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${process.env.</span><span style="color:#e9fdac;">UI_URL</span><span style="color:#fbe3bf;">}/sign-in</span><span style="color:#ffffff;">`</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">login</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">email</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">username</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">email</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">password</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">submit</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForTimeout</span><span>(</span><span style="color:#fdb082;">1000</span><span>); </span><span style="color:#6d6d6d;">// 添加一个短暂的延迟以确保登录过程完成
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#8cdaff;">logout</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">navSignOut</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#d699ff;">this</span><span>.</span><span style="color:#e9fdac;">navSignIn</span><span>.</span><span style="color:#8cdaff;">waitFor</span><span>({ state: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">visible</span><span style="color:#ffffff;">" </span><span>});
</span><span> }
</span><span>}
</span></code></pre>
<p>从页面对象中，我们返回到 <code>auth.setup.ts</code> 文件。我们创建了三个用于认证的文件，这些文件会随着页面一起使用。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// auth.setup.ts
</span><span>
</span><span style="color:#8cdaff;">setup</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Create Admin Auth</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">context </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">login</span><span>(</span><span style="color:#e9fdac;">adminEmail</span><span>, </span><span style="color:#e9fdac;">adminPassword</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#e9fdac;">navAdminMenu</span><span>.</span><span style="color:#8cdaff;">innerText</span><span>()).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">John Doe</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">storageState</span><span>({ path: </span><span style="color:#e9fdac;">adminAuthFile </span><span>});
</span><span>});
</span></code></pre>
<p>一旦我们将 <code>setup</code> 设置为一个项目，我们就可以在 <code>ui-tests</code> 项目中使用这些存储的文件。我们可以在 <code>playwright.config.ts</code> 文件中将其作为存储状态的一部分提供给 <code>context</code> 对象。我们通过设置 <code>storageState</code> 为 <code>authFile</code> 路径中的 <code>storageState</code> 属性来实现。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> projects: [
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>,
</span><span> testMatch: </span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">setup</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">ts</span><span style="color:#ffffff;">/</span><span>,
</span><span> fullyParallel: </span><span style="color:#ff8942;">true</span><span>,
</span><span> },
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui-tests</span><span style="color:#ffffff;">"</span><span>,
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>],
</span><span> use: {
</span><span> storageState: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">.auth/admin.json</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> },
</span><span> ],
</span><span>});
</span></code></pre>
<p>在此示例中，我们可以使用相同的方法为 <code>ui-tests</code> 项目提供任何 <code>authFile</code>。<code>authFile</code> 由实际测试使用，并且可以在存储状态下的 <code>use</code> 属性中设置。</p>
<h2 id="chuang-jian-wo-men-de-ce-shi">创建我们的测试</h2>
<p>以下是我们需要的一个简单示例，展示如何在项目中实现这一点。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/auth.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Verify that the authenticated user can log out</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 通过使用存储状态文件，登录用户的状态会自动加载到页面中
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言用户已登录
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-admin-menu</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toContainText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">John Doe</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 调用登出方法
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">loginPage </span><span style="color:#ff5e5e;">= new </span><span>LoginPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">loginPage</span><span>.</span><span style="color:#8cdaff;">logout</span><span>();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 断言用户已注销
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">nav-sign-in</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span>});
</span></code></pre>
<p>在此示例中，我们导入 <code>test</code> 和 <code>expect</code> 来自 <code>@playwright/test</code>，并编写了一个简单的测试，展示了如何使用存储状态来验证用户是否已登录并能够注销。</p>
<h2 id="zong-jie">总结</h2>
<p>如你所见，我们有很多不同的方法可以用来在 Playwright 项目中处理不同的登录状态。通过创建一个 setup 项目，并在 <code>ui-tests</code> 项目中使用存储状态文件，我们能够有效地管理多个用户的登录状态。这样可以确保每个测试都在正确的登录状态下执行，并且在注销测试后，其他测试不会受到影响。</p>
<p>我们希望这篇文章对你有所帮助，并激发你在 Playwright 项目中处理类似问题的灵感。如果你有任何问题或建议，请随时与我们联系！</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源：https://playwrightsolutions.com/handling-multiple-login-states-between-different-tests-in-playwright/</p>
<p>发布时间：2023-07-17T12:30:51.000Z</p>
The Definitive Guide to API Test Automation With Playwright: Part 6 - Creating a DataFactory to Manage Test Data
2023-07-10T00:00:00+00:00
2023-07-10T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-testcreating-a-datafactory-to-manage-test-data/
<p>I believe the hardest thing about Test Automation is creating and managing test data and system state. Today's guide we are going to walk through how I typically tackle the test data problem in my test automation projects. Keep in mind there are multiple ways to solve this problem. If you're just joining us now go check out the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">introduction post</a> which links to all parts we've covered so far. For our examples we will use the playwright-api-test-demo repository linked below.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub</a></p>
<p>While working through this article I posted this online to get feedback from others. Most of the responses were around solving the problem. The answers included using faker library, using SQL or graphQL to create the data you need in your data storage within your tests, and using scrambled production data. Another response was 'State' being the hardest problem in automation. I think that is the most correct answer, as data makes up what state the application is in, though you could argue that some applications use data to store the state of the application. (If you're not following <a href="https://twitter.com/FriendlyTester">@FriendlyTester</a> on twitter you should be)</p>
<blockquote>
<p>I would say State. But test data makes up a big part of that</p>
<p>— Richard Bradshaw 🇺🇦 (@FriendlyTester) <a href="https://twitter.com/FriendlyTester/status/1675281540496912389?ref_src=twsrc%5Etfw">July 1, 2023</a></p>
</blockquote>
<h2 id="defining-static-test-data">Defining Static Test Data</h2>
<p>For the application we are testing (specifically the API), there are a few things to know before we get into my implementation. First the application defaults deletes any test data and re-seeds the database with a minimal amount of test data. For test data that I always expect to exist, I like to refer to this as static test data. This is data that I may hard code in a specific test or set of tests, and always rely it will be there. The rules I put around this data are, automation tests shouldn't modify this data and users of the system shouldn't modify the data. Enforcing this can be very difficult, which leads me to relying on this strategy for all my data. I typically only use static data when I am doing a POC proof of concept examples, at the beginning of an automation project with the goal of refactor to use generated data, or for high level objects that may only be created once (think highest level account or api keys).</p>
<p>I won't be covering creating test data in xlsx, csv, or json files. I really look at this as a form of static test data, that may live within your automation repo that you create or assert with from existing files.</p>
<h2 id="creating-a-fake-random-data">Creating a Fake Random Data</h2>
<p>The other option you have rather than creating static data is to create random data while the tests run for your testing needs. The tool I tend to use for this is <code>@faker-js/faker</code>. This library has been useful for all my needs!</p>
<p><a href="https://www.npmjs.com/package/@faker-js/faker">@faker-js</a></p>
<p>The usage guide can be found here</p>
<p><a href="https://fakerjs.dev/guide/usage.html">Usage | Faker Generate massive amounts of fake (but reasonable) data for testing and development.</a></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">randomName </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">person</span><span>.</span><span style="color:#8cdaff;">fullName</span><span>(); </span><span style="color:#6d6d6d;">// Rowan Nikolaus
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">randomEmail </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">email</span><span>(); </span><span style="color:#6d6d6d;">// Kassandra.Haley@erich.biz
</span></code></pre>
<h2 id="creating-a-datafactory">Creating a Datafactory</h2>
<p>Now that we have a way to create random data, we need to find a way to structure this within our Playwright project. For this I will start by creating a <code>/lib</code> folder within that folder we'll create a <code>/datafactory</code> folder. I'll use this folder for any files that directly interact with the system either via <code>SQL</code> or <code>API</code> request in order to create test data. I use the <code>/helpers</code> folder to store any helper functions that help arrange test data, or may even call a data factory method to create test data. An example of that would be the <code>createHeaders.ts</code> file which was covered in <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-4-handling-headers-and-authentication/">part 4</a> of the series.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/07/image-4.png" alt="Image 8" /></p>
<h2 id="auth-datafactory">Auth Datafactory</h2>
<p>The <code>createHeaders.ts</code> helper file imports the <code>createCookies</code> function from the auth data factory file.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/createHeaders.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createCookies </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../datafactory/auth</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_NAME</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">token</span><span style="color:#6d6d6d;"> a valid token to be used in the request if one is not provided cookies will be created from default username and password
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> a header object with the token set as a cookie
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createHeaders } from "../lib/helpers/createHeaders";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const headers = await createHeaders(token);
</span><span style="color:#6d6d6d;"> * const response = await request.delete(`booking/${bookingId}`, {
</span><span style="color:#6d6d6d;"> headers: headers,
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createHeaders</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">token</span><span style="color:#ff5e5e;">?</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">requestHeaders</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">token</span><span>) {
</span><span> </span><span style="color:#e9fdac;">requestHeaders </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">token</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// Authenticate and get cookies
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createCookies</span><span>(</span><span style="color:#e9fdac;">username</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#e9fdac;">requestHeaders </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#e9fdac;">cookies</span><span>,
</span><span> };
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">requestHeaders</span><span>;
</span><span>}
</span></code></pre>
<p>The <code>auth.ts</code> file uses playwright request method to make an api call to either <code>createCookies</code> or <code>createToken</code>. I created both of these based off of needs within the tests. In these examples I am using JSDoc to provide documentation that is easy to read while working within the codebase. One thing to note, when working with exported functions I don't have access to <code>baseURL</code> that Playwright provides within the test fixture, so I do have to set the URL. Another approach would be to create fixtures that could be used within a playwright test step, but I found this is easier for me to wrap my head around, and for new joiners within the team to comprehend. I'll leave creating fixtures for areas where I need to extend my framework rather than managing test data.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/auth.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * Returns valid cookies for the given username and password.
</span><span style="color:#6d6d6d;"> * If a username and password aren't provided "admin" and "password" will be used
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createCookies } from "../datafactory/auth";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const cookies = createCookies("Happy", "Mcpassword")
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const response = await request.put(`booking/${bookingId}`, {
</span><span style="color:#6d6d6d;"> headers: { cookie: cookies },
</span><span style="color:#6d6d6d;"> data: body,
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createCookies</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">username</span><span>) {
</span><span> </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">password</span><span>) {
</span><span> </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">contextRequest </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">contextRequest</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span> </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">set-cookie</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">cookies</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * Returns valid token for the given username and password.
</span><span style="color:#6d6d6d;"> * If a username and password aren't provided "admin" and "password" will be used
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createToken } from "../datafactory/auth";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const token = createToken("Happy", "Mcpassword")
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const response = await request.post("auth/validate", {
</span><span style="color:#6d6d6d;"> data: { token: token },
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createToken</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">username</span><span>) {
</span><span> </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">password</span><span>) {
</span><span> </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">contextRequest </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">contextRequest</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">tokenString </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">set-cookie</span><span style="color:#ffffff;">"</span><span>].</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">;</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">0</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">token </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">tokenString</span><span>.</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">=</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">1</span><span>];
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">token</span><span>;
</span><span>}
</span></code></pre>
<h2 id="bookings-datafactory">Bookings Datafactory</h2>
<p>Where this gets really interesting is when we start to solve harder <code>state</code> problems within our tests. For example, let's say I want to utilize static data, the room id 1 which exists as a part of the seeded data, and I want to write a test that exercises the <code>DELETE</code> <code>booking/{id}</code> endpoint. For this I first want to create a booking, and then use that id to delete the booking, and have some assertions on the response, which includes getting the booking summary to assert against. The spec can be seen below.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/booking/booking.delete.spec.ts
</span><span>
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: DELETE /booking/{id}
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">getBookingSummary</span><span>,
</span><span> </span><span style="color:#e9fdac;">createFutureBooking</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/{id} DELETE requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">bookingId</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">1</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createFutureBooking</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="color:#e9fdac;">bookingId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureBooking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>;
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">DELETE booking with specific room id:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">delete</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">202</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getBookingSummary</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBooking</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>The two datafactory methods <code>getBookingSummary</code> and <code>createFutureBooking</code> both interact with the underlying api to either get or create test data. Let's first look at <code>getBookingSummary</code>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/bookings.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">bookingId</span><span style="color:#6d6d6d;">: number for the booking you want to see the summary of
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the booking/summary?roomid=${bookingId} endpoint
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getBookingSummary</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">bookingId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/summary?roomid=${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span></code></pre>
<p>As you can see this exported function accepts a bookingId as an input, and makes a unauthenticated <code>GET</code> call to <code>booking/summary?roomid=${bookingId}</code>. It then makes a check to ensure the response code is 200 (success), and returns the body as a json object. We can then use this in the assertion to ensure the length of the returned object which is a bookings array has a length of 0. I abstracted this api call in the datafactory function that can be used for other similar needs. This was a simple example lets look at the <code>createFutureBooking</code> function.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/bookings.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * This function will create a booking with provided roomId and a checkinDate
</span><span style="color:#6d6d6d;"> * A checkout date will be randomly generated between 1 and 4 days after the checkinDate
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">roomId</span><span style="color:#6d6d6d;">: number for the room to create a booking for
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the booking just created
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * This code is wrapped in an assert retry details can be found
</span><span style="color:#6d6d6d;"> * https://playwright.dev/docs/test-assertions#retrying
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createFutureBooking</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">roomId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">body</span><span>;
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureCheckinDate </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">randBookingLength </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">datatype</span><span>.</span><span style="color:#8cdaff;">number</span><span>({ min: </span><span style="color:#fdb082;">1</span><span>, max: </span><span style="color:#fdb082;">4 </span><span>});
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkInString </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureCheckinDate</span><span>.</span><span style="color:#8cdaff;">toISOString</span><span>().</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">T</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">0</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkOutString </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#e9fdac;">randBookingLength</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// console.log("booking length: " + randBookingLength);
</span><span> </span><span style="color:#6d6d6d;">// console.log("checkin string: " + checkInString);
</span><span> </span><span style="color:#6d6d6d;">// console.log("checkout string: " + checkOutString);
</span><span>
</span><span> </span><span style="color:#e9fdac;">bookingBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">firstName</span><span>(),
</span><span> lastname: </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">lastName</span><span>(),
</span><span> depositpaid: </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">< </span><span style="color:#fdb082;">0.5</span><span>, </span><span style="color:#6d6d6d;">//returns true or false
</span><span> email: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">email</span><span>(),
</span><span> phone: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">phone</span><span>.</span><span style="color:#8cdaff;">number</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">###########</span><span style="color:#ffffff;">"</span><span>),
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#e9fdac;">checkInString</span><span>,
</span><span> checkout: </span><span style="color:#e9fdac;">checkOutString</span><span>,
</span><span> },
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">bookingBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span> </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>({
</span><span> intervals: [</span><span style="color:#fdb082;">1_000</span><span>, </span><span style="color:#fdb082;">2_000</span><span>, </span><span style="color:#fdb082;">5_000</span><span>],
</span><span> timeout: </span><span style="color:#fdb082;">20_000</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span></code></pre>
<p>This function as you can see is a bit more complicated. When walking through the logic we see you first need to pass in a roomid and the function then:</p>
<ul>
<li>Creates valid headers via datafactory to make authenticated api calls</li>
<li>Gets a valid available future checkin date from another datafactory method <code>futureOpenCheckinDate</code> that will be shown below in the whole booking.ts file</li>
<li>Creates a random amount of days between 1-4 to create a booking length</li>
<li>Sets checkin and checkout date string calculated from the previous two steps</li>
<li>Then use the faker library to build a booking body with fake data and checkin dates from previous steps</li>
<li>Then make an <code>POST</code> call with the body we built above to <code>booking/</code> endpoint</li>
<li>Then validate the response code is 200</li>
<li>Then sets <code>body</code> variable to the response body in json format</li>
<li>All the above steps are wrapped in a <code>[toPass()](https://playwright.dev/docs/test-assertions#expecttopass)</code> method which is a newer method built into Playwright that allows you to retry the block of code if any of the assertions failed. This is here because if I run my tests in parallel it's possible that the future date gets booked before the booking code runs resulting in <code>409</code> response codes.</li>
<li>Finally the body is returned for the newly created booking.</li>
</ul>
<p>This datafactory function allows me to quickly create booking to use in my checks. I've built them in a way that they are flexible and re-usable, abstracting away a lot of the heavy logic from my tests. The full <code>booking.ts</code> file can be found below, there are some other methods we won't be specifically covering in this article but are used within my test suite.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/booking.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">bookingBody</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkOutArray</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createRandomBookingBody</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">roomId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">checkInString</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">checkOutString</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string
</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">bookingBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">firstName</span><span>(),
</span><span> lastname: </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">lastName</span><span>(),
</span><span> depositpaid: </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">< </span><span style="color:#fdb082;">0.5</span><span>, </span><span style="color:#6d6d6d;">//returns true or false
</span><span> email: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">email</span><span>(),
</span><span> phone: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">phone</span><span>.</span><span style="color:#8cdaff;">number</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">###########</span><span style="color:#ffffff;">"</span><span>),
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#e9fdac;">checkInString</span><span>,
</span><span> checkout: </span><span style="color:#e9fdac;">checkOutString</span><span>,
</span><span> },
</span><span> };
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">bookingBody</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * This function will create a booking with provided roomId and a checkinDate
</span><span style="color:#6d6d6d;"> * A checkout date will be randomly generated between 1 and 4 days after the checkinDate
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">roomId</span><span style="color:#6d6d6d;">: number for the room to create a booking for
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the booking just created
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * This code is wrapped in an assert retry details can be found
</span><span style="color:#6d6d6d;"> * https://playwright.dev/docs/test-assertions#retrying
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createFutureBooking</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">roomId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">body</span><span>;
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureCheckinDate </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">randBookingLength </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">datatype</span><span>.</span><span style="color:#8cdaff;">number</span><span>({ min: </span><span style="color:#fdb082;">1</span><span>, max: </span><span style="color:#fdb082;">4 </span><span>});
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkInString </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureCheckinDate</span><span>.</span><span style="color:#8cdaff;">toISOString</span><span>().</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">T</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">0</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkOutString </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#e9fdac;">randBookingLength</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// console.log("booking length: " + randBookingLength);
</span><span> </span><span style="color:#6d6d6d;">// console.log("checkin string: " + checkInString);
</span><span> </span><span style="color:#6d6d6d;">// console.log("checkout string: " + checkOutString);
</span><span>
</span><span> </span><span style="color:#e9fdac;">bookingBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">firstName</span><span>(),
</span><span> lastname: </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">lastName</span><span>(),
</span><span> depositpaid: </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">< </span><span style="color:#fdb082;">0.5</span><span>, </span><span style="color:#6d6d6d;">//returns true or false
</span><span> email: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">internet</span><span>.</span><span style="color:#8cdaff;">email</span><span>(),
</span><span> phone: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">phone</span><span>.</span><span style="color:#8cdaff;">number</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">###########</span><span style="color:#ffffff;">"</span><span>),
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#e9fdac;">checkInString</span><span>,
</span><span> checkout: </span><span style="color:#e9fdac;">checkOutString</span><span>,
</span><span> },
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">bookingBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span> </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>({
</span><span> intervals: [</span><span style="color:#fdb082;">1_000</span><span>, </span><span style="color:#fdb082;">2_000</span><span>, </span><span style="color:#fdb082;">5_000</span><span>],
</span><span> timeout: </span><span style="color:#fdb082;">20_000</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * This function will return all the bookings for a roomId
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">roomId</span><span style="color:#6d6d6d;">: number for the room you want to get the bookings for
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the bookings for the room
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getBookings</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">roomId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/?roomid=</span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// console.log(JSON.stringify(body));
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">bookingId</span><span style="color:#6d6d6d;">: number for the booking you want to see the summary of
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the booking/summary?roomid=${bookingId} endpoint
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getBookingSummary</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">bookingId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/summary?roomid=${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">bookingId</span><span style="color:#6d6d6d;"> number for the booking you want to see the details of
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the booking/${bookingId} endpoint
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getBookingById</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">bookingId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">roomId
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the most future checkout date for a room
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * let futureCheckinDate = await futureOpenCheckinDate(roomId); // "2023-03-31T00:00:00.000Z"
</span><span style="color:#6d6d6d;"> * let checkInString = futureCheckinDate.toISOString().split("T")[0]; // "2023-03-31"
</span><span style="color:#6d6d6d;"> * let checkOutString = stringDateByDays(futureCheckinDate, 2); // "2023-04-02"
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">roomId</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">currentBookings </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getBookings</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span>
</span><span> </span><span style="color:#e9fdac;">checkOutArray </span><span style="color:#ff5e5e;">= new </span><span>Array();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Iterate through current bookings and get checkout dates
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>; </span><span style="color:#e9fdac;">i </span><span style="color:#ff5e5e;">< </span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">currentBookings</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length); </span><span style="color:#e9fdac;">i</span><span style="color:#ff5e5e;">++</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">today </span><span style="color:#ff5e5e;">= new </span><span>Date();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkOut </span><span style="color:#ff5e5e;">= new </span><span>Date(</span><span style="color:#e9fdac;">currentBookings</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#e9fdac;">i</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">today </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">checkOut</span><span>) {
</span><span> </span><span style="color:#6d6d6d;">// pushing the checkout date into an array
</span><span> </span><span style="color:#e9fdac;">checkOutArray</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">checkOut</span><span>);
</span><span> }
</span><span> }
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Find the most future checkout date and return it if no future dates exist return today
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">mostFutureDate </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">checkOutArray
</span><span> .</span><span style="color:#6699cc;">sort</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">a</span><span>, </span><span style="font-style:italic;color:#fc9354;">b</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">a </span><span style="color:#ff5e5e;">- </span><span style="color:#e9fdac;">b</span><span>;
</span><span> })
</span><span> .</span><span style="color:#6699cc;">pop</span><span>() </span><span style="color:#ff5e5e;">|| new </span><span>Date();
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// console.log("Last Checkout Date: " + mostFutureDate);
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">mostFutureDate</span><span>;
</span><span>}
</span></code></pre>
<h2 id="adding-a-room-datafactory">Adding a Room Datafactory</h2>
<p>Now that we have a way to quickly create bookings for any room, we still have a data problem in one of our earlier tests. <code>POST new booking with full body</code> from the <code>POST</code> <code>booking/</code> endpoint. This test would sometimes pass and sometimes fail due to an error trying to book the hardcoded roomid=1. Let's go ahead and build a datafactory function that will create a new room for this test and implement it.</p>
<p>The first thing I did was use the <code>POST</code> <code>room/</code> endpoint in the VS Code Thunder API client, while using the <a href="https://automationintesting.online/room/swagger-ui/index.html#/">swagger page</a> to understand more about how the endpoint requirements. The first thing I noticed is we do need a valid cookie, so this will be an authenticated request. The 2nd thing after making a <code>POST</code> request is that the example <code>POST</code> body that was given as an example includes roomid, but it looks like that is a value set by the application, not something that can be set from the api request. This seems like a bug in the application is any value I add to roomid it never gets used, and always gets overwritten to a new unused sequential value from the system under test.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">roomid</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">0</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">roomName</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">type</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Suite</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">accessible</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">image</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">description</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">features</span><span style="color:#ffffff;">"</span><span>: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"
</span><span> ],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">roomPrice</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">999
</span><span>}
</span></code></pre>
<p><img src="https://playwrightsolutions.com/content/images/2023/07/image-5.png" alt="Image 9" /></p>
<p>Example of request body | response</p>
<p>Knowing this I decided to leave out the <code>roomid</code> as a field that I pass in via the <code>POST</code> body. Below is the full <code>room.ts</code> datafactory file. It includes 2 exported functions. The first to <code>createRandomRoomBody()</code>, with two optional parameters, <code>roomName</code> and <code>roomPrice</code>. This is used by the 2nd function <code>createRoom()</code>. With these datafactory functions we can now implement them within the <code>POST new booking spec</code></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/room.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">faker </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@faker-js/faker</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createHeaders </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createRandomRoomBody</span><span style="color:#ffffff;">(
</span><span> </span><span style="font-style:italic;color:#fc9354;">roomName</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span> </span><span style="font-style:italic;color:#fc9354;">roomPrice</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">number
</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomType </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Single</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Double</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Twin</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">features </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">TV</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">WiFi</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Safe</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mini Bar</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Tea/Coffee</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Balcony</span><span style="color:#ffffff;">"</span><span>];
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> roomName: </span><span style="color:#e9fdac;">roomName </span><span style="color:#ff5e5e;">|| </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">random</span><span>.</span><span style="color:#8cdaff;">numeric</span><span>(</span><span style="color:#fdb082;">3</span><span>),
</span><span> type: </span><span style="color:#e9fdac;">roomType</span><span>[</span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">floor</span><span>(</span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">* </span><span style="color:#e9fdac;">roomType</span><span>.length)], </span><span style="color:#6d6d6d;">// returns a random value from the array
</span><span> accessible: </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>() </span><span style="color:#ff5e5e;">< </span><span style="color:#fdb082;">0.5</span><span>, </span><span style="color:#6d6d6d;">//returns true or false
</span><span> image: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">image</span><span>.</span><span style="color:#8cdaff;">imageUrl</span><span>(</span><span style="color:#fdb082;">500</span><span>, </span><span style="color:#fdb082;">500</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cat</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff8942;">true</span><span>),
</span><span> description: </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">hacker</span><span>.</span><span style="color:#8cdaff;">phrase</span><span>(),
</span><span> features: </span><span style="color:#e9fdac;">features</span><span>.</span><span style="color:#6699cc;">sort</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#fdb082;">0.5 </span><span style="color:#ff5e5e;">- </span><span style="color:#ecfdb9;">Math</span><span>.</span><span style="color:#6699cc;">random</span><span>()).</span><span style="color:#6699cc;">slice</span><span>(</span><span style="color:#fdb082;">0</span><span>, </span><span style="color:#fdb082;">3</span><span>), </span><span style="color:#6d6d6d;">// returns 3 random values from the array
</span><span> roomPrice: </span><span style="color:#e9fdac;">roomPrice </span><span style="color:#ff5e5e;">|| </span><span style="color:#e9fdac;">faker</span><span>.</span><span style="color:#e9fdac;">random</span><span>.</span><span style="color:#8cdaff;">numeric</span><span>(</span><span style="color:#fdb082;">3</span><span>),
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">roomBody</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * This function will create a room with provided name and a price
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">roomName</span><span style="color:#6d6d6d;">: string for the room to create
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">roomPrice</span><span style="color:#6d6d6d;">: number for the price of the room
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> the body of the room just created with a unique roomid in the response
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * let room = await createRoom("My Room", 100);
</span><span style="color:#6d6d6d;"> * let roomId = room.roomid;
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createRoom</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">roomName</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">roomPrice</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">body</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRandomRoomBody</span><span>(</span><span style="color:#e9fdac;">roomName</span><span>, </span><span style="color:#e9fdac;">roomPrice</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">room/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> data: </span><span style="color:#e9fdac;">roomBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span> </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span></code></pre>
<p>Using the image below you can see the refactor to the test with the datafactory already built only took 4 lines of code to be modified. We removed the hardcoded value and then set the roomId to the newly created <code>roomid</code> that was created by the datafactory.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/07/image-6.png" alt="Image 10" /></p>
<p>Now that I have the room datafactory I could refactor all of my tests very quickly to always create it's own data.</p>
<h2 id="abstractions-are-fun">Abstractions are Fun!</h2>
<p>Really all we've done through the datafactory is added a layer of <a href="https://stackify.com/oop-concept-abstraction/">abstraction</a>, making are tests more readable, and building functions that can be used over and over again throughout our API tests. An abstractions is a core principle of <a href="https://www.techtarget.com/searchapparchitecture/definition/object-oriented-programming-OOP#:~:text=Object%2Doriented%20programming%20(OOP)%20is%20a%20computer%20programming%20model,has%20unique%20attributes%20and%20behavior.">Object Oriented Programming</a>.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/07/ezgif.com-optimize.gif" alt="Image 11" /></p>
<p>The pull request for these changes can be found below</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/7">adding a rooms datafactory and updating booking post spec by BMayhew · Pull Request #7</a></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-testcreating-a-datafactory-to-manage-test-data/</p>
<p>Published Time: 2023-07-10T12:30:12.000Z</p>
playwright社区一些非常好用的工具
2023-07-03T00:00:00+00:00
2023-07-03T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-community-highlight/
<p>本周我想尝试一些不同的内容。我不是准备下一篇文章，而是想要聚焦 Luc Gagan 对 Playwright 社区的贡献。Luc 加入社区才几个月，但在他的网站 https://ray.run 上已经创造了许多优质内容、教程和工具。</p>
<h2 id="ask-ai">Ask AI</h2>
<p>Luc 发布的工具中，我最喜欢的是 Ask AI（https://ray.run/ask）。这个工具让人印象深刻，它有类似 ChatGPT 的界面，可以回答你关于 Playwright 的问题，并提供代码示例。</p>
<p>另一个我常用的工具集是 https://ray.run/tools。这里有大量实用工具，得益于内置的键盘快捷搜索功能，使用起来非常方便。converters、formatters、sorters、encoders 和 decoders 应有尽有！这已经成为我的新宠，因为所有工具都在同一页面上，而且没有广告！</p>
<h2 id="playwright-xiang-guan-gong-zuo">Playwright 相关工作</h2>
<p>最后我要介绍的是一个专门列出 Playwright 相关工作的平台 - https://ray.run/jobs。虽然目前列表还不长，但随着 Playwright 日益普及和被广泛采用，我相信这里将成为寻找下一份 Playwright 工作的首选之地。</p>
<p>除此之外，还有大量资源以及精彩的博客文章和教程。感谢 Luc 为 Playwright 社区所做的一切贡献！</p>
<hr />
<p>感谢阅读！如果你觉得这篇文章有帮助，欢迎在 LinkedIn 上与我联系，或者考虑请我喝杯咖啡。如果你想收到更多内容，可以在下方订阅。别忘了点个赞来表达你的喜爱哦！</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源：https://playwrightsolutions.com/playwright-community-highlight/
发布时间：2023 年 7 月 3 日 12:30:45</p>
如何在playwright中创建自定义断言
2023-06-26T00:00:00+00:00
2023-06-26T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/creating-custom-expects-in-playwright-how-to-write-your-own-assertions/
<p>我喜欢阅读，特别是在气温在 80 华氏度中段的时候。坐在泳池边，手捧一本好书，是多么惬意的享受。当一本书写得很好时，阅读起来就很轻松，我可以花几个小时翻页，让我的想象力创造场景和人物……其实代码也是一样的。当代码写得很好时，我通过阅读它就能轻松理解测试/断言在做什么，就像读书一样。我尽量写出可读性强的代码：从有意义的变量名到在逻辑上合适的地方添加空行（“意大利面条类型的代码”我实在看不下去）。</p>
<p>Playwright 可以比较容易的编写出可读性强的代码。以下是一些示例：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">student</span><span>.</span><span style="color:#e9fdac;">grade</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">student</span><span>.</span><span style="color:#e9fdac;">loan</span><span>).</span><span style="color:#8cdaff;">toBeTruthy</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">student</span><span>.</span><span style="color:#e9fdac;">employer</span><span>).</span><span style="color:#8cdaff;">toBeNull</span><span>();
</span></code></pre>
<h2 id="mo-ren-duan-yan">默认断言</h2>
<p>这是一个通用值断言的<a href="https://playwright.dev/docs/api/class-genericassertions">链接</a>。</p>
<p>但是如果你期望一个字符串而你不太关心其值，只想检查其类型该怎么办呢？不幸的是，没有开箱即用的方法，所以我以前是这样写的：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 我以前如何检查字符串
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">framework </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">framework</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p>我不是说它不可读，但我更希望代码写成这样：</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// 我现在如何检查字符串
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">framework </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">framework</span><span>).</span><span style="color:#8cdaff;">toBeString</span><span>();
</span></code></pre>
<p>如果你阅读了上面代码块中的注释（另一种使代码可读的方法），你可能已经猜到可以编写自己的 expect。你来到这个页面是为了扩展你的知识，现在我们要扩展你的 expect！</p>
<p>要使 <code>toBeString()</code> 检查工作，你需要在 <code>playwright.config.ts</code> 中添加以下内容</p>
<p>playwright.config.ts👇</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">expect</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">toBeString</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">check </span><span style="color:#ff5e5e;">= typeof </span><span style="color:#e9fdac;">received </span><span style="color:#ff5e5e;">== </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">check</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeString() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}' 是一个字符串，但它是一个 ${</span><span style="color:#ff5e5e;">typeof </span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>});
</span></code></pre>
<p>解释：我们通过添加 <code>toBeString()</code> 断言扩展了我们的 expect。即使看起来断言接受一个参数，但实际上并没有。 <code>received</code> 是 <code>expect(value)</code> 的第一个括号中的值。然后我们检查接收到的值是否是字符串类型，如果是，则检查通过。如果不是，我们就让检查失败，并通过添加自定义消息使代码更具可读性。</p>
<p>让我们看看它是如何工作的。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">123</span><span>;
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">value</span><span>).</span><span style="color:#8cdaff;">toBeString</span><span>();
</span></code></pre>
<p>这个断言会失败 ☹️</p>
<p>由于在这个例子中 <code>value</code> 显然不是字符串，所以我预计它会失败。果然不出所料，注意自定义的错误信息，这个很好 👇。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/06/2023-06-24_09-35-32-1.jpg" alt="图片2" /></p>
<p>我还在我的工具包中添加了 <code>.toBeNumber()</code> 和 <code>.toBeBoolean()</code>。</p>
<p>几周前，我写了 <code>.toBeOneOfValues()</code>，这是一个改变游戏规则的方法。我在无法预测确切值的时候使用它，但我知道它应该是已知值之一。我主要用于为 GET 请求编写 API 检查。例如，当我有一个返回的收费参数，它可能是“pending”（待处理）、“failed”（失败）或“successful”（成功），我只想检查每一个返回的结果都有一个预期的值。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">validValues </span><span style="color:#ff5e5e;">= </span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">failed</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">pending</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">successful</span><span style="color:#ffffff;">"</span><span>];
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">testValue </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">created</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">testValue</span><span>).</span><span style="color:#8cdaff;">toBeOneOfValues</span><span>(</span><span style="color:#e9fdac;">validValues</span><span>);
</span></code></pre>
<p>在底层我们将检查数组是否包含传递的值</p>
<p>同样，它会打印出自定义的错误信息 👇。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/06/2023-06-24_10-56-02.jpg" alt="图片3" /></p>
<p>以下是需要添加到 <code>playwright.config.ts</code> 中的源代码</p>
<p>playwright.config.ts</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">expect</span><span>.</span><span style="color:#8cdaff;">extend</span><span>({
</span><span> </span><span style="color:#8cdaff;">toBeOneOfValues</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">received</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>, </span><span style="font-style:italic;color:#fc9354;">array</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>[]</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">check </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">array</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#e9fdac;">received</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">check</span><span>) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">通过</span><span style="color:#ffffff;">"</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">true</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span>{
</span><span> </span><span style="color:#8cdaff;">message</span><span>: </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">toBeOneOfValues() 断言失败。</span><span style="color:#fdb082;">\n</span><span style="color:#fbe3bf;">你期望 [${</span><span style="color:#e9fdac;">array</span><span style="color:#fbe3bf;">}] 包含 '${</span><span style="color:#e9fdac;">received</span><span style="color:#fbe3bf;">}'</span><span style="color:#fdb082;">\n</span><span style="color:#ffffff;">`</span><span>,
</span><span> pass: </span><span style="color:#ff8942;">false</span><span>,
</span><span> };
</span><span> }
</span><span> },
</span><span>});
</span></code></pre>
<p>这里最重要的收获是要意识到你可以创建你需要的自定义断言，以提高可读性。对我有帮助的是查看我要检查的值，并在脑海中说“我希望这个值……”然后用英语完成这个句子。这样你就得到了伪代码。(中文用户表示增加英文的可读性其实 😂，你懂的)</p>
<p>这篇文章是基于<a href="https://playwright.dev/docs/test-configuration#add-custom-matchers-using-expectextend">此文档</a>编写的。如果你使用 TypeScript，则需要额外的一步使自定义断言工作，这涉及添加一个 <code>global.d.ts</code> 文件。以下是我为上述两个 expect 编写的文件。</p>
<p>global.d.ts</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">export </span><span>{};
</span><span>
</span><span style="color:#ff5e5e;">declare </span><span>global {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">namespace </span><span>PlaywrightTest {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">interface </span><span>Matchers<R> {
</span><span> </span><span style="color:#8cdaff;">toBeOneOfValues</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">array</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">any</span><span>[]</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">: </span><span>R;
</span><span> </span><span style="color:#8cdaff;">toBeString</span><span style="color:#ffffff;">()</span><span style="color:#ff5e5e;">: </span><span>R;
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/creating-custom-expects-in-playwright-how-to-write-your-own-assertions/</p>
<p>发布时间: 2023-06-26T12:30:49.000Z</p>
如何在playwright的测试用例里参数化被测接口的域名?
2023-06-19T00:00:00+00:00
2023-06-19T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-you-define-an-apiurl-along-with-the-baseurl-in-playwright/
<p>最近有人问我如何在 Playwright 测试中处理 apiURL 和 baseURL。Playwright 的一大优势是可以直接进行 API 调用来创建数据,或者拦截网络请求以获取用于断言的数据。并非所有人都会遇到这个问题,但如果你的 API 和 UI 使用不同的 URL,希望这篇文章能对你有所帮助。</p>
<p>我发现有 4 种方法可以解决这个问题:</p>
<ol>
<li>在测试中用例里硬编码 API URL</li>
<li>使用 process.env 环境变量</li>
<li>使用类来创建公共值</li>
<li>使用 Fixtures(我会介绍两种不同的方法)</li>
</ol>
<p>在示例中,我将使用<a href="https://practicesoftwaretesting.com/">Practice Software Testing</a>,这是一个现代化的结账体验演示网站,由<a href="https://twitter.com/TheWebTester">Roy De Kleijn</a>创建。以下是一些了解该网站的资源:</p>
<ul>
<li><a href="https://api.practicesoftwaretesting.com/api/documentation">Practice Software Testing API Swagger 文档</a></li>
<li><a href="https://twitter.com/TheWebTester/status/1593906285300400128">Twitter 上介绍不同选项的帖子</a></li>
<li><a href="https://github.com/testsmith-io/practice-software-testing">Practice Software Testing GitHub 仓库</a></li>
</ul>
<h2 id="zai-ce-shi-zhong-ying-bian-ma-api-url">在测试中硬编码 API URL</h2>
<p>第一种方法是直接在代码中使用 API URL,这并不推荐。因为如果你想测试本地环境、临时环境或沙盒环境,就需要在多处更新代码,这并不理想。</p>
<h2 id="shi-yong-process-env-huan-jing-bian-liang">使用 process.env 环境变量</h2>
<p>第二种方法是在代码中使用环境变量。这也不是最佳方案,但可以让你的项目快速启动。当你有相当数量的测试后,可能需要进一步抽象。</p>
<h2 id="shi-yong-lei-lai-chuang-jian-gong-gong-zhi">使用类来创建公共值</h2>
<p>第三种方法是使用静态类。在类中,你可以定义一个公共静态变量,在导入类时可以在任何 Playwright 文件中使用。这种方法非常灵活且可扩展,因为你还可以添加多个静态数据信息或环境变量,同时还能享受智能提示的便利!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/staticVariables.ts
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">class </span><span>StaticVariables {
</span><span> </span><span style="color:#ff5e5e;">public static </span><span style="color:#e9fdac;">staticApiURL </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">API_URL</span><span>;
</span><span>}
</span></code></pre>
<p>以下 3 个例子可以在名为<code>login.ts</code>的数据工厂文件中看到。这个数据工厂函数<code>getLoginToken()</code>的作用是在 UI 测试中使用任意邮箱/密码组合进行 API 调用,获取认证 token,然后将其保存到会话存储中,以便在 Angular UI 应用程序中进行身份验证。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/datafactory/login.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">StaticVariables </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../helpers/staticVariables</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">apiURL</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 硬编码URL
</span><span style="color:#e9fdac;">apiURL </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://api.practicesoftwaretesting.com</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 直接使用环境变量
</span><span style="color:#e9fdac;">apiURL </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">API_URL</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">// 使用专用类访问变量
</span><span style="color:#e9fdac;">apiURL </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">StaticVariables</span><span>.</span><span style="color:#e9fdac;">staticApiURL</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getLoginToken</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">email</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">createRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">createRequestContext</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">apiURL </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/users/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">access_token</span><span>;
</span><span>}
</span></code></pre>
<p>在这 3 种方法中,我最喜欢的是第 3 种。这种方法可以在任何 TypeScript 文件中使用,这让我觉得它是一个很好的前进方向。</p>
<h2 id="shi-yong-fixtures-chuang-jian-apiurl">使用 Fixtures 创建 apiURL</h2>
<p>我将提供两种方法。</p>
<h3 id="fang-fa-1-shi-yong-page-ts-fixture">方法 1:使用 page.ts fixture</h3>
<p>这是我最初解决问题的方法。这种方法创建了一个 fixture 来扩展<code>test</code>,在 Test Options 中添加了<code>apiURL</code>类型的字符串。默认情况下,如果没有提供 apiURL,将分配一个空字符串。我把下面的例子添加到了<code>lib/pages.ts</code>文件中,这个文件是我用于基础页面对象的,这样我就不用在每个 UI 测试中导入所有文件。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/pages.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pages/loginPage</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">export </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pages/homePage</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">export </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./pages/checkoutPage</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">type </span><span>TestOptions </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#e9fdac;">apiURL</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// 这允许你在playwright.config.ts中设置apiURL
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">=
</span><span> </span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#e9fdac;">extend </span><span style="color:#ff5e5e;"><
</span><span> </span><span style="color:#e9fdac;">TestOptions </span><span style="color:#ff5e5e;">>
</span><span> {
</span><span> apiURL: [</span><span style="color:#ffffff;">""</span><span>, { option: </span><span style="color:#ff8942;">true </span><span>}],
</span><span> };
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">test</span><span>;
</span></code></pre>
<p>要使用这个方法,你必须在 Playwright 测试用例中从 lib/pages 导入 test,并在<code>playwright.config.ts</code>中设置<code>apiURL</code>(注意我们这里使用的是<code>apiURL</code>,下一节我们将使用<code>apiBaseURL</code>。我这样做主要是为了看两个 fixtures 如何并行工作)。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import type </span><span>{ </span><span style="color:#e9fdac;">APIRequestOptions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./lib/fixtures/apiRequest</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">TestOptions </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./lib/pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6699cc;">require</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">config</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span>(</span><span style="color:#e9fdac;">defineConfig </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">APIRequestOptions</span><span>) </span><span style="color:#ff5e5e;">&
</span><span> (</span><span style="color:#e9fdac;">TestOptions </span><span style="color:#ff5e5e;">>
</span><span> {
</span><span> testDir: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">./tests</span><span style="color:#ffffff;">"</span><span>,
</span><span> fullyParallel: </span><span style="color:#ff8942;">true</span><span>,
</span><span> forbidOnly: </span><span style="color:#ff5e5e;">!!</span><span>process.env.</span><span style="color:#e9fdac;">CI</span><span>,
</span><span> retries: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">2 </span><span style="color:#ff5e5e;">: </span><span style="color:#fdb082;">0</span><span>,
</span><span> workers: process.env.</span><span style="color:#e9fdac;">CI </span><span style="color:#ff5e5e;">? </span><span style="color:#fdb082;">1 </span><span style="color:#ff5e5e;">: </span><span style="color:#ff8942;">undefined</span><span>,
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>]],
</span><span> use: {
</span><span> baseURL: process.env.</span><span style="color:#e9fdac;">UI_URL</span><span>,
</span><span> apiURL: process.env.</span><span style="color:#e9fdac;">API_URL</span><span>,
</span><span> apiBaseURL: process.env.</span><span style="color:#e9fdac;">API_URL</span><span>,
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">retain-on-failure</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span></code></pre>
<p>在下面的测试文件中,注意我们从"../lib/pages"导入<code>test</code>,这让我们可以在 beforeEach 块中使用在<code>playwright.config.ts</code>中设置的 apiURL。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/checkoutWithPageFixture.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">CheckoutPage</span><span>, </span><span style="color:#e9fdac;">HomePage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../lib/pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用Page Fixture的基本UI检查</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">USERNAME </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">""</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">PASSWORD </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">""</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">request</span><span>, </span><span style="font-style:italic;color:#fc9354;">apiURL </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 使用fixture中的apiBaseURL通过API调用获取登录token
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">apiURL </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/users/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> email: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">token </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">access_token</span><span>;
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 使用登录token设置本地存储,使用户保持登录状态
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">addInitScript</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">value</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> window.</span><span style="color:#e9fdac;">localStorage</span><span>.</span><span style="color:#6699cc;">setItem</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth-token</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">value</span><span>);
</span><span> }, </span><span style="color:#e9fdac;">token</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">添加到购物车并结账</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">homePage </span><span style="color:#ff5e5e;">= new </span><span>HomePage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">checkoutPage </span><span style="color:#ff5e5e;">= new </span><span>CheckoutPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">product2</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">addToCart</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">navCart</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed1</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed2</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">address</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">123 test street</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">city</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testville</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">state</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">country</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">united states</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">postcode</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">12345</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed3</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">paymentMethod</span><span>.</span><span style="color:#8cdaff;">selectOption</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2: Cash on Delivery</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">accountName</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testy</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">accountNumber</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">1234124</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">finish</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">success</span><span>.</span><span style="color:#8cdaff;">first</span><span>()).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<h3 id="fang-fa-2-shi-yong-apirequests-ts-fixture">方法 2:使用 apiRequests.ts fixture</h3>
<p>这种方法的功劳完全归于<a href="https://github.com/yury-s">Yury Semikhatsky</a>,他在为添加<a href="https://github.com/microsoft/playwright/issues/23738">api 接口 baseURL</a>的功能请求提供反馈时提出了这个方法(如果感兴趣,可以去给这个请求点个 👍)。</p>
<p>这种方法与第一种 fixture 方法非常相似,但 Yury 更进一步,不仅创建了一个可以从<code>playwright.config.ts</code>文件导入的<code>apiBaseURL</code> TestOption(与上面的文件相同),还用<code>apiRequest</code>扩展了<code>test</code>,当调用时会默认使用<code>apiBaseURL</code>替换<code>baseURL</code>。这非常巧妙,但如果你与项目中的初级开发人员一起工作,可能不太直观。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/fixtures/apiReqeusts.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">base</span><span>, </span><span style="color:#e9fdac;">APIRequestContext</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">type </span><span>APIRequestOptions </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#e9fdac;">apiBaseURL</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>,
</span><span>};
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">type </span><span>APIRequestFixture </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> </span><span style="color:#e9fdac;">apiRequest</span><span style="color:#ff5e5e;">: </span><span>APIRequestContext,
</span><span>};
</span><span>
</span><span style="color:#6d6d6d;">// 这个fixture会在使用时用playwright.config.ts中的apiBaseURL覆盖baseURL
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">=
</span><span> (</span><span style="color:#e9fdac;">base</span><span>.</span><span style="color:#e9fdac;">extend </span><span style="color:#ff5e5e;">< </span><span style="color:#e9fdac;">APIRequestOptions</span><span>) </span><span style="color:#ff5e5e;">&
</span><span> (</span><span style="color:#e9fdac;">APIRequestFixture </span><span style="color:#ff5e5e;">>
</span><span> {
</span><span> apiBaseURL: [</span><span style="color:#ffffff;">""</span><span>, { option: </span><span style="color:#ff8942;">true </span><span>}],
</span><span>
</span><span> </span><span style="color:#8cdaff;">apiRequest</span><span>: </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">apiBaseURL </span><span>}, </span><span style="font-style:italic;color:#fc9354;">use</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">apiRequestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>({
</span><span> baseURL: </span><span style="color:#e9fdac;">apiBaseURL</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">use</span><span>(</span><span style="color:#e9fdac;">apiRequestContext</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">apiRequestContext</span><span>.</span><span style="color:#8cdaff;">dispose</span><span>();
</span><span> },
</span><span> });
</span></code></pre>
<p>在 spec 中的实现需要你从<code>../lib/fixtures/apiRequest</code>文件导入<code>test</code>,当使用<code>apiRequest</code>进行 API 调用时,你甚至不需要传入 baseURL,它会自动用<code>playwright.config.ts</code>中的 apiBaseURL 替换 baseURL。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/checkoutWithApiFixture.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../lib/fixtures/apiRequest</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">CheckoutPage</span><span>, </span><span style="color:#e9fdac;">HomePage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../lib/pages</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用API Fixture的基本UI检查</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">USERNAME </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">""</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">PASSWORD </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">""</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">apiRequest </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 使用fixture中的apiBaseURL通过API调用获取登录token,但全部都在fixture中,所以你甚至不需要在测试中添加apiURL
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">apiRequest</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/users/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> email: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">token </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">access_token</span><span>;
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 使用登录token设置本地存储,使用户保持登录状态
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">addInitScript</span><span>(</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">value</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> window.</span><span style="color:#e9fdac;">localStorage</span><span>.</span><span style="color:#6699cc;">setItem</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth-token</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#e9fdac;">value</span><span>);
</span><span> }, </span><span style="color:#e9fdac;">token</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">添加到购物车并结账</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">homePage </span><span style="color:#ff5e5e;">= new </span><span>HomePage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">checkoutPage </span><span style="color:#ff5e5e;">= new </span><span>CheckoutPage(</span><span style="color:#e9fdac;">page</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#8cdaff;">goto</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">product2</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">addToCart</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">homePage</span><span>.</span><span style="color:#e9fdac;">navCart</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed1</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed2</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">address</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">123 test street</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">city</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testville</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">state</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">country</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">united states</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">postcode</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">12345</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">proceed3</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">paymentMethod</span><span>.</span><span style="color:#8cdaff;">selectOption</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2: Cash on Delivery</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">accountName</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testy</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">accountNumber</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">1234124</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">finish</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">checkoutPage</span><span>.</span><span style="color:#e9fdac;">success</span><span>.</span><span style="color:#8cdaff;">first</span><span>()).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span> });
</span><span>});
</span></code></pre>
<p>Yury 的代码库/示例可以在这里找到:</p>
<p><a href="https://github.com/yury-s/bug-23738">GitHub - yury-s/bug-23738: bug-23738 bug-23738</a></p>
<p>本文中的所有代码示例都可以在这个仓库中找到:</p>
<p><a href="https://github.com/playwrightsolutions/playwright-practicesoftwaretesting.com/tree/main">GitHub - playwrightsolutions/playwright-practicesoftwaretesting.com</a></p>
<p>总结一下,有很多方法可以解决这个问题,我相信还有更多我没有涉及到的方法,但希望这些方法中的一种能让你的 Playwright 测试更加简洁和易于维护。如果你希望 Playwright 原生支持这个功能,请为这个功能请求投票!</p>
<p><a href="https://github.com/microsoft/playwright/issues/23738">[Feature]: 在 playwright.config.ts 中添加 apiEndpoint(类似于 baseUrl) · Issue #23738</a></p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,可以在<a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a>上联系我,或者考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想接收更多内容,可以在下方订阅,别忘了点个 ❤️ 表示支持。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/how-do-you-define-an-apiurl-along-with-the-baseurl-in-playwright/</p>
<p>发布时间: 2023-06-19T12:30:01.000Z</p>
如何在运行 Playwright 测试时获取底层网络请求的响应值？
2023-06-12T00:00:00+00:00
2023-06-12T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/get-a-response-value-of-an-underlying-network-request-when-running-a-playwright-test/
<p>在页面上进行自动化操作时，我经常需要获取刚刚创建的某个对象的 <code>id</code> 或唯一标识符，用于断言或后续操作。通常，这些标识符可以在 UI 层操作的网络响应中找到。今天，我将展示如何抓取网络响应并在断言中使用它。</p>
<p>在这个测试中，我们将使用 <a href="https://automationintesting.online/">https://automationintesting.online/</a>，这是一个预订网站。今天要抓取的具体值是登录后的消息通知数，该数值会根据系统中其他操作的不同而产生变化。步骤如下：访问上述网站，找到管理员登录链接，使用用户名: admin / 密码: password 并点击登录。你会在页面顶部看到通知框，如果查看 Chrome 开发工具的 Network tab 页，也会看到网络请求。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/06/image.png" alt="Image 1" /></p>
<p>👆 消息计数的 UI</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/06/image-1.png" alt="Image 2" /></p>
<p>👆 Chrome 开发工具中的网络请求</p>
<p>在我的 Playwright 测试中，我计划使用 <code>page.route</code> 方法拦截流量。如果请求 URL 包含 <code>**/message/count</code>，则将响应设置为 <code>response</code> 变量，然后从 <code>response</code> 变量获取 json 并保存为名为 message 的变量。</p>
<p>需要注意的是，我在测试级别创建了 <code>message</code> 变量，这样可以在整个测试范围内访问它（而不仅仅是在 page.route 范围内）。如果遇到变量未定义的问题，请确保在正确的级别创建变量。</p>
<p>此外，我使用了 <code>let</code> 声明 <code>message</code> 变量，这样可以根据需要分配/重新分配值。</p>
<p>下面是一个具体例子，我在其中拦截了 message/count API 请求，并将 message 这个变量的值设置为请求的具体响应值。然后使用该 message 变量对屏幕上的内容进行断言。无论 API 返回什么值，我们将在 DOM 中检查该值。这确实帮助我们解决了测试数据问题，并且不需要用到 api mock。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/admin Checks</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Validate Message Count is correct</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">message</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/message/count</span><span style="color:#ffffff;">"</span><span>,
</span><span>
</span><span> </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">fetch</span><span>();
</span><span> </span><span style="color:#e9fdac;">message </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> }
</span><span> );
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Let me hack!</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Admin panel</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-testid="username"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-testid="password"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[data-testid="submit"]</span><span style="color:#ffffff;">'</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Logout</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toHaveText</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Logout</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">messageCountSpan </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[href*="#/admin/messages"]</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">span</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Wait for the message count to be updated before making an assertion
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForResponse</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/message/count</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">messageCountSpan</span><span>).</span><span style="color:#8cdaff;">toHaveText</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">message</span><span style="color:#fbe3bf;">.</span><span style="color:#e9fdac;">count</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>这个代码可以在 Playwright-Demo 仓库中找到</p>
<p><a href="https://github.com/BMayhew/playwright-demo/blob/master/tests/ui/automationintesting.online/messageCountIntercept.spec.ts">playwright-demo/messageCountIntercept.spec.ts</a></p>
<p>如果你想要一个模拟响应的示例，可以在这里找到</p>
<p><a href="https://playwrightsolutions.com/how-do-i-intercept-network-traffic-and-save-specific-values-from-http-requests/">如何在 Playwright 中通过特定响应模拟 HTTP 网络流量</a></p>
<p>Tim Deschryver 撰写的精彩文章，包含更多示例，可以在这里找到</p>
<p><a href="https://timdeschryver.dev/blog/intercepting-http-requests-with-playwright">使用 Playwright 拦截 HTTP 请求</a></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/06/image-2.png" alt="Image 9" /></p>
<hr />
<p>感谢阅读！如果你觉得这篇文章有帮助，请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上与我联系，或者考虑 <a href="https://ko-fi.com/butchmayhew">请我喝杯咖啡</a>。如果你希望更多内容直接发送到你的收件箱，请在下方订阅，并确保留下 ❤️ 以示支持。</p>
<h2 id="lai-yuan">来源</h2>
<p>来源网址: https://playwrightsolutions.com/get-a-response-value-of-an-underlying-network-request-when-running-a-playwright-test/</p>
<p>发布时间: 2023-06-12T12:30:52.000Z</p>
一种更好的方法来通过测试名称控制 before and after 钩子函数
2023-06-05T00:00:00+00:00
2023-06-05T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/a-better-way-to-control-before-and-after-blocks-with-test-titles-in-playwright-test/
<blockquote>
<p>"没有持续的成长和进步，改进、成就和成功这样的词就毫无意义。" - 本杰明·富兰克林</p>
</blockquote>
<p>你是否曾经看着几个月前写的代码，开始想："哇，'过去的我'认为这很不错，但实际上只是还凑合"？我喜欢这样的时刻，因为它们证明我正在学习和成长，找到新的方法来解决问题或甚至做出小的改进。</p>
<p>去年，我需要有条件地运行 afterEach 块，解决方案是这个：<a href="https://playwrightsolutions.com/how-to-conditionally-use-aftereach">如何在 Playwright 测试中有条件地使用 afterEach</a> 现在，我为同样的问题找到了另一个解决方案（我个人认为这是一种更好的风格）。</p>
<p>上周，我在编写一组测试时意识到，我需要有条件地运行 beforeEach 块来创建一些测试数据。使用之前用于 afterEach 的相同逻辑似乎不太合适，而且会导致严重依赖测试的顺序。此外，在几个测试中复制相同的代码也不符合 DRY（不要重复自己）原则。</p>
<p>多亏了 <code>testInfo</code> 类，你可以在前后块中获取测试标题（注意：beforeAll 只能访问第一个测试，而 afterAll 只能访问最后一个测试）。我不打算告诉你 <code>testInfo</code> 有多有用，因为这里已经有一篇关于它的文章：<a href="https://playwrightsolutions.com/untitled-2">在 Playwright 测试运行时是否可以获取当前测试名称？</a></p>
<p>有了 <code>testInfo</code> 这个武器，我们可以通过测试标题（或其中的关键词）和块本身的简单 if 语句来控制 beforeEach 和 afterEach 块。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">通过测试标题控制前后块</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}, </span><span style="font-style:italic;color:#fc9354;">testInfo</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">testInfo</span><span>.title.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#runBeforeEach</span><span style="color:#ffffff;">"</span><span>))
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">beforeEach() 已执行</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}, </span><span style="font-style:italic;color:#fc9354;">testInfo</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">testInfo</span><span>.title.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#runAfterEach</span><span style="color:#ffffff;">"</span><span>))
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">afterEach() 已执行</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第一个测试</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第一个测试</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第二个测试 #runBeforeEach</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第二个测试</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第三个测试 #runAfterEach</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">第三个测试</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/code-2.jpg" alt="图片 1" />
输出</p>
<p>显然，<code>#runBeforeEach</code> 和 <code>#runAfterEach</code> 可以替换为你想要的任何内容。只要确保代码仍然可读并且有意义 😉</p>
<p>请记住，你可以使用 <code>if</code> 语句不仅用于整个前/后块，还可以用于其中的一部分。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{}, </span><span style="font-style:italic;color:#fc9354;">testInfo</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#6d6d6d;">/*
</span><span style="color:#6d6d6d;"> 需要在每个测试之前运行的一些代码
</span><span style="color:#6d6d6d;"> */
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">testInfo</span><span>.title.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#runBeforeEach</span><span style="color:#ffffff;">"</span><span>))
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">beforeEach() 已执行</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p><a href="https://playwrightsolutions.com/a-better-way-to-control-before-and-after-blocks-with-test-titles-in-playwright-test/">URL 来源</a></p>
<p>发布时间: 2023-06-05</p>
如何使用playwright检查输入框中的内容
2023-05-22T00:00:00+00:00
2023-05-22T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-i-check-the-value-inside-an-input-field-with-playwright/
<p>在使用 Playwright 进行页面测试时，有时我需要验证输入框中是否已经预先填充了文本，以确保我的系统正常运行。</p>
<p>在这种情况下，断言并不那么简单。典型的方法是找到页面上的元素，并查看.text 或.innerText 属性，<em>但问题是输入框通常不属于 DOM 的一部分</em>。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/image-5.png" alt="图片1" /></p>
<p>输入框文本不在 DOM 中</p>
<p>但幸运的是，Playwright 有办法处理这个问题！</p>
<p>在这个例子中，我将使用测试网站<a href="https://ecommerce-playground.lambdatest.io/">https://ecommerce-playground.lambdatest.io/</a>。这个网站是一个虚拟商店，我们可以针对它编写自动化测试。我的测试场景如下：</p>
<ul>
<li>使用搜索框搜索产品并点击搜索</li>
<li>验证我搜索的产品名称是否仍在搜索框中</li>
<li>点击进入产品详情页，验证产品名称是否仍在搜索框中</li>
<li>点击“加入购物车”，验证产品名称是否仍在搜索框中</li>
<li>点击结账，验证产品名称是否不再在搜索框中</li>
</ul>
<p>最后一点是否应该如此功能目前我不质疑，但可以作为一个问题提出，这是系统当前的操作方式，因此有必要为其添加自动化检查。如果它发生变化，我们的自动化测试会通知我们。</p>
<h2 id="shi-yong-tohavevalue-duan-yan-fang-fa">使用.toHaveValue()断言方法</h2>
<p>使用这个方法非常方便。这个方法可以在任何定位器上使用，被称为 LocatorAssertion。这些是一级公民，需要使用<code>await</code>与 expect 一起使用。下面的例子展示了如何使用这个功能。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证产品搜索输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://ecommerce-playground.lambdatest.io/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productName </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Palm Treo Pro</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productSearch </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search For Products</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">searchButton </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">productSearch</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">搜索后验证输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">searchButton</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productSearch</span><span>).</span><span style="color:#8cdaff;">toHaveValue</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>官方 Playwright 文档链接如下：</p>
<p><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-value">toHaveValue()</a></p>
<h2 id="shi-yong-jian-tie-ban-jin-xing-duan-yan">使用剪贴板进行断言</h2>
<p>第二种方法是不使用 toHaveValue()，这在某些棘手的情况下会很有用。可以点击输入框，选择输入内容并将其复制到剪贴板。然后使用 JavaScript 获取剪贴板的内容，并进行断言。示例代码如下。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证产品搜索输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://ecommerce-playground.lambdatest.io/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productName </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Palm Treo Pro</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productSearch </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search For Products</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">searchButton </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">productSearch</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">搜索后验证输入框（替代方法）</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">productSearch</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">userAgentInfo </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>navigator.userAgent);
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">userAgentInfo</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mac OS</span><span style="color:#ffffff;">"</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Meta+A</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Meta+C</span><span style="color:#ffffff;">"</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Control+A</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Control+C</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">clipboardText </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">navigator.clipboard.readText()</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">clipboardText</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>在这个例子中，我们首先评估浏览器的 userAgent，以确定需要按下的键盘修饰符，如果是 Mac OS 我们使用 Meta/Command 键，如果是 Windows 或 Linux 我们使用 Control 修饰键。我们首先点击 productSearch 定位器，使光标位于输入框中，然后按下选择和复制的快捷键。代码的下一步是获取 clipboardText。</p>
<p>⚠️ 你需要确保在你的 playwright.config.ts 中设置了以下内容：</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span>use: {
</span><span> permissions: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">clipboard-read</span><span style="color:#ffffff;">"</span><span>];
</span><span>}
</span></code></pre>
<p>然后代码将 clipboardText 设置为剪贴板的文本，并进行断言以确保剪贴板中的文本与原始的 productName 变量匹配。</p>
<p>理想情况下你不需要这样做，但这是可行的 :) 完整的规范如下所示，注意我使用 test.steps 添加了不同的场景，这使得调试更加方便。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证产品搜索输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://ecommerce-playground.lambdatest.io/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productName </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Palm Treo Pro</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">productSearch </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">textbox</span><span style="color:#ffffff;">"</span><span>, {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search For Products</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">searchButton </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Search</span><span style="color:#ffffff;">" </span><span>});
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">productSearch</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">搜索后验证输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">searchButton</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productSearch</span><span>).</span><span style="color:#8cdaff;">toHaveValue</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">搜索后验证输入框（替代方法）</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">productSearch</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">userAgentInfo </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>navigator.userAgent);
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">userAgentInfo</span><span>.</span><span style="color:#8cdaff;">includes</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Mac OS</span><span style="color:#ffffff;">"</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Meta+A</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Meta+C</span><span style="color:#ffffff;">"</span><span>);
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Control+A</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Control+C</span><span style="color:#ffffff;">"</span><span>);
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">clipboardText </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">navigator.clipboard.readText()</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">clipboardText</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">导航到产品页面后验证输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#e9fdac;">productName </span><span>}).</span><span style="color:#8cdaff;">nth</span><span>(</span><span style="color:#fdb082;">1</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productSearch</span><span>).</span><span style="color:#8cdaff;">toHaveValue</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">加入购物车后验证输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Add to Cart</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productSearch</span><span>).</span><span style="color:#8cdaff;">toHaveValue</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">访问结账页面后验证输入框</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Checkout </span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">productSearch</span><span>).</span><span style="color:#e9fdac;">not</span><span>.</span><span style="color:#8cdaff;">toHaveValue</span><span>(</span><span style="color:#e9fdac;">productName</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>完整的代码添加可以在<a href="https://github.com/BMayhew/playwright-demo/pull/21">这里</a>找到。</p>
<h2 id="yin-yong">引用</h2>
<p><a href="https://playwrightsolutions.com/how-do-i-check-the-value-inside-an-input-field-with-playwright/">来源网址</a></p>
<p>发布时间：2023-05-22</p>
The Definitive Guide to API Test Automation With Playwright: Part 5 - Calculating API Endpoint Coverage
2023-05-15T00:00:00+00:00
2023-05-15T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-5-calculating-endpoint-coverage/
<p>Now that I have some decent coverage around the <code>auth</code> and <code>bookings</code> endpoints, I have a new challenge. How do I keep up with what areas need coverage added, and how do I know if a a new auth endpoint gets added, without manually checking the docs every day. Today's article will show you the solution that I use. Before we get going too far, big shoutout to Joel Black and <a href="https://www.linkedin.com/search/results/all/?fetchDeterministicClustersOnly=true&heroEntityKey=urn:li:fsd_profile:ACoAAC5M5OEBfzodxiEa2m7bKaKlmN3P0YXZ3qQ&keywords=sergei%20gapanovich&origin=RICH_QUERY_TYPEAHEAD_HISTORY&position=0&searchId=5249d9ac-3d77-476d-b6e4-7550c20f59fc&sid=20Q">Sergei Gapanovich</a> for the inspiration and refinement of this approach.</p>
<p>If you missed the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">Introduction</a>, <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-1-basics-of-api-testing-get/">Part 1</a>, <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-2-adding-more-in-depth-checks/">Part 2</a>, <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-3-debugging-api-tests-with-vs-code/">Part 3</a>, or <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-4-handling-headers-and-authentication/">Part 4</a> I encourage you to check those out to get the context of where we are jumping in.</p>
<h2 id="high-level-approach-and-plan">High Level Approach and Plan</h2>
<p>I want to be able to leverage the OpenAPI spec files that are provided and compare them against the API tests we have already created to figure out where our gaps are. This will require:</p>
<ul>
<li>Tagging our tests with the endpoint(s) that are being covered</li>
<li>Downloading the OpenAPI spec file for the endpoints we want to check</li>
<li>Parsing the OpenAPI spec file and matching them with our tagged tests</li>
<li>Calculating coverage and console.log() the results</li>
<li>This should all happen prior to any tests running</li>
</ul>
<p>With this approach I should have a good idea of what areas need coverage, and if there are any new endpoints added to the OpenAPI spec file we are monitoring anytime the tests run.</p>
<p>⚠️</p>
<p>When I mention having test coverage in this article I am simply referring to having at least 1 high level happy path type test against an endpoint we are measuring coverage for. This is a calculation doesn't mean much in terms of the depth of our coverage but the breadth of our coverage, across all measured endpoints.</p>
<p>The idea behind a coverage tag is to create a unique identifier that represents the API endpoint. An example of a coverage tag I use is <code>//COVERAGE_TAG: POST /auth/login</code> This includes <code>//Coverage_TAG:</code> which allows me to use <a href="https://www.gnu.org/software/grep/manual/grep.html#:~:text=grep%20searches%20the%20named%20input,grep%20searches%20the%20working%20directory%20.">grep</a> to search for the specific line, the <code>POST</code> is the verb/action and the <code>/auth/login</code> is the endpoint I am testing. Depending on your specific system under test you may need to adjust the endpoint url based on what you have accessible in your OpenAPI spec file.</p>
<p>The example provided below can be found in the <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/blob/main/tests/booking/booking.get.spec.ts">booking.get.spec.ts</a> file. One thing to note, is in the spec file I cover 3 different endpoints. With the approach on calculating coverage, I filter out any duplicate coverage tags, so if there were other examples with the same endpoints covered they wouldn't get counted twice.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/{id}
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/summary
</span><span>
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">createHeaders</span><span>,
</span><span> </span><span style="color:#e9fdac;">createInvalidHeaders</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">invalidHeader</span><span>;
</span><span style="color:#ff5e5e;">...
</span></code></pre>
<p>I typically will put the coverage tags at the top of the file, though technically you could put it anywhere within the file.</p>
<h2 id="downloading-and-parsing-an-openapi-spec-file">Downloading and Parsing an OpenAPI Spec File</h2>
<p>The next step we need to do is to download the OpenAPI spec file. This file will be the source of truth for what endpoints exist. I won't go super deep into the <a href="https://spec.openapis.org/oas/latest.html">OpenAPI Specification</a> but a quick overview from the website:</p>
<blockquote>
<p>The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs, which allows both humans and computers to discover and understand the capabilities of a service without requiring access to source code, additional documentation, or inspection of network traffic. When properly defined via OpenAPI, a consumer can understand and interact with the remote service with a minimal amount of implementation logic. Similar to what interface descriptions have done for lower-level programming, the OpenAPI Specification removes guesswork in calling a service.</p>
</blockquote>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/image-4.png" alt="Image 1" /></p>
<p>For our purposes we will utilize this file to identify the verbs and endpoints that are published in the OpenAPI spec file. It's possible your system under test doesn't have OpenAPI spec file, but there may still be hope. if there is a swagger doc, there is more than likely some sort of json that can be downloaded that can be parsed to get similar information you'll just have to work out the logic for yourself.</p>
<h3 id="swagger-ui-pages">Swagger UI Pages</h3>
<ul>
<li>Auth Swagger UI - <a href="https://automationintesting.online/auth/swagger-ui/index.html#/">https://automationintesting.online/auth/swagger-ui/index.html#/</a></li>
<li>Room Swagger UI - <a href="https://automationintesting.online/room/swagger-ui/index.html#/">https://automationintesting.online/room/swagger-ui/index.html#/</a></li>
<li>Branding Swagger UI - <a href="https://automationintesting.online/branding/swagger-ui/index.html#/">https://automationintesting.online/branding/swagger-ui/index.html#/</a></li>
<li>Report Swagger UI - <a href="https://automationintesting.online/report/swagger-ui/index.html#/">https://automationintesting.online/report/swagger-ui/index.html#/</a></li>
<li>Message Swagger UI - <a href="https://automationintesting.online/message/swagger-ui/index.html#/">https://automationintesting.online/message/swagger-ui/index.html#/</a></li>
</ul>
<p>For the system we are testing, I've linked all the Swagger API endpoint pages, you'll notice when visiting the swagger ui page, there is link to the <a href="https://automationintesting.online/auth/v3/api-docs/auth-api">OpenAPI Spec</a>. This is the spec file</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/image-2.png" alt="Image 2" /></p>
<p>Now we have the urls to the OpenAPI Spec files we can start building out out logic. I'll start by creating a file in the <code>lib/helpers</code> directory named <code>coverage.ts</code>. I'll use this to build out the logic needed.</p>
<h3 id="getting-the-openapi-spec">Getting the OpenAPI Spec</h3>
<p>The first step I tackled was downloading the OpenAPI spec file. I wanted to do this for multiple files knowing there are multiple endpoints that I want to parse and measure. So I created a function that can be called multiple times. The async function <code>fetchOpenAPI</code> takes a parameter of the <code>resource</code> as a string to indicate which OpenAPI spec we want to download, and uses the built in <code>request</code> method from the playwright library. Once the api call is made I take the response which is json and write the OpenAPI Spec file to the root directory using the <code>writeFile</code> function (this is more for reference and testing as we don't use this file for the moment). The <code>fetchOpenAPI</code> then returns the JSON body which we can use to parse and get the information we need in the next section.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv/config</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">baseURL </span><span style="color:#ff5e5e;">= </span><span>process.env.URL;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">resource
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> JSON object of the OpenAPI spec
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example </span><span style="color:#6d6d6d;">await fetchOpenApi("messages"); returns JSON object of the OpenAPI spec
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * There is also a ${resource}_spec3.json file created in the root of the project
</span><span style="color:#6d6d6d;"> * These files are used to get the endpoints and calculate coverage
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">fetchOpenApi</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">resource</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">requestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">requestContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">baseURL</span><span style="color:#fbe3bf;">}${</span><span style="color:#e9fdac;">resource</span><span style="color:#fbe3bf;">}/v3/api-docs/${</span><span style="color:#e9fdac;">resource</span><span style="color:#fbe3bf;">}-api</span><span style="color:#ffffff;">`</span><span>,
</span><span> { timeout: </span><span style="color:#fdb082;">5000 </span><span>}
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">writeFile</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./${</span><span style="color:#e9fdac;">resource</span><span style="color:#fbe3bf;">}_spec3.json</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ff8942;">null</span><span>, </span><span style="color:#fdb082;">2</span><span>));
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">// eslint-disable-next-line
</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">writeFile</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">location</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">data</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">writeFileSync</span><span>(</span><span style="color:#e9fdac;">location</span><span>, </span><span style="color:#e9fdac;">data</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// console.log("File written successfully");
</span><span> </span><span style="color:#6d6d6d;">// console.log("The written file has" + " the following contents:");
</span><span> </span><span style="color:#6d6d6d;">// console.log("" + fs.readFileSync(location));
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">err</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#e9fdac;">err</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<h3 id="getting-the-individual-endpoints">Getting the Individual Endpoints</h3>
<p>From the previous step we have the body of the JSON of the OpenAPI spec. An example of that file can be found at the <a href="https://automationintesting.online/auth/v3/api-docs/auth-api">Auth API spec</a>. The next thing we need to do is parse this file and get the endpoints out of the file. We will write a function named <code>getEndpoints</code> that takes a json object as a parameter. We first go and grab the methods (verbs GET, PUT, POST, DELETE, etc) and then get the urlPath for each endpoint in the OpenAPI spec file. We then create an array with the verb space path. The output of the auth endpoints are</p>
<p><code>[ 'POST /auth/validate', 'POST /auth/logout', 'POST /auth/login' ]</code></p>
<p>Below is the code that generates the array.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">json</span><span style="color:#6d6d6d;"> JSON object of the OpenAPI spec
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> Array of endpoints with format "VERB PATH"
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example </span><span style="color:#6d6d6d;">getEndpoints(authJson); returns ["POST /auth/login", "POST /auth/logout", ...]
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * This function is used to get the endpoints from the OpenAPI spec
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getEndpoints</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">json</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">spec3 </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">json</span><span>;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">methods </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">spec3</span><span>.</span><span style="color:#e9fdac;">paths</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">urlPath </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">spec3</span><span>.</span><span style="color:#e9fdac;">servers</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">url</span><span>.</span><span style="color:#6699cc;">slice</span><span>(</span><span style="color:#fdb082;">0</span><span>, </span><span style="color:#ff5e5e;">-</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">finalArray</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[] </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">property </span><span style="color:#ff5e5e;">in </span><span style="color:#e9fdac;">methods</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">verbs </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Object</span><span>.</span><span style="color:#6699cc;">keys</span><span>(</span><span style="color:#e9fdac;">methods</span><span>[</span><span style="color:#e9fdac;">property</span><span>]);
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">verb </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">verbs</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">finalVerb </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">verb</span><span>.</span><span style="color:#6699cc;">toUpperCase</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">finalPath </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">urlPath </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">property</span><span>;
</span><span> </span><span style="color:#e9fdac;">finalArray</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">finalVerb </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">" " </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">finalPath</span><span>);
</span><span> }
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">finalArray</span><span>;
</span><span>}
</span></code></pre>
<p>💡</p>
<p>It is worth calling out at this point, that if you are attempting to implement this with a different system under test, this code will need to be adjusted. see the example below.</p>
<p>For example if you were writing tests against <a href="https://api.practicesoftwaretesting.com/docs/api-docs.json">https://api.practicesoftwaretesting.com/docs/api-docs.json</a>, which returns has the entire API in 1 OpenApi spec file, some of the code changes. For starters a full url for the <code>server</code> object, you can edit the file as follows, this will remove the urlPath code. You would also only have to make 1 call to calculate coverage <code>await getEndpointCoverage('api')</code> rather than making a call for each OpenApi spec.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/08/image-30.png" alt="Image 3" /></p>
<h3 id="get-endpoint-coverage-from-tests-and-calculate-coverage">Get Endpoint Coverage From Tests and Calculate Coverage</h3>
<p>Now that we have what endpoints exist within the OpenAPI Spec file, we need to do a comparison with our own codebase to see what endpoints have coverage. To do this we are going to utilize the coverage tags which were covered earlier in this article example: <code>//COVERAGE_TAG: GET /booking/</code>. The function we will use is <code>getCoverage</code> that requires an array, we will use the previous array that we just built). The function iterates through the coverage array, and for each value, runs a grep command searching the files in the <code>/tests/</code> directory to attempt to match to an existing coverage tag. It does this using the execSync function and will require your base system to have grep installed and accessible from the command line.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">output </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">execSync</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">grep -rl tests -e 'COVERAGE_TAG: ${</span><span style="color:#e9fdac;">coverageArray</span><span style="color:#fbe3bf;">[</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">]}$' | cat</span><span style="color:#ffffff;">`</span><span>,
</span><span> {
</span><span> encoding: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf-8</span><span style="color:#ffffff;">"</span><span>,
</span><span> }
</span><span>);
</span></code></pre>
<blockquote>
<p>The command "grep -rl" searches for a specific text pattern recursively in all files and directories under a specified directory and returns the names of the files that contain the pattern. The "-r" option tells grep to search recursively, and the "-l" option tells it to only print the names of the files that contain the pattern, rather than the actual lines that match.</p>
</blockquote>
<p>If there is a match we add a value to coveredEndpoints (which starts from 0) and if there isn't a match, we add that value to a nonCoveredEndpoints array, and console.log out a message that this endpoint is missing coverage.</p>
<p>After iterating through all the values, we calculate the coverage with the amount of coveredEndpoints and totalEndpoints and print this out via console messages. The code for this is in the <code>calculateCoverage</code> function below.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">execSync </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">child_process</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">//Greps local files getting a list of files with specified coverage tag and calculates coverage
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getCoverage</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">coverageArray</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">totalEndPoints </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">coverageArray</span><span>.length;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">coveredEndPoints </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">nonCoveredEndpoints</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[] </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span>
</span><span> </span><span style="color:#6d6d6d;">//Iterates through the coverageArray to grep each file in the test directory looking for matches
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">in </span><span style="color:#e9fdac;">coverageArray</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">output </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">execSync</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">grep -rl tests -e 'COVERAGE_TAG: ${</span><span style="color:#e9fdac;">coverageArray</span><span style="color:#fbe3bf;">[</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">]}$' | cat</span><span style="color:#ffffff;">`</span><span>,
</span><span> {
</span><span> encoding: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf-8</span><span style="color:#ffffff;">"</span><span>,
</span><span> }
</span><span> );
</span><span> </span><span style="color:#6d6d6d;">// console.log(value);
</span><span> </span><span style="color:#6d6d6d;">// console.log(coverageArray[value]);
</span><span> </span><span style="color:#6d6d6d;">// console.log(output);
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">output </span><span style="color:#ff5e5e;">!= </span><span style="color:#ffffff;">""</span><span>) {
</span><span> </span><span style="color:#e9fdac;">coveredEndPoints </span><span style="color:#ff5e5e;">+= </span><span style="color:#fdb082;">1</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Endpoint with no coverage: ${</span><span style="color:#e9fdac;">coverageArray</span><span style="color:#fbe3bf;">[</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">]}</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#e9fdac;">nonCoveredEndpoints</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">coverageArray</span><span>[</span><span style="color:#e9fdac;">value</span><span>]);
</span><span> }
</span><span> }
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Total Endpoints: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">totalEndPoints</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Covered Endpoints: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">coveredEndPoints</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// writeFile(
</span><span> </span><span style="color:#6d6d6d;">// "./lib/non_covered_endpoints.txt",
</span><span> </span><span style="color:#6d6d6d;">// JSON.stringify(nonCoveredEndpoints, null, "\t")
</span><span> </span><span style="color:#6d6d6d;">// );
</span><span> </span><span style="color:#8cdaff;">calculateCoverage</span><span>(</span><span style="color:#e9fdac;">coveredEndPoints</span><span>, </span><span style="color:#e9fdac;">totalEndPoints</span><span>);
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">calculateCoverage</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">coveredEndpoints</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span>, </span><span style="font-style:italic;color:#fc9354;">totalEndpoints</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">percentCovered </span><span style="color:#ff5e5e;">= </span><span>((</span><span style="color:#e9fdac;">coveredEndpoints </span><span style="color:#ff5e5e;">/ </span><span style="color:#e9fdac;">totalEndpoints</span><span>) </span><span style="color:#ff5e5e;">* </span><span style="color:#fdb082;">100</span><span>).</span><span style="color:#8cdaff;">toFixed</span><span>(</span><span style="color:#fdb082;">2</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Coverage: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">percentCovered </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">%</span><span style="color:#ffffff;">"</span><span>);
</span><span> process.env.</span><span style="color:#e9fdac;">COVERED_ENDPOINTS </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">coveredEndpoints</span><span>.</span><span style="color:#6699cc;">toString</span><span>();
</span><span> process.env.</span><span style="color:#e9fdac;">TOTAL_ENDPOINTS </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">totalEndpoints</span><span>.</span><span style="color:#6699cc;">toString</span><span>();
</span><span> process.env.</span><span style="color:#e9fdac;">PERCENT_COVERED </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">percentCovered</span><span>.</span><span style="color:#6699cc;">toString</span><span>();
</span><span>}
</span></code></pre>
<h3 id="creating-a-function-that-calls-all-the-other-functions">Creating a Function That Calls All the Other Functions</h3>
<p>I'll admit my naming hasn't been the best, and could be better, along with some of the functions that I've included so far. I'm sure they could be refactored to be much nicer. This next section I've created a function called <code>getEndpointCoverage</code> and it is the only function I am exporting in the coverage file (our entry point). This function only needs the endpoint name, as I am setting the baseURL from the dotenv config file. This function calls <code>fetchOpenApi</code>, <code>getEndpoints</code>, and <code>getCoverage</code> functions.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv/config</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">baseURL </span><span style="color:#ff5e5e;">= </span><span>process.env.URL;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">endpoint</span><span style="color:#6d6d6d;"> url path for pulling the OpenAPI spec
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example </span><span style="color:#6d6d6d;">getEndpointCoverage("auth"); console logs coverage for auth endpoints
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getEndpointCoverage</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">endpoint</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">=== Coverage for ${</span><span style="color:#e9fdac;">endpoint</span><span style="color:#fbe3bf;">} Endpoints ===</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">fetchOpenApi</span><span>(</span><span style="color:#e9fdac;">endpoint</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">coverageArray </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">getEndpoints</span><span>(</span><span style="color:#e9fdac;">response</span><span>);
</span><span> </span><span style="color:#8cdaff;">getCoverage</span><span>(</span><span style="color:#e9fdac;">coverageArray</span><span>);
</span><span>}
</span></code></pre>
<p>After this function is run you will get nice output in your terminal with details for the endpoints you have coverage for.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/image-3.png" alt="Image 4" /></p>
<p>terminal output showing calculated coverage</p>
<p>The complete <code>coverage.ts</code> file can be found in it's entirety below. We still need to create a way to call this function before all our tests run, which I'll cover after the code block.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// lib/helpers/coverage.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ff8942;">* </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">execSync </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">child_process</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv/config</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">baseURL </span><span style="color:#ff5e5e;">= </span><span>process.env.URL;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">endpoint</span><span style="color:#6d6d6d;"> url path for pulling the OpenAPI spec
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example </span><span style="color:#6d6d6d;">getEndpointCoverage("auth"); console logs coverage for auth endpoints
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getEndpointCoverage</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">endpoint</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">=== Coverage for ${</span><span style="color:#e9fdac;">endpoint</span><span style="color:#fbe3bf;">} Endpoints ===</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">fetchOpenApi</span><span>(</span><span style="color:#e9fdac;">endpoint</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">coverageArray </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">getEndpoints</span><span>(</span><span style="color:#e9fdac;">response</span><span>);
</span><span> </span><span style="color:#8cdaff;">getCoverage</span><span>(</span><span style="color:#e9fdac;">coverageArray</span><span>);
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">resource
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> JSON object of the OpenAPI spec
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example </span><span style="color:#6d6d6d;">await fetchOpenApi("messages"); returns JSON object of the OpenAPI spec
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * There is also a ${resource}_spec3.json file created in the root of the project
</span><span style="color:#6d6d6d;"> * These files are used to get the endpoints and calculate coverage
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">fetchOpenApi</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">resource</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">requestContext </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">requestContext</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">baseURL</span><span style="color:#fbe3bf;">}${</span><span style="color:#e9fdac;">resource</span><span style="color:#fbe3bf;">}/v3/api-docs/${</span><span style="color:#e9fdac;">resource</span><span style="color:#fbe3bf;">}-api</span><span style="color:#ffffff;">`</span><span>,
</span><span> { timeout: </span><span style="color:#fdb082;">5000 </span><span>}
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">writeFile</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">./${</span><span style="color:#e9fdac;">resource</span><span style="color:#fbe3bf;">}_spec3.json</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">body</span><span>, </span><span style="color:#ff8942;">null</span><span>, </span><span style="color:#fdb082;">2</span><span>));
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">body</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">json</span><span style="color:#6d6d6d;"> JSON object of the OpenAPI spec
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> Array of endpoints with format "VERB PATH"
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example </span><span style="color:#6d6d6d;">getEndpoints(authJson); returns ["POST /auth/login", "POST /auth/logout", ...]
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * This function is used to get the endpoints from the OpenAPI spec
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getEndpoints</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">json</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">spec3 </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">json</span><span>;
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">methods </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">spec3</span><span>.</span><span style="color:#e9fdac;">paths</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">urlPath </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">spec3</span><span>.</span><span style="color:#e9fdac;">servers</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">url</span><span>.</span><span style="color:#6699cc;">slice</span><span>(</span><span style="color:#fdb082;">0</span><span>, </span><span style="color:#ff5e5e;">-</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">finalArray</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[] </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">property </span><span style="color:#ff5e5e;">in </span><span style="color:#e9fdac;">methods</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">verbs </span><span style="color:#ff5e5e;">= </span><span style="color:#fbe3bf;">Object</span><span>.</span><span style="color:#6699cc;">keys</span><span>(</span><span style="color:#e9fdac;">methods</span><span>[</span><span style="color:#e9fdac;">property</span><span>]);
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">verb </span><span style="color:#ff5e5e;">of </span><span style="color:#e9fdac;">verbs</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">finalVerb </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">verb</span><span>.</span><span style="color:#6699cc;">toUpperCase</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">finalPath </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">urlPath </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">property</span><span>;
</span><span> </span><span style="color:#e9fdac;">finalArray</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">finalVerb </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">" " </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">finalPath</span><span>);
</span><span> }
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">finalArray</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">//Greps local files getting a list of files with specified coverage tag and calculates coverage
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">getCoverage</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">coverageArray</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">totalEndPoints </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">coverageArray</span><span>.length;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">coveredEndPoints </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">0</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">nonCoveredEndpoints</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>[] </span><span style="color:#ff5e5e;">= </span><span>[];
</span><span>
</span><span> </span><span style="color:#6d6d6d;">//Iterates through the coverageArray to grep each file in the test directory looking for matches
</span><span> </span><span style="color:#ff5e5e;">for </span><span>(</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">value </span><span style="color:#ff5e5e;">in </span><span style="color:#e9fdac;">coverageArray</span><span>) {
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">output </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">execSync</span><span>(
</span><span> </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">grep -rl tests -e 'COVERAGE_TAG: ${</span><span style="color:#e9fdac;">coverageArray</span><span style="color:#fbe3bf;">[</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">]}$' | cat</span><span style="color:#ffffff;">`</span><span>,
</span><span> {
</span><span> encoding: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">utf-8</span><span style="color:#ffffff;">"</span><span>,
</span><span> }
</span><span> );
</span><span> </span><span style="color:#6d6d6d;">// console.log(value);
</span><span> </span><span style="color:#6d6d6d;">// console.log(coverageArray[value]);
</span><span> </span><span style="color:#6d6d6d;">// console.log(output);
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">output </span><span style="color:#ff5e5e;">!= </span><span style="color:#ffffff;">""</span><span>) {
</span><span> </span><span style="color:#e9fdac;">coveredEndPoints </span><span style="color:#ff5e5e;">+= </span><span style="color:#fdb082;">1</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">Endpoint with no coverage: ${</span><span style="color:#e9fdac;">coverageArray</span><span style="color:#fbe3bf;">[</span><span style="color:#e9fdac;">value</span><span style="color:#fbe3bf;">]}</span><span style="color:#ffffff;">`</span><span>);
</span><span> </span><span style="color:#e9fdac;">nonCoveredEndpoints</span><span>.</span><span style="color:#6699cc;">push</span><span>(</span><span style="color:#e9fdac;">coverageArray</span><span>[</span><span style="color:#e9fdac;">value</span><span>]);
</span><span> }
</span><span> }
</span><span>
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Total Endpoints: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">totalEndPoints</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Covered Endpoints: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">coveredEndPoints</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// writeFile(
</span><span> </span><span style="color:#6d6d6d;">// "./lib/non_covered_endpoints.txt",
</span><span> </span><span style="color:#6d6d6d;">// JSON.stringify(nonCoveredEndpoints, null, "\t")
</span><span> </span><span style="color:#6d6d6d;">// );
</span><span> </span><span style="color:#8cdaff;">calculateCoverage</span><span>(</span><span style="color:#e9fdac;">coveredEndPoints</span><span>, </span><span style="color:#e9fdac;">totalEndPoints</span><span>);
</span><span>}
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">calculateCoverage</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">coveredEndpoints</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span>, </span><span style="font-style:italic;color:#fc9354;">totalEndpoints</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">number</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">percentCovered </span><span style="color:#ff5e5e;">= </span><span>((</span><span style="color:#e9fdac;">coveredEndpoints </span><span style="color:#ff5e5e;">/ </span><span style="color:#e9fdac;">totalEndpoints</span><span>) </span><span style="color:#ff5e5e;">* </span><span style="color:#fdb082;">100</span><span>).</span><span style="color:#8cdaff;">toFixed</span><span>(</span><span style="color:#fdb082;">2</span><span>);
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Coverage: </span><span style="color:#ffffff;">" </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">percentCovered </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">%</span><span style="color:#ffffff;">"</span><span>);
</span><span> process.env.</span><span style="color:#e9fdac;">COVERED_ENDPOINTS </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">coveredEndpoints</span><span>.</span><span style="color:#6699cc;">toString</span><span>();
</span><span> process.env.</span><span style="color:#e9fdac;">TOTAL_ENDPOINTS </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">totalEndpoints</span><span>.</span><span style="color:#6699cc;">toString</span><span>();
</span><span> process.env.</span><span style="color:#e9fdac;">PERCENT_COVERED </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">percentCovered</span><span>.</span><span style="color:#6699cc;">toString</span><span>();
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">// eslint-disable-next-line
</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">writeFile</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">location</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">data</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">try </span><span>{
</span><span> </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">writeFileSync</span><span>(</span><span style="color:#e9fdac;">location</span><span>, </span><span style="color:#e9fdac;">data</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// console.log("File written successfully");
</span><span> </span><span style="color:#6d6d6d;">// console.log("The written file has" + " the following contents:");
</span><span> </span><span style="color:#6d6d6d;">// console.log("" + fs.readFileSync(location));
</span><span> } </span><span style="color:#ff5e5e;">catch </span><span>(</span><span style="color:#e9fdac;">err</span><span>) {
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">error</span><span>(</span><span style="color:#e9fdac;">err</span><span>);
</span><span> }
</span><span>}
</span></code></pre>
<p>Thanks to <a href="https://www.linkedin.com/in/ACoAABg4jOgBK9s1HMX_wTI_XcJgPxTLP42G1xs?lipi=urn%3Ali%3Apage%3Ad_flagship3_feed%3BM%2FuA1chQR2yP5nPgmpVEUQ%3D%3D">Dmitry Pakhilov</a> for suggestions on how to make the code more readable!</p>
<h3 id="calculate-coverage-using-defineconfig">Calculate Coverage Using defineConfig</h3>
<p>We will be using the <a href="https://playwright.dev/docs/test-configuration">defineConfig</a> function that allows us to utilize the test runner and setup and create order to our tests. Below is an example of a file I created named <code>coverage.setup.ts</code> Notice, this file isn't using the <code>spec</code> in the name but rather setup, this will allow us to separate our setup versus spec files.</p>
<p>notice we are also renaming <code>test as coverage</code> This naming convention is really just so we can better describe our actions. We will uset the same syntax as when writing tests with the async block and will call <code>getEndpointCoverage()</code> function for each of our API endpoints.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// tests/coverage.setup.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">getEndpointCoverage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../lib/helpers/coverage</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span style="color:#ff5e5e;">as </span><span style="color:#e9fdac;">coverage </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">coverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">calculate coverage</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">getEndpointCoverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">getEndpointCoverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">getEndpointCoverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">room</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">getEndpointCoverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">branding</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">getEndpointCoverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">report</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">getEndpointCoverage</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">message</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>Below is the <code>playwright.config.ts</code> file. You can see in the projects section there are 2 objects in the array, the first is named <code>setup</code> and the 2nd is named <code>api-checks</code>. For the <code>setup</code> project I create a testMatch that will only run the <code>coverage.setup.ts</code> file. The api-checks is using the <code>dependencies</code> which requires <code>setup</code> to complete before running.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">config </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">config</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> projects: [
</span><span> { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>, testMatch: </span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">coverage</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">setup</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">ts</span><span style="color:#ffffff;">/ </span><span>},
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api-checks</span><span style="color:#ffffff;">"</span><span>,
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>],
</span><span> },
</span><span> ],
</span><span>
</span><span> use: {
</span><span> extraHTTPHeaders: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-solutions</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> baseURL: process.env.URL,
</span><span> ignoreHTTPSErrors: </span><span style="color:#ff8942;">true</span><span>,
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">on</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> retries: </span><span style="color:#fdb082;">0</span><span>,
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>]],
</span><span>});
</span></code></pre>
<h3 id="so-why-is-this-important-again">So Why Is This Important Again?</h3>
<p>As you can see now when you run your tests, now you should have some really nice output for your API endpoint coverage. Now at this point (or probably way sooner) you may be asking why... Why should I do this? Well for me there are a few reasons. When first starting off a project I want to be able to track progress. Though my checks I am writing may still be mainly covering high level breadth of the endpoints (not going super deep on assertions), I want to be able to track my progress.</p>
<p>Having this tooling built into my framework also allows me to not just track what I've done today, but when I get coverage to 100%, and a new endpoint gets added, I'll know about it right away if I am checking the logs, if not I can easily take any new endpoints and alert a slack channel or have some other form of notification to alert me when new endpoints have been added. This has been a big help for me in my day job keeping up with new endpoints released. We have a goal to add coverage to any new endpoints added within a week.</p>
<p>The full codebase can be found below where you can download and run for yourself, or visit the GitHub pages link to view the results from the latest test run.</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub</a></p>
<p>If you made it this far you are amazing. This is me celebrating together with you!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/dance.gif" alt="Image 7" /></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-5-calculating-endpoint-coverage/</p>
<p>Published Time: 2023-05-15T12:30:29.000Z</p>
The Definitive Guide to API Test Automation With Playwright: Part 4 - Handling Headers and Authentication
2023-05-08T00:00:00+00:00
2023-05-08T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-4-handling-headers-and-authentication/
<p>One of the first areas your likely to run into issues while writing automation for apis is around headers and authentication. I hope to share a few ways I've handled authentication and header management from my experiences, though there are many solutions to this problem. If you missed the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">Introduction</a>, <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-1-basics-of-api-testing-get/">Part 1</a>, <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-2-adding-more-in-depth-checks/">Part 2</a>, or <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-3-debugging-api-tests-with-vs-code/">Part 3</a> I encourage you to check those out to get the context of where we are jumping in.</p>
<h2 id="creating-an-auth-ts-datafactory">Creating an auth.ts datafactory</h2>
<p>My approach for the application we are testing <a href="https://automationintesting.online/">https://automationintesting.online/</a> will likely differ from other sites, as they are all different. When dealing with the <a href="https://automationintesting.online/auth/swagger-ui/index.html">auth endpoints</a>, there are only 3 endpoints, an auth where you pass username and password, a validate where you pass in a token to ensure you are still logged in, and a logout endpoint to invalidate your session. With this site only having 1 login UN <code>admin</code> PW <code>password</code> we will take a simple approach.</p>
<p>I will start by creating an <code>auth.ts</code> datafactory file. I previously had created the <code>auth</code> async function that would return cookies to that would be added to the headers on each test. I've updates the functions name to <code>createCookies</code> and added jsdoc so that when using the function you can hover with some nice helper text of what the function does along with an example of how to use it. I've found that super helpful when working within the context of a team.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/05/image-1.png" alt="Image 1" /></p>
<p>As I also added a new async function named <code>createToken</code>. This function is very similar to create cookies in that it makes the same POST auth/login call but rather than returning all the cookies I only return the token. I needed this for some of the auth tests I've added during this round of updates.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">= </span><span>process.env.URL </span><span style="color:#ff5e5e;">|| </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * Returns valid cookies for the given username and password.
</span><span style="color:#6d6d6d;"> * If a username and password aren't provided "admin" and "password" will be used
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createCookies } from "../datafactory/auth";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const cookies = createCookies("Happy", "Mcpassword")
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const response = await request.put(`booking/${bookingId}`, {
</span><span style="color:#6d6d6d;"> headers: { cookie: cookies },
</span><span style="color:#6d6d6d;"> data: body,
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createCookies</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">username</span><span>) {
</span><span> </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">password</span><span>) {
</span><span> </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">contextRequest </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">contextRequest</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span> </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">set-cookie</span><span style="color:#ffffff;">"</span><span>];
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">cookies</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> * Returns valid token for the given username and password.
</span><span style="color:#6d6d6d;"> * If a username and password aren't provided "admin" and "password" will be used
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createToken } from "../datafactory/auth";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const token = createToken("Happy", "Mcpassword")
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const response = await request.post("auth/validate", {
</span><span style="color:#6d6d6d;"> data: { token: token },
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createToken</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">username</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span>, </span><span style="font-style:italic;color:#fc9354;">password</span><span style="color:#ff5e5e;">?: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">username</span><span>) {
</span><span> </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">!</span><span style="color:#e9fdac;">password</span><span>) {
</span><span> </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>;
</span><span> }
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">contextRequest </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">newContext</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">contextRequest</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">url </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#e9fdac;">username</span><span>,
</span><span> password: </span><span style="color:#e9fdac;">password</span><span>,
</span><span> },
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">tokenString </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">set-cookie</span><span style="color:#ffffff;">"</span><span>].</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">;</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">0</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">token </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">tokenString</span><span>.</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">=</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">1</span><span>];
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">token</span><span>;
</span><span>}
</span></code></pre>
<p>With the easy way to create cookies or a valid token we can start on abstracting away how we create headers. For this I created a <code>createHeaders.ts</code> helper. I chose to keep this as a helper as I am not interacting with the API directly within this file. Within this helper file I have 2 async functions <code>createHeaders()</code> and <code>createInvalidHeaders()</code>. These are basic examples, but this pattern can be used to create different types of headers based on what your system needs. For example if you needed to include an account id or api key in your headers you could build logic out in this file keeping your code <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">createCookies </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../datafactory/auth</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">username </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_NAME</span><span>;
</span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">password </span><span style="color:#ff5e5e;">= </span><span>process.env.</span><span style="color:#e9fdac;">ADMIN_PASSWORD</span><span>;
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@param </span><span style="color:#e9fdac;">token</span><span style="color:#6d6d6d;"> a valid token to be used in the request if one is not provided cookies will be created from default username and password
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> a header object with the token set as a cookie
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createHeaders } from "../lib/helpers/createHeaders";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const headers = await createHeaders(token);
</span><span style="color:#6d6d6d;"> * const response = await request.delete(`booking/${bookingId}`, {
</span><span style="color:#6d6d6d;"> headers: headers,
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createHeaders</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">token</span><span style="color:#ff5e5e;">?</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">requestHeaders</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">token</span><span>) {
</span><span> </span><span style="color:#e9fdac;">requestHeaders </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">token</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>,
</span><span> };
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// Authenticate and get cookies
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createCookies</span><span>(</span><span style="color:#e9fdac;">username</span><span>, </span><span style="color:#e9fdac;">password</span><span>);
</span><span> </span><span style="color:#e9fdac;">requestHeaders </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#e9fdac;">cookies</span><span>,
</span><span> };
</span><span> }
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">requestHeaders</span><span>;
</span><span>}
</span><span>
</span><span style="color:#6d6d6d;">/**
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@returns</span><span style="color:#6d6d6d;"> a header object with an invalid cookie used to test negative scenarios
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * </span><span style="font-style:italic;color:#fbdfb5;">@example
</span><span style="color:#6d6d6d;"> * import { createInvalidHeaders } from "../lib/helpers/createHeaders";
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> * const invalidHeader = await createInvalidHeaders();
</span><span style="color:#6d6d6d;"> * const response = await request.delete(`booking/${bookingId}`, {
</span><span style="color:#6d6d6d;"> headers: invalidHeader,
</span><span style="color:#6d6d6d;"> });
</span><span style="color:#6d6d6d;"> *
</span><span style="color:#6d6d6d;"> */
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">createInvalidHeaders</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">requestHeaders </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> cookie: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">cookie=invalid</span><span style="color:#ffffff;">"</span><span>,
</span><span> };
</span><span>
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">requestHeaders</span><span>;
</span><span>}
</span></code></pre>
<p>I've refactored all the areas in the spec files to include these methods in order to create the headers. To see the refactored files take a look at <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/pull/5/files">the pull request</a>. Below is the GET examples that were updated. One thing to note is in may different tests creating the headers in the beforeAll() is typically ok, but it may make sense to create them in a beforeEach(). This will be determined by your tests, so don't blindly copy me, think through your needs.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/{id}
</span><span style="color:#6d6d6d;">//COVERAGE_TAG: GET /booking/summary
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">createHeaders</span><span>,
</span><span> </span><span style="color:#e9fdac;">createInvalidHeaders</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/createHeaders</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">headers</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">invalidHeader</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createHeaders</span><span>();
</span><span> </span><span style="color:#e9fdac;">invalidHeader </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createInvalidHeaders</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id that doesn't exist</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">request</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=999999</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id that is empty</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">request</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">500</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">timestamp</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.status).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">500</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">error</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Internal Server Error</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">path</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/booking/summary</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET all bookings with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">James</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dean</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET all bookings with details with no authentication</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">request</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">invalidHeader</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">403</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking by id with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/1</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">James</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dean</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking by id that doesn't exist</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/999999</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: </span><span style="color:#e9fdac;">headers</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">404</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking by id without authentication</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">403</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="using-storagestate">Using storageState</h2>
<p>One thing I didn't implement is the built in <a href="https://playwright.dev/docs/auth#basic-shared-account-in-all-tests">storageState</a>. I did create an <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/blob/ced7d621f05a02b5cff4c9e1a31e1da7a405866f/tests/auth.setup.ts">auth.setup.ts</a> file that utilized this but found that it didn't suite my needs. I left the file in there, and just commented out using this as the setup project. The reason it didn't work for me was because I include tests with invalid headers, and the storageState when setting up via <code>playwright.config.ts</code> makes all requests authenticated. This could be used with a bit more complexity importing different storageStates for each file/test, but I decided since I am creating headers just to handle that logic on my own.</p>
<p>Playwright also has the option to pass default http headers with every request using the extraHTTPHeaders within the <code>playwright.config.ts</code> file. An example below shows passing in <code>"playwright-solutions": "true"</code> as a header on every request. This can be really useful if you have a test header or default header you can pass in to bypass security rules in services as an example a CloudFlare WAF.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">config </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">config</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> projects: [
</span><span> { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>, testMatch: </span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fdb082;">\o</span><span style="color:#fbe3bf;">verage</span><span style="color:#fdb082;">.</span><span style="color:#fbe3bf;">setup</span><span style="color:#fdb082;">\.</span><span style="color:#fbe3bf;">ts</span><span style="color:#ffffff;">/ </span><span>},
</span><span> {
</span><span> name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api-checks</span><span style="color:#ffffff;">"</span><span>,
</span><span> dependencies: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">setup</span><span style="color:#ffffff;">"</span><span>],
</span><span> },
</span><span> ],
</span><span>
</span><span> use: {
</span><span> extraHTTPHeaders: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-solutions</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> baseURL: process.env.URL,
</span><span> ignoreHTTPSErrors: </span><span style="color:#ff8942;">true</span><span>,
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">on</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> retries: </span><span style="color:#fdb082;">0</span><span>,
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>]],
</span><span>});
</span></code></pre>
<hr />
<h2 id="creating-auth-api-checks">Creating /auth API checks</h2>
<p>With the creation of these new helpers I've gone ahead and added api test coverage for the <a href="https://automationintesting.online/auth/swagger-ui/index.html#/">auth endpoints</a>. The checks can be found in the <a href="https://github.com/playwrightsolutions/playwright-api-test-demo/tree/main/tests/auth">main repo under the tests/auth/</a> directory. With this area of the system covered I now have high confidence as things change, logging in, logging out, and validating a token are working as expected. One thing to note with these examples, there was only 1 valid login I was testing with, typically when it comes to authorization I would also want to try test any different types of logins that are provided. For a more complex system I would recommend more checks.</p>
<p>Please do check out the repo below with all the code examples</p>
<p><a href="https://github.com/playwrightsolutions/playwright-api-test-demo">GitHub - playwrightsolutions/playwright-api-test-demo</a></p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-4-handling-headers-and-authentication/</p>
<p>Published Time: 2023-05-08T04:22:16.000Z</p>
The Definitive Guide to API Test Automation With Playwright: Part 3 - Debugging API Tests
2023-04-17T00:00:00+00:00
2023-04-17T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-3-debugging-api-tests-with-vs-code/
<p>A big part of writing automated checks is testing and debugging the code you write, ideally ensuring there aren't any bugs in test code. For part 3 I will be covering how I run my tests, debug my tests, and how I get feedback before the code is merged into the code branch. If you missed the <a href="https://playwrightsolutions.com/is-it-possible-to-do-api-testing-with-playwright-the-definitive/">Introduction</a>, <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-1-basics-of-api-testing-get/">Part 1</a>, or <a href="https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-2-adding-more-in-depth-checks/">Part 2</a>, I encourage you to check those out to get the context of where we are jumping in.</p>
<h2 id="what-i-ll-cover">What I'll cover</h2>
<ul>
<li>How I use VS Code to debug my tests</li>
<li>Using UI mode to debug</li>
<li>Using Playwright Test Trace Files via Show-Report</li>
<li>Using console.log()/console.table()</li>
<li>How I get feedback via GitHub Action before merging code</li>
</ul>
<h2 id="vs-code-to-debug-tests">VS Code to Debug Tests</h2>
<p>When I am writing or debugging Playwright tests I typically use the <a href="https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright">Playwright Test for VS Code extension</a>. Once installed, you can select the Testing (beaker icon) and view, debug, or run the tests that are written. What's nice about this, is you can run individual tests with a button click.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-3.png" alt="Image 1" /></p>
<p>Playwright Test VS Code Extension</p>
<p>With the extension installed you also will see green play buttons on each of your test and describe blocks where you can run the checks from the <code>spec.ts</code> file directly.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-4.png" alt="Image 2" /></p>
<p>Run test buttons in-line with VS Code</p>
<p>I'll demonstrate using running a test in debug mode below. Before I run the test, I will add a <code>breakpoint</code> where I want the test to pause and open the debugger menu. From here I am able to see information about the tests that I typically wouldn't see. This is helpful in trying to determine what information variables are assigned to. In my example I will add a debug point after I assign the body variable to response.json().</p>
<p>From the above example, you can see I was able to validate the shape of the data that is returned <code>{ bookings: [ { bookingDates: { checkin: "Date", checkout: "Date"} } ] }</code>, along with any specific data.</p>
<h2 id="using-playwright-ui-mode">Using Playwright UI mode</h2>
<p>To use UI mode you will need to have Playwright version 1.32 in your project. To upgrade your version it's as easy as visiting your <code>package.json</code> folder, finding the devDependencies > @playwright/test, and updating the value to 1.32 or higher.</p>
<p>If you are not sure what the latest version is you can find it on <a href="https://github.com/microsoft/playwright/releases">GitHub Releases page</a>. You can also follow this guide to set up slack notification when a new version of Playwright is released.</p>
<p><a href="https://playwrightsolutions.com/how-can-i-get-slack-notifications/">How can I get Slack notifications</a></p>
<p>On to Playwright UI mode, you may be thinking, why do I need to use UI mode, when we are running API tests? Well you don't have to but it's a great way to run and debug tests and view the network requests as they are occurring versus adding console.log or using the VSCode debugger.</p>
<p>To run Playwright in UI mode add <code>-- ui</code> to the end of your playwright cli command. To make this easier I went ahead and added a npm scripts entry to the <code>package.json</code> file. If you are following along I create a key named <code>ui</code> and add the command <code>npx playwright test --ui</code> what this allows me to do is run <code>npm run ui</code> and the command <code>npx playwright test --ui</code> will get executed from the command line. I find creating certain npm scripts really useful in taking long cli commands and reducing them to something you can quickly type.</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">name</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">playwright-api-test-demo</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">version</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">1.0.0</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">description</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">This repository will serve as a place where I add API test Automation checks for articles written at <https://playwrightsolutions.com></span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">main</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">index.js</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">scripts</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">npx playwright test --ui</span><span style="color:#ffffff;">"
</span><span> },
</span><span> </span><span style="background-color:#f92649;color:#f8f8f0;">...</span><span>
</span></code></pre>
<p>Once <code>npm run ui</code> is run, you will notice a new window that pops up, after a few seconds all the tests in your suite should also show up on the left hand column. This is where we will run or debug our tests.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-5.png" alt="Image 5" /></p>
<p>To run a test in ui mode select either a file, a group of tests <code>test.describe()</code> or an individual test <code>test()</code>. You can run the test or group of tests using the green play button. Once run you will be able to see the history of each test in the <code>Actions</code> panel, see the test code under source, console logs under console, http network requests under network, and test logs under logs. For debugging API, typically you will want to find specific network requests that were made and look at the different request and response + headers and body. All of that is viewable on each http request that is made from the Playwright Test you run. An example can be found below.</p>
<p>Though we aren't utilizing all the features with UI (as we aren't opening a browser), there is a ton of value in being able to run tests with all the details of the http network requests at our fingertips. Before the ui feature existed I found myself running the tests with traces always on, in order to view the test report to view the http requests via the trace file viewer.</p>
<h2 id="using-playwright-test-trace-files-via-show-report">Using Playwright Test Trace Files via Show-Report</h2>
<p>This was my go to way to debug tests prior to the <code>ui</code> mode being released. This method requires you to update your <code>playwright.config.ts</code> to set the trace: "on". This will make it where the trace files are recorded for each test, and will be available when viewing the Playwright Test Report. An example can be found below, this can also be set when running from the command line overwriting whatever is in the <code>playwright.confg.ts</code> file by running <code>npx playwright test --trace on</code> <a href="https://playwright.dev/docs/test-cli">docs for command line</a>.</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">//playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> use: {
</span><span> baseURL: process.env.URL,
</span><span> ignoreHTTPSErrors: </span><span style="color:#ff8942;">true</span><span>,
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">on</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> retries: </span><span style="color:#fdb082;">0</span><span>,
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>]],
</span><span>});
</span></code></pre>
<p>Once the tests run and are complete, it's as simple as running <code>npx playwright show-report</code> which will bring up the Playwright Test Report, and because we set trace to "on" we will have all network requests in the report! Below is an example of the Test Report in action.</p>
<h2 id="console-log-console-table">Console.log / Console.table</h2>
<p>The below example I am running the command <code>npx playwright test tests/booking/booking.get.spec.ts:48</code> and adding the console.log() commands</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-9.png" alt="Image 6" /></p>
<p>Another common method to debug your code is to add console.log statements within the codebase. Depending on the shape of your data, you could run into mixed results just using the console.log(body), if there are additional objects like the bookingdates listed below, you will notice they are displayed as [Object] in the console.log output.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-6.png" alt="Image 7" /></p>
<p>When you want to see all the data, you can use the <code>JSON.stringify()</code> method to transform the json to a string. This is helpful if you want to see all the data, but isn't very useful within your tests, as you no longer have a javascript object that you can use the dot notation to get info from.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-8.png" alt="Image 8" /></p>
<p>Another useful tip that <a href="https://playwrightsolutions.com/author/joel/">Joel Black</a> taught me about is console.table(), you can pass an array of objects and get really nice formatting out of it. Note, I am passing in <code>body.bookings</code>. Viewing data this way can make it easier to see differences in what is returned for easy comparisons.</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-7.png" alt="Image 9" /></p>
<h2 id="running-only-changed-tests-on-a-pull-request">Running only changed tests on a pull request</h2>
<p>I recently covered how I do this in a recent post. It made enough sense for me to be a stand alone post. Implanting this can allow you to get quick feedback from your tests running in CI. What's really nice is if you enable capturing the trace files on failures and using the article below, you will have access to the test artifacts after the test run.</p>
<p><a href="https://playwrightsolutions.com/is-it-possible-to-run-only-playwright-tests-that-changed-on-a/">Is it possible to run only Playwright Tests that changed in GitHub actions on a pull request?</a></p>
<p>As you can see there are quite a few different ways to debug your tests as you are writing and maintaining them. I'm sure there are more, if you have any please reach and and share them with me on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a>!</p>
<hr />
<p>Thanks for reading! If you found this helpful, reach out and let me know on <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> or consider <a href="https://ko-fi.com/butchmayhew">buying me a cup of coffee</a>. If you want more content delivered to you in your inbox subscribe below.</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-3-debugging-api-tests-with-vs-code/</p>
<p>Published Time: 2023-04-17T12:30:56.000Z</p>
GitHub Actions 中是否可以只运行 pull request 中更改的 Playwright 测试?
2023-04-10T00:00:00+00:00
2023-04-10T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/is-it-possible-to-run-only-playwright-tests-that-changed-on-a/
<p>你是否在 review 同事的 GitHub pull request 时,曾问自己这个 Playwright 测试是否能通过?我就有过这样的经历,这也是促使我写这篇文章的原因。在我的工作环境中,我希望防止失败的测试进入自动化测试的主干分支,但同时也不想运行每一个 spec 文件而导致反馈延迟,所以我用以下方法解决了这个问题。</p>
<p>在我的情况下,我使用专门的代码库进行自动化测试,主要用于回归测试。我有一个<code>main</code>代码分支,任何新添加到代码库的代码都将通过<code>pull request</code>合并进来。这要求开发人员从<code>main</code>分支创建一个新分支,编写、编辑或删除代码,然后创建一个指向 main 分支的<code>pull request</code>。我们将在这个<code>pull request</code>事件触发时做一些事情。</p>
<p>对我来说,这样做的好处包括:</p>
<ul>
<li>当我最初创建 pull request 时,我可以确信我在本地编写和运行的测试也能在 CI 中通过。</li>
<li>我请求对 pull request 进行代码 review 的同事可以快速看到我修改的测试已运行并通过。</li>
<li>对于包含数百或上千个测试的测试套件,在 pull request 时只运行更改的文件可以提供更快的反馈,而不是等待所有测试运行完毕。</li>
</ul>
<p>这个自动化测试逻辑主要做以下几件事：</p>
<ol>
<li>
<p>找出变化的文件：</p>
<ul>
<li>使用<code>git diff</code>命令比较<code>main</code>分支和新建的<code>my_new_branch</code>分支。</li>
<li>这样可以得到两个分支之间所有变化的文件列表。</li>
</ul>
</li>
<li>
<p>筛选测试文件：</p>
<ul>
<li>从变化的文件中，只保留文件名包含".spec.ts"的文件。</li>
<li>这些通常是 Playwright 的测试文件。</li>
</ul>
</li>
<li>
<p>保存文件列表：</p>
<ul>
<li>将筛选出的文件名列表（用空格分隔）保存到一个叫<code>CHANGED</code>的环境变量中。</li>
</ul>
</li>
<li>
<p>设置正确的 Git 历史深度：</p>
<ul>
<li>在 GitHub Actions 中，需要设置<code>actions/checkout</code>的<code>fetch-depth</code>为 0。</li>
<li>这样做是为了确保 GitHub Actions 可以访问所有分支的完整历史。</li>
<li>如果不这样设置，使用默认值 1 可能会导致<code>git diff</code>命令失败，错误信息为"fatal: Invalid revision range"。</li>
</ul>
</li>
<li>
<p>关于历史深度的说明：</p>
<ul>
<li>随着项目变大，你可以根据需要调整<code>fetch-depth</code>的值。</li>
<li>但要记住，设置得太小可能会导致某些操作失败。</li>
</ul>
</li>
</ol>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image-2.png" alt="图片 1" /></p>
<p>GitHub Actions 日志 👆</p>
<p>以下是一个 GitHub actions .yml 文件的示例,展示了如何实现这一功能。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#6d6d6d;"># .github-ci.yml
</span><span>
</span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Playwright API Checks
</span><span>
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">workflow_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">inputs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">base_url</span><span>:
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">URL, to run tests against</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">required</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">default</span><span>: </span><span style="color:#fbe3bf;">https://automationintesting.online/
</span><span>
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">playwright-automation-checks</span><span>:
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">10
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span>
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">BASE_URL</span><span>: </span><span style="color:#fbe3bf;">${{ github.event.inputs.base_url }}
</span><span> </span><span style="color:#ff5e5e;">CHANGED</span><span>: </span><span style="color:#ffffff;">""
</span><span>
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">fetch-depth</span><span>: </span><span style="color:#fdb082;">0
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v3
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#fdb082;">16
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Install node_modules and Playwright
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci --ignore-scripts
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install-deps
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Set BASE_URL if not passed in
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">env.BASE_URL == null
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "BASE_URL=https://automationintesting.online/" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Create Test List if pull_request
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">github.event.pull_request
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "Creating a list of tests that have changed"
</span><span style="color:#fbe3bf;"> FILES=$(git diff --name-only ${{ github.event.pull_request.base.sha }}..${{ github.event.pull_request.head.sha }} | grep ".spec.ts" | tr '\n' ' ')
</span><span style="color:#fbe3bf;"> echo "CHANGED=$FILES" >> $GITHUB_ENV
</span><span style="color:#fbe3bf;">
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "CHANGED = ${{ env.CHANGED }}"
</span><span style="color:#fbe3bf;"> echo "The github event is: ${{ github.event_name }}"
</span><span style="color:#fbe3bf;"> URL=${{ env.BASE_URL}} npx playwright test --workers=1 ${{ env.CHANGED }}
</span></code></pre>
<p>需要注意的是,如果没有找到匹配<code>spec.ts</code>的文件,在运行<code>npx playwright test --workers=1 ${{ env.CHANGED}}</code>命令时,<code>CHANGED</code>变量将为空,所有测试都会运行(这对我来说是可以接受的)。</p>
<p>这种方法存在一个潜在的问题：</p>
<ol>
<li>
<p>分支同步问题：</p>
<ul>
<li>假设你正在一个特性分支上工作，准备创建 pull request。</li>
<li>如果在此期间，main 分支有了新的更新，而你的特性分支还没有合并这些更新。</li>
</ul>
</li>
<li>
<p>可能的后果：</p>
<ul>
<li>使用<code>git diff</code>命令时，它会显示出所有的差异。</li>
<li>这包括 main 分支上的新更改，即使这些更改与你的工作无关。</li>
</ul>
</li>
<li>
<p>影响：</p>
<ul>
<li>这可能导致运行一些不必要的测试，因为系统会认为这些文件也被修改了。</li>
</ul>
</li>
<li>
<p>替代方案：</p>
<ul>
<li>我的第一个解决方案使用了 GitHub API。</li>
<li>使用 GitHub API 可以更精确地获取只在当前 pull request 中更改的文件。</li>
</ul>
</li>
<li>
<p>适用场景：</p>
<ul>
<li>对于小团队来说，这个问题可能影响不大。</li>
<li>但对于大型团队，特别是 main 分支频繁更新的项目：
<ul>
<li>使用 GitHub API 的方法可能更合适。</li>
<li>它可以更准确地识别实际更改的文件，避免运行不必要的测试。</li>
</ul>
</li>
</ul>
</li>
</ol>
<p>总的来说，这个问题在小团队中可能不太明显，但在大型、快节奏的开发环境中，使用更精确的 GitHub API 方法可能会带来显著的效率提升。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/04/image.png" alt="图片 2" /></p>
<h3 id="wo-de-di-yi-ge-jie-jue-fang-an">我的第一个解决方案</h3>
<p>当我第一次实现这个功能时,我的 Create Test List if pull_request 部分看起来很不一样。下面是代码,我使用了 GitHub API,发送 curl 请求获取完整的更改文件列表。这需要我在 GitHub 中创建一个个人访问令牌,并将其作为密钥添加到 GitHub Actions 中。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span>- </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Create Test List if pull_request
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">github.event.pull_request
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "Creating a list of tests that have changed"
</span><span style="color:#fbe3bf;"> FILES=$(curl --header "Authorization: Bearer ${{ secrets.REPO_ACCESS_TOKEN }}" --request GET 'https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/files' | jq -r '.[] | .filename' | grep "spec.ts" | tr '\n' ' ')
</span><span style="color:#fbe3bf;"> echo "CHANGED=$FILES" >> $GITHUB_ENV
</span></code></pre>
<p>感谢阅读!如果你觉得这篇文章有帮助,请在<a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a>上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">为我买杯咖啡</a>。如果你想在收件箱中收到更多内容,请在下方订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/is-it-possible-to-run-only-playwright-tests-that-changed-on-a/</p>
<p>发布时间: 2023-04-10T12:30:50.000Z</p>
如何在Playwright UI测试中找到在Chrome中不断消失元素的定位器
2023-04-07T00:00:00+00:00
2023-04-07T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-i-find-a-locator-that-keeps-disappearing-in-chrome-for-a-playwright-ui-test/
<p>我知道我之前遇到过很多次这个问题。感觉就像是在比赛中选择元素并快速查看控制台以实际获取元素名称。</p>
<p>这个简单的技巧可能会帮助你在交互时保持下拉菜单或弹出窗口的可见性。</p>
<p>我们将使用 Chrome 开发者工具的“模拟聚焦页面”功能。在 Mac 上打开 Chrome 开发者工具，使用[⌘ 或 Ctrl]+[P]命令菜单，搜索<code>>emulate a focused page</code>并按 Enter。</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/09/image.png" alt="Image 3" /></p>
<p>这将使某些元素保持聚焦状态，以便它们可以被选择。</p>
<p>要亲自试试这个功能，你可以访问<a href="https://developer.mozilla.org/en-US/">MDN 文档</a>并尝试检查搜索框中的一个搜索结果。</p>
<p>感谢<a href="https://twitter.com/sulco/status/1305841873945272321">@sulco</a>提供的灵感。</p>
在 VSCode 中启用 pw:api 以增强playwright的调试功能
2023-04-03T00:00:00+00:00
2023-04-03T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/enabling-pw-api-in-playwright-test-for-visual-studio-code/
<p>刚开始使用 Playwright 时，你可能运行了你的第一个测试命令，<code>npx playwright test</code>。真棒！用已故绝地大师欧比-旺-克诺比的话来说，"<strong>你已经迈出了进入更大世界的第一步。</strong>"</p>
<p>深入挖掘，你可能已经学会了通过传递环境变量来在运行测试时在控制台中显示调试信息。<code>DEBUG=pw:api npx playwright test</code> 你甚至可能已经将其永久设置为系统环境变量，这本身就很酷！</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/pw-api.png" alt="图 1: DEBUG=pw:api npx playwright test 输出" /></p>
<p>看看这些美丽、详细的调试信息！</p>
<h3 id="xian-zai-shi-jian-guo-qu-liao-yi-duan">现在，时间过去了一段。</h3>
<p>你探索了更多的 Playwright 生态系统，设置了 Visual Studio Code 并安装了 Playwright Test for VSCode 插件！现在你手中有了如此强大的工具！你打开了测试资源管理器，启动了一个测试，当你查看测试输出时，现在你看到的只是...</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/vscode-no-debug.png" alt="图 2" /></p>
<p>所有优雅的调试信息去哪了？:(</p>
<p>如果你喜欢优雅的调试信息，并通过 Playwright Test for VSCode 运行测试，请继续阅读！</p>
<h2 id="rang-wo-men-kuai-su-xiu-fu-zhe-ge-wen-ti">让我们快速修复这个问题！</h2>
<ol>
<li>在 VS Code 中打开 <code>扩展</code>。</li>
<li>找到 Playwright Test for VS Code 并点击 <code>齿轮</code>图标</li>
</ol>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/vscode-click-the-gear.png" alt="图 3" /></p>
<ol start="3">
<li>
<p>然后点击 <code>扩展设置</code>。</p>
</li>
<li>
<p>现在，一个名为 <code>设置</code> 的窗口会出现在你打开的文件的主选项卡中。注意 <code>Playwright: Env</code> 部分。在这里，我们可以保存 Playwright 测试在通过 VS Code 执行时使用的环境变量。
点击 <code>在 settings.json 中编辑</code></p>
</li>
</ol>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/vscode-edit-in-settingsjson.png" alt="图 4" /></p>
<ol start="5">
<li>一个名为 <code>settings.json</code> 的文件现在将在你的编辑器中打开，光标位于 <code>"playwright.env"</code> 部分内。</li>
</ol>
<p>仔细在 <code>"playwright.env"</code> 的花括号内添加 <code>"DEBUG": "pw:api"</code></p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/vscode-add-env.png" alt="图 5" /></p>
<ol start="6">
<li>
<p>保存并关闭 <code>settings.json</code></p>
</li>
<li>
<p>运行你的测试并打开 <code>查看测试输出</code>。</p>
</li>
</ol>
<h3 id="ta-you-chu-xian-liao">它又出现了！</h3>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/vscode-api-debugging-to-vscode-pw-1.png" alt="图 6" /></p>
<p>哦，优雅的调试信息，我多么想念你。</p>
<hr />
<p>感谢阅读！如果你觉得这篇文章有帮助，请通过 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 联系我，或者考虑 <a href="https://ko-fi.com/butchmayhew">请我喝一杯咖啡</a>。如果你想要更多内容发送到你的收件箱，请在下方订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/enabling-pw-api-in-playwright-test-for-visual-studio-code/">网址来源</a></p>
<p>发布时间: 2023-04-03</p>
Playwright API 测试权威指南：第2部分 - 更多用例
2023-03-27T00:00:00+00:00
2023-03-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-2-adding-more-in-depth-checks/
<p>让我们来测试 post 请求。我不会在这组测试中深入太多细节,因为本文还有 PUT 和 DELETE 请求要讨论。下面的断言要花一些时间来重构,因为需要创建一些辅助函数和数据工厂函数,以使 POST spec 更简单。我不会详细介绍这些函数,但简单概括如下:</p>
<ul>
<li><code>createRandomBookingBody</code> - 需要房间 ID、入住日期和退房日期,并创建一个可用于 POST 到 <code>booking/</code> api 接口的请求体。💡 我们也可以用它来断言响应体!!!</li>
<li><code>futureOpenCheckinDate</code> - 需要一个房间 ID,并返回一个日期字符串 <code>2023-03-31T00:00:00.000Z</code> (这使用了获取预订 API 并进行一些快速计算)</li>
<li><code>stringDateByDays</code> - 需要一个日期字符串和一个可选的数字。它会根据今天的日期添加或减去天数,并返回一个日期字符串 <code>2023-03-24</code></li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">createRandomBookingBody</span><span>,
</span><span> </span><span style="color:#e9fdac;">futureOpenCheckinDate</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ POST requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">requestBody</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">1</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureCheckinDate </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkInString </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureCheckinDate</span><span>.</span><span style="color:#8cdaff;">toISOString</span><span>().</span><span style="color:#6699cc;">split</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">T</span><span style="color:#ffffff;">"</span><span>)[</span><span style="color:#fdb082;">0</span><span>];
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">checkOutString </span><span style="color:#ff5e5e;">= </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">2</span><span>);
</span><span>
</span><span> </span><span style="color:#e9fdac;">requestBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createRandomBookingBody</span><span>(
</span><span> </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> </span><span style="color:#e9fdac;">checkInString</span><span>,
</span><span> </span><span style="color:#e9fdac;">checkOutString
</span><span> );
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST new booking with full body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: </span><span style="color:#e9fdac;">requestBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">booking </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">booking</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingdates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>通过在 beforeEach 块中使用这些函数,我能够添加额外的测试并为每个想要编写的测试获得新的请求体数据和可用的入住日期。实际的 POST 请求测试将使用完整的请求体创建一个新预订(包括必需和可选参数),注意这个 API 调用不需要身份验证,所以没有传递头部信息,我传入了通过 <code>createRandomDataBody()</code> 函数生成的 <code>requestBody</code>。</p>
<p>我们以这种方式创建请求体的好处是(不是硬编码),现在我可以使用我们为 postBody 设置的变量和数据,并在我们的断言中使用它。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// POST booking 响应体
</span><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingid</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">2</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingid</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">2</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">roomid</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">1</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">firstname</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Testy</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lastname</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">McTesterSon</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">depositpaid</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ff8942;">true</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">bookingdates</span><span style="color:#ffffff;">"</span><span>: {
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkin</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2023-05-10</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">checkout</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">2023-05-11</span><span style="color:#ffffff;">"
</span><span> }
</span><span> }
</span><span>}
</span></code></pre>
<p>下面的断言顺序也与响应体相同,这是故意的,目的是保持组织性!注意在这个场景中,我取了 <code>body</code>,也就是完整的 JSON 响应,创建了一个新变量 <code>booking</code> 并用它进行断言。我喜欢这样做,因为它帮助我快速可视化我正在对预订对象进行断言,在那之下是 <code>bookingdates</code> 对象。对于小型 API 响应来说可能不是那么重要,但当你有一个包含 20-50 个项目的 JSON 对象的响应体,或者你想遍历对象数组时,你会非常高兴你遵循了这种模式。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">booking </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">booking</span><span>;
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingdates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">requestBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span></code></pre>
<p>我们可以进一步添加测试,比如:</p>
<ul>
<li>只使用必需输入的 POST 预订</li>
<li>缺少必需输入的 POST 预订</li>
<li>使用错误类型的 POST 预订("true" 而不是 true 或 "1" 而不是 1)</li>
<li>使用身份验证的 POST 预订,尽管不需要</li>
<li>与现有预订日期重叠的 POST 预订</li>
<li>使用过去日期的 POST 预订</li>
<li>等等...</li>
</ul>
<p>但我们已经验证了具有这组参数的 api 正在按预期工作,所以让我们继续前进!</p>
<h3 id="delete-qing-qiu-jian-cha">DELETE 请求检查</h3>
<p>对于这组检查,我再次使用了我创建的数据工厂函数 <code>createFutureBooking</code> 和 <code>auth</code> 来设置测试。注意我在 describe 块中创建了 let 变量,有些已经设置了值,有些将在 beforeAll (如果不改变)或 beforeEach 块中获得它们的值,beforeEach 块将在每次测试运行前为变量分配一个新值。我在这个测试中将 roomId 硬编码为 1,因为我知道系统会有它可用,但这是一个风险,因为有人可能会删除 roomId 1,在这种情况下,我需要创建一个房间,并为该房间创建一个预订来执行我们的删除预订测试。我包含的 3 个测试是:</p>
<ul>
<li>DELETE 特定房间 ID 的预订</li>
<li>DELETE 不存在 ID 的预订</li>
<li>无身份验证的 DELETE 预订 ID</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">auth </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/datafactory/auth</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">getBookingSummary</span><span>,
</span><span> </span><span style="color:#e9fdac;">createFutureBooking</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/{id} DELETE requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">bookingId</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">1</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">auth</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createFutureBooking</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="color:#e9fdac;">bookingId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureBooking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>;
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">DELETE booking with specific room id:</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">delete</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">202</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getBookingSummary</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBooking</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">0</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">DELETE booking with an id that doesn't exist</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">delete</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/999999</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">404</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">DELETE booking id without authentication</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">delete</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">403</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>在第一个测试中,你可以看到我们首先在 beforeEach 块中创建一个预订,我们将传入删除方法的预订 ID 与头部一起使用,因为我们需要授权。这是我一直使用的另一种模式,我计划进行主要断言的任何 api 接口,总是将 <code>response</code> 变量分配给它。这为我们将来继续构建测试提供了优势。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>const response = await request.delete(`booking/${bookingId}`, {
</span><span> headers: { cookie: cookies },
</span><span> });
</span></code></pre>
<p>对于这第一个测试,我进行了两个断言,一个是对 response.status() 的断言,另一个是期望 response.text() 为空字符串 ""。对我来说,我想进一步验证预订是否真的被删除了,所以我没有使用测试中的 playwright <code>request</code> 方法,而是创建了另一个数据工厂 <code>getBookingSummary(bookingId)</code>，它返回 GET booking/summary?roomid=${bookingId} 的响应体,我可以对其进行断言。在这种情况下,我想确保 bookings.length 为 0。</p>
<h3 id="put-qing-qiu-jian-cha">PUT 请求检查</h3>
<p>在下一节中,我保留了一些冗长的内容,即在每个测试部分中创建一个新的 putBody,有很多方法可以组织代码。我本可以像在发布新预订 api 接口上创建请求体那样将其抽象出来。在这种情况下,我希望非常清楚地传递了哪些信息,因为在我的一个测试中,我尝试在没有名字的情况下进行 PUT 请求。</p>
<p>我遵循的一个模式是,我在 describe 块中创建所有变量。这允许我在测试和测试步骤中访问这些变量以进行断言。目前我也硬编码了一些变量。我可以使用像 faker 这样的工具来使数据唯一,如果我这样做,我会在 beforeEach() 中设置变量,这样每个测试都会得到一个新名字。它看起来像这样:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/{id} PUT requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">firstname</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">firstname </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">faker</span><span>.name.</span><span style="color:#8cdaff;">firstName</span><span>()
</span><span> </span><span style="color:#ff5e5e;">...
</span><span> });
</span></code></pre>
<p>我正在进行的检查是:</p>
<ul>
<li>PUT 特定房间 ID 的预订 + 验证预订已更新</li>
<li>在 putBody 中没有 firstname 的 PUT 预订</li>
<li>PUT 不存在 ID 的预订</li>
<li>PUT ID 为文本的预订</li>
<li>使用无效身份验证的 PUT 预订 ID</li>
<li>无身份验证的 PUT 预订 ID</li>
<li>没有 put body 的 PUT 预订 ID</li>
</ul>
<p>在我看来,这是一个更有趣的 api 接口,因为有很多不同的组合可以测试。</p>
<p>我想特别指出的一个地方是在第一个测试 <code>PUT booking with specific room id</code> 中,我使用 <a href="https://playwright.dev/docs/api/class-test#test-step">test.step()</a> 方法来帮助拆分测试。在我的 test.step 中,我实际上使用了 <code>getBookingById()</code>,这是我创建的一个数据工厂方法,用于返回发送的预订 ID 的当前主体。💡 重要提示:如果你使用 test.step,确保在 test.step 前面使用 <code>await</code>,如果你像我第一次编写测试时那样错过了这一点,你会在试图弄清楚发生了什么时敲键盘。</p>
<p>对我来说,我发现我错过了 await 是因为我试图让 test.step 中的一个断言失败...我在测试中做不到,回到 Playwright 文档中发现了这个问题。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Verify booking was updated</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBookingBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getBookingById</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBookingDates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span>});
</span></code></pre>
<p>当我第一次为这些测试编写自动化时,我遇到了很多来自被测应用程序的 <a href="https://http.cat/409">409 错误消息</a>。代码代表冲突。具体的冲突是围绕已经在使用的入住和退房日期,这导致我创建了使我们编写这些测试更容易的数据工厂方法。没有这些函数,我会在故障排除时花费大量时间手动更新日期,我们会有硬编码的数据,这最终会导致更多的 409 错误和测试的不一致性。</p>
<p>这些数据工厂方法允许我让测试独立于任何其他测试数据或测试创建它需要的数据。</p>
<blockquote>
<p>你不应该依赖测试 1 来设置测试 2 的数据。这是一个陷阱!!</p>
</blockquote>
<p>我特别为 <code>futureOpenCheckinDate()</code> 和 <code>createFutureBooking()</code> 感到自豪。我在下面包含了我为每个创建的 <a href="https://jsdoc.app/">js
doc</a> 描述。(我刚刚了解到 jsdoc,我非常喜欢它!!!)</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-11.png" alt="图片 5" /></p>
<p>futureOpenCheckinDate() jsdoc</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-12.png" alt="图片 6" /></p>
<p>createFutureBooking() jsdoc</p>
<p>所有的 PUT 请求测试可以在下面找到。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">auth </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/datafactory/auth</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{
</span><span> </span><span style="color:#e9fdac;">getBookingById</span><span>,
</span><span> </span><span style="color:#e9fdac;">futureOpenCheckinDate</span><span>,
</span><span> </span><span style="color:#e9fdac;">createFutureBooking</span><span>,
</span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/datafactory/booking</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">isValidDate</span><span>, </span><span style="color:#e9fdac;">stringDateByDays </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">../../lib/helpers/date</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/{id} PUT requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">bookingId</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">roomId </span><span style="color:#ff5e5e;">= </span><span style="color:#fdb082;">1</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">firstname </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Happy</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">lastname </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">McPathy</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">depositpaid </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">false</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">email </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">testy@mcpathyson.com</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">phone </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">5555555555555</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureBooking</span><span>;
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">futureCheckinDate</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">auth</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">futureBooking </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">createFutureBooking</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> </span><span style="color:#e9fdac;">bookingId </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">futureBooking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>;
</span><span> </span><span style="color:#e9fdac;">futureCheckinDate </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">futureOpenCheckinDate</span><span>(</span><span style="color:#e9fdac;">roomId</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">PUT booking with specific room id</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">firstname</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">booking </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">booking</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">bookingdates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">booking</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">step</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Verify booking was updated</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBookingBody </span><span style="color:#ff5e5e;">= await </span><span style="color:#8cdaff;">getBookingById</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBeGreaterThan</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">bookingId</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">getBookingDates </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">getBookingBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>;
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">getBookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#e9fdac;">putBody</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>);
</span><span> });
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT booking without firstname in putBody</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">error</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">BAD_REQUEST</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">errorCode</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">errorMessage</span><span>).</span><span style="color:#8cdaff;">toContain</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Validation failed for argument [0] in public org.springframework.http.ResponseEntity</span><span style="color:#ffffff;">"
</span><span> );
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">fieldErrors</span><span>[</span><span style="color:#fdb082;">0</span><span>]).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Firstname should not be blank</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT booking with an id that doesn't exist</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">firstname</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">delete</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/999999</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">404</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">PUT booking id that is text</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">firstname</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/asdf</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">404</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">timestamp</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.status).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">404</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">error</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Not Found</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">path</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/booking/asdf</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT booking id with invalid authentication</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">firstname</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">" </span><span>},
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">403</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT booking id without authentication</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">putBody </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> bookingid: </span><span style="color:#e9fdac;">bookingId</span><span>,
</span><span> roomid: </span><span style="color:#e9fdac;">roomId</span><span>,
</span><span> firstname: </span><span style="color:#e9fdac;">firstname</span><span>,
</span><span> lastname: </span><span style="color:#e9fdac;">lastname</span><span>,
</span><span> depositpaid: </span><span style="color:#e9fdac;">depositpaid</span><span>,
</span><span> email: </span><span style="color:#e9fdac;">email</span><span>,
</span><span> phone: </span><span style="color:#e9fdac;">phone</span><span>,
</span><span> bookingdates: {
</span><span> checkin: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">0</span><span>),
</span><span> checkout: </span><span style="color:#8cdaff;">stringDateByDays</span><span>(</span><span style="color:#e9fdac;">futureCheckinDate</span><span>, </span><span style="color:#fdb082;">1</span><span>),
</span><span> },
</span><span> };
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> data: </span><span style="color:#e9fdac;">putBody</span><span>,
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">403</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">""</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">PUT booking id without put body</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">put</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">timestamp</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.status).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">400</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">error</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Bad Request</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">path</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">/booking/${</span><span style="color:#e9fdac;">bookingId</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>我们总是可以添加更多的断言和检查,但现在我的信心已经提高,我觉得如果预订 api 接口引入任何重大变化,我们的自动化应该会提醒我们,这样我们就可以进行调查并探索更大的系统会受到怎样的影响。</p>
<p>总的来说,我们有 19 个检查,在我的本地机器上使用 4 个工作线程运行了 15.9 秒</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-13.png" alt="图片 7" /></p>
<p>如果你读到这里,给自己一个 ⭐️,你应得的!</p>
<hr />
<p>感谢阅读!如果你觉得这很有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我并让我知道,或考虑 <a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想在收件箱中收到更多内容,请在下面订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-2-adding-more-in-depth-checks/</p>
<p>Published Time: 2023-03-27T12:30:37.000Z</p>
如何通过 Playwright 模拟特定响应的 HTTP 网络请求
2023-03-24T00:00:00+00:00
2023-03-24T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-i-intercept-network-traffic-and-save-specific-values-from-http-requests/
<p>我最近遇到一个场景，我想检查一个 UI 元素，但 UI 元素中的数据是一个计数器，而我套件中的其他测试会影响这个计数。我看到有两种方法可以解决这个问题。一种是拦截网络流量并抓取这个值，然后对这个值进行断言，另一种方法是拦截并 mock(自己设置 1 个假的值) 一个我传入的值作为响应。</p>
<p>在本文中，我将演示一个简单的拦截和模拟网络请求的场景。</p>
<p>首先，我们创建一个名为<code>count</code>的变量，并将其设置为 100。这个值可以是任何数字，因为它将被传入测试名称、mockMessageCount 函数，并在断言中使用。</p>
<p>在这个测试中，我在 beforeEach 方法中有很多操作，理想情况下，我会将很多这些操作抽象到一个页面对象中，使测试更加简洁。这个测试假设在<code>test</code>部分开始时你已经登录。在 beforeEach 中，我还调用了<code>mockMessageCount(page, count)</code>方法。此代码调用了测试规范底部列出的异步函数。这个函数可以很容易地存在于不同的文件中，通过从它自己的文件中导出函数并在其他测试用例中导入。下面的代码使用 route 类，对于以"/message/count"结尾的任何 URL，我们将直接 mock 这个接口的返回值。我通过这个接口<a href="https://automationintesting.online/message/count">https://automationintesting.online/message/count</a> mock 返回值。这是不需要身份验证的，所以你可以点击并查看当前的计数。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">mockMessageCount</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">messageCount</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/message/count</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">fulfill</span><span>({
</span><span> status: </span><span style="color:#fdb082;">200</span><span>,
</span><span> body: </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>({ count: </span><span style="color:#e9fdac;">messageCount </span><span>}),
</span><span> })
</span><span> );
</span><span>}
</span></code></pre>
<p>由于我们在 mockMessageCount 中传入了 100 作为计数，因此在 Playwright 测试用例中 mock 了<code>100</code> 这个返回。完整的测试如下所示。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">selectors </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/admin 检查</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">count </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">100</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">selectors</span><span>.</span><span style="color:#8cdaff;">setTestIdAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">data-testid</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 这调用了一个在此页面底部存在的异步函数，它接受页面实例和一个数字
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">mockMessageCount</span><span>(</span><span style="color:#e9fdac;">page</span><span>, </span><span style="color:#e9fdac;">count</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Let me hack!</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Admin panel</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">username</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByTestId</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">submit</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">验证消息计数为${</span><span style="color:#e9fdac;">count</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Logout</span><span style="color:#ffffff;">" </span><span>})).</span><span style="color:#8cdaff;">toHaveText</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Logout</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">messageCountSpan </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">[href*="#/admin/messages"]</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">span</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">messageCountSpan</span><span>).</span><span style="color:#8cdaff;">toHaveText</span><span>(</span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">${</span><span style="color:#e9fdac;">count</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">`</span><span>);
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#6d6d6d;">// 这个函数使用route类，拦截服务器发送的内容，并用我们提供的响应进行满足（模拟！）
</span><span style="color:#ff5e5e;">export async </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">mockMessageCount</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">page</span><span>, </span><span style="font-style:italic;color:#fc9354;">messageCount</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/message/count</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">route</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=>
</span><span> </span><span style="color:#e9fdac;">route</span><span>.</span><span style="color:#8cdaff;">fulfill</span><span>({
</span><span> status: </span><span style="color:#fdb082;">200</span><span>,
</span><span> body: </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>({ count: </span><span style="color:#e9fdac;">messageCount </span><span>}),
</span><span> })
</span><span> );
</span><span>}
</span></code></pre>
<h3 id="playwright-wen-dang-lian-jie">Playwright 文档链接</h3>
<p>查看文档将帮助你更深入地了解 page.route 类的所有可能性。下面是一个简要总结。</p>
<ul>
<li><a href="https://playwright.dev/docs/api/class-page#page-route">页面类 - page.route()</a></li>
<li><a href="https://playwright.dev/docs/api/class-route">Route 类</a></li>
</ul>
<p><code>abort()</code> 终止 route 的请求。</p>
<p><code>continue()</code> 继续 route 的请求，并可选择性地进行覆盖。</p>
<p><code>fallback()</code> 当多个路由匹配给定模式时，它们按照注册顺序的相反顺序运行。这样，最后注册的路由总是可以覆盖所有先前的路由。在下面的示例中，请求将首先由最底层的处理程序处理，然后它会回退到上一个，最后由第一个注册的路由终止。</p>
<p><code>fetch()</code> 执行请求并获取结果，而不进行满足，以便可以修改响应然后进行满足。</p>
<p><code>fulfill()</code> 使用给定的响应满足 route 的请求。</p>
<hr />
<p>示例中的代码可以在这个仓库中找到。<a href="https://github.com/BMayhew/playwright-demo/blob/master/tests/ui/automationintesting.online/messageCount.spec.ts">代码示例</a></p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/how-do-i-intercept-network-traffic-and-save-specific-values-from-http-requests/">URL Source</a></p>
<p>发布时间: 2023-04-24</p>
Playwright API 测试权威指南：第1部分 - API 测试基础之 GET 请求（包括需要登录和不需要登录的接口）
2023-03-13T00:00:00+00:00
2023-03-13T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/the-definitive-guide-to-api-test-automation-with-playwright-part-1-basics-of-api-testing-get/
<p>现在让我们开始构建 Playwright 的 API 测试。首先,我们需要一个可以测试的网站。我有一个不断更新的优秀网站列表。</p>
<p><a href="https://github.com/BMayhew/awesome-sites-to-test-on">GitHub - BMayhew/awesome-sites-to-test-on</a></p>
<p>从这个列表中,我选择了一个我知道有前后端分离,而且在可预见的未来不会挂掉的网站。<a href="https://automationintesting.online/">https://automationintesting.online/</a></p>
<p>这个网站是 <a href="https://www.linkedin.com/in/markwinteringham/">Mark Winteringham</a> 和 <a href="https://www.linkedin.com/in/friendlytester/">Richard Bradshaw</a> 的<a href="https://automationintesting.com/">测试自动化研讨会</a>的配套网站,同时也是《Testing Web APIs》一书中的主要测试系统(这是一本我强烈推荐的好书)。该书使用 Java 提供了 API 自动化的示例,而我将使用 Playwright 构建相同的示例以及书中的其他示例。</p>
<p><a href="https://www.amazon.com/Testing-Web-APIs-Mark-Winteringham/dp/1617299537?crid=2Y3N4STRLVSBA&keywords=api+test+book&qid=1678342103&sprefix=api+test+book%2Caps%2C120&sr=8-9&ufe=app_do%3Aamzn1.fos.006c50ae-5d4c-4777-9bc0-4513d670b6bc&linkCode=ll1&tag=amazonid54611-20&linkId=e32a5140f8d1ddd80cabbc7b471a4d42&language=en_US&ref_=as_li_ss_tl"><img src="https://playwrightsolutions.com/content/images/2023/03/image.png" alt="图片 3" /></a></p>
<p>👆 Testing Web APIs 书籍封面</p>
<p>我不会详细介绍这个网站的功能，但我建议你花些时间用浏览器的开发者工具中的 Network 标签页来探索这个网站。这样做可以帮助你很好地了解不同 API 接口的作用及其在网站 UI 中的使用方式。需要注意的是，我们今天要自动化测试的 API 接口只在网站的管理员页面使用（页面底部有一个链接，用户名：admin | 密码：password）。</p>
<h3 id="yu-ding-api-jie-kou">预订 api 接口</h3>
<p>我们首先关注 restful booker 平台的预订 api 接口。幸运的是,有一个 Swagger 文档(<a href="https://automationintesting.online/booking/swagger-ui/index.html">https://automationintesting.online/booking/swagger-ui/index.html</a>)可以查看可用的 api 接口。</p>
<p>在开始编写代码之前,我总是先通过像 Postman 这样的工具把 api 接口调通。这次我尝试使用 <a href="https://www.thunderclient.com/">Thunder Client</a>,这是一个可以在 VS Code 中使用的扩展。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-1.png" alt="图片 4" /></p>
<p>我首先注意到的是一些 api 接口需要 token/鉴权/登录。</p>
<ul>
<li><a href="https://automationintesting.online/booking/summary?roomid=1">https://automationintesting.online/booking/summary?roomid=1</a> (不需要 token)</li>
<li><a href="https://automationintesting.online/booking/">https://automationintesting.online/booking/</a> (需要 token)</li>
</ul>
<p>经过一番探索，我发现有一个 API 接口（<a href="https://automationintesting.online/auth/swagger-ui/index.html#/">https://automationintesting.online/auth/swagger-ui/index.html#/</a>），可以用来生成令牌。我可以将这个令牌作为 HTTP header 传递到上面的 /booking/ 调用中，格式为 <code>cookie: token={token-goes-here}</code>。API 认证有很多不同的方式，这是构建 API 自动化时首先需要弄清楚的事情之一。这里有一篇不错的文章，介绍了认证中使用的一些不同技术：<a href="https://dev.to/abbeyperini/beginners-guide-to-http-part-5-authentication-3p2p">HTTP 初学者指南第 5 部分 认证</a>。</p>
<h3 id="tan-suo-bei-ce-xi-tong">探索被测系统!!!</h3>
<p>这一步至关重要。如果你对正在测试的系统没有深入了解，请先停下来做这件事。对我来说，我先在 Thunder Client 中建立了一个包含所有 API 接口的集合。在这个过程中，我了解了哪些 API 接口需要认证，哪些 API 接口需要参数，还了解了 JSON 主体未记录的限制（例如：电话号码至少需要 11 个字符，并且在请求主体中需要一个字符串）。下面是我录制的一个交互所有 API 接口的演示会话。我将令牌参数化为一个环境变量，因为我发现必须在每个请求中更新它。这让我意识到，随着测试套件的增长，我肯定会将其保存为 API 自动化中的一个变量！</p>
<p>当我第一次探索应用并开始思考如何自动化所有内容时，一个问题是我们将如何管理测试数据。我注意到一个非常好的事情是，大约每 10 分钟，创建的任何数据都会从数据库中清除，并重新填充一些静态数据（特别是 James Dean 的一个预订，入住日期在过去，即 <code>2022-02-01</code>）。在本教程中，我们将基于这些数据创建大部分断言，因为我们假设它们将始终可用。如果不是这样，我们每次都需要创建数据来进行断言（我们将在后面的教程中讲到）。</p>
<h3 id="rang-wo-men-bian-xie-di-yi-ge-yong-li">让我们编写第一个用例!</h3>
<p>创建一个目录来存放你的测试套件。如果你是第一次做这件事情，你可以创建一个新文件夹。假设你已经安装了 node,进入空文件夹所在的目录,让我们运行</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> init playwright@latest
</span></code></pre>
<p>运行这条命令之后，工具会问你一些问题,我的回答是:</p>
<ol>
<li>Typescript</li>
<li>tests</li>
<li>n (我们现在还不需要 GitHub actions 文件。)</li>
<li>n (我们不需要浏览器,我们在测试 API!)</li>
</ol>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-2.png" alt="图片 5" /></p>
<p>命令完成后,你的主目录中应该有一个 <code>tests</code> 和 <code>tests-examples</code> 文件夹,以及 <code>package.json</code> 和 <code>playwright.config.ts</code>。</p>
<p>首先,我们将 <code>playwright.config.ts</code> 改动一下</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">defineConfig</span><span>, </span><span style="color:#e9fdac;">devices </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">config </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">dotenv</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">config</span><span>();
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#8cdaff;">defineConfig</span><span>({
</span><span> use: {
</span><span> baseURL: process.env.URL,
</span><span> ignoreHTTPSErrors: </span><span style="color:#ff8942;">true</span><span>,
</span><span> trace: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">retain-on-failure</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> retries: </span><span style="color:#fdb082;">0</span><span>,
</span><span> reporter: [[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">list</span><span style="color:#ffffff;">"</span><span>], [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">"</span><span>]],
</span><span>});
</span></code></pre>
<p>安装 <code>dotenv</code>,这将允许我们在项目根目录使用 .env 文件来存储环境变量。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">npm</span><span> install dotenv</span><span style="font-style:italic;color:#fc9354;"> --save
</span></code></pre>
<p>接下来删除 <code>/tests-examples/</code> 目录</p>
<p>然后我们将修改 <code>example.spec.ts</code> 来实现一个最简单的 API GET 请求。官方 <a href="https://playwright.dev/docs/test-api-testing#writing-api-test">API 测试文档</a>描述了两种发起 API 调用的方法,内置的 <code>request</code> fixture(我们将在下面使用)或使用 <code>request context</code>。我们将重点使用 <code>request</code> fixture 进行测试,它可以在用例内部使用。当我们需要在测试用例外进行 API 调用时(从测试块外的另一个文件中的函数),我们将使用 <code>request context</code>。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://automationintesting.online/booking/summary?roomid=1</span><span style="color:#ffffff;">"
</span><span> );
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">body</span><span>));
</span><span>});
</span></code></pre>
<p>这个测试将对 发送 1 个不需要鉴权的 GET 请求，地址是 summary?roomid=1。我目前将响应保存到 <code>response</code> 变量中,它代表 <a href="https://playwright.dev/docs/api/class-apiresponse">APIResponse</a> 类。这使我们可以访问响应体对象、JSON 格式的响应体、文本格式的响应体、响应头、状态码、状态文本、URL,以及一个名为 <code>.ok()</code> 的方法,如果状态码在 200-299 之间,它将返回 true。</p>
<p>对于我们的第一个测试,我只对 <code>response.status()</code> 进行断言,期望它为 200。我还展示了如何判断 JSON 返回值里的内容,因为我们将希望对它进行一些断言。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-3.png" alt="图片 6" /></p>
<p>简单 GET 请求的输出 👆</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-6.png" alt="图片 7" /></p>
<p>耶!我们做到了 👆</p>
<h3 id="rang-wo-men-zheng-li-yi-xia-bing-tian-jia-yi-xie-geng-hao-de-duan-yan">让我们整理一下并添加一些更好的断言</h3>
<p>首先在根目录创建一个 <code>.env</code> 文件，然后加入这一行。这一行的作用是设置了 URL 个环境变量作为接口测试的 BaseURL</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">URL</span><span style="color:#ff5e5e;">=</span><span style="color:#fbe3bf;">https://automationintesting.online/
</span></code></pre>
<p>现在我们可以重构我们的 spec 文件了。</p>
<ul>
<li>我想按 api 接口组织我的 spec,所以我要在测试目录中创建一个 <code>/booking/</code> 文件夹。</li>
<li>将 <code>example.spec.ts</code> 重命名为 <code>booking.get.spec.ts</code></li>
<li>更新 spec,添加一个 describe 块,一个更好的测试名称,以及一些额外的断言。</li>
<li>最后再添加一个辅助函数 isValidDate() 来验证返回的入住和退房日期是否为真实日期。</li>
</ul>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid={id}</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">isValidDate</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">date</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#fbe3bf;">Date</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#e9fdac;">date</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">true</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">false</span><span>;
</span><span> }
</span><span>}
</span></code></pre>
<h3 id="shi-xian-geng-duo-get-api-jie-kou-bing-shi-xian-zi-dong-jian-cha">实现更多 GET api 接口并实现自动检查</h3>
<p>接下来的两个 GET api 接口需要通过保存为 cookie 的 token 进行认证,所以我们必须将 cookie 放到 header 里才能成功发起调用。剩下的两个接口是 <code>GET /booking</code> 和 <code>GET /booking/{id}</code>。我回到 thunder client 把这两个接口调通了,这也可以通过用例本身完成。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-7.png" alt="图片 8" /></p>
<p>⬆️ 对 booking/ 进行 GET 调用时 Thunder Client 的响应</p>
<p>修改现有的代码，我首先在第 4 行的 <code>describe</code> 块内添加了一个新变量 <code>savedToken</code>，这是一个我们将在下一步中以编程方式设置的值，但为了测试，我先硬编码了一个值。你可以看到我们的 GET 请求现在有了一个额外的 header 选项，我们在其中传递了一个 cookie，值为 <code>token=${savedToken}</code>。在 JavaScript 中，当使用 ` 定义字符串时，js 允许你在 ${} 内添加代码，这称为插值，在编写自动化测试时非常方便。我们还将对我们期望存在的数据进行断言，另外请注意，我们对返回的 response 中的每个值都进行了断言。如果我们假设所有数据都应该返回，这通常是一个好的做法。</p>
<p>在此过程中，我还发现了一个应该报告给开发人员的 bug，在 <code>booking/summary</code> 调用中，<code>bookingDates</code> 是驼峰式的，而在 <code>booking/</code> 的响应中，<code>bookingdates</code> 对象是全小写的。这虽然是个小问题，但通过自动化这部分内容，很容易注意到这些差异。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">savedToken </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">r2dBKvt8rCo5p74s</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET all bookings with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">savedToken</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">` </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">James</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dean</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span> </span><span style="color:#6d6d6d;">//booking/{id}
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">isValidDate</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">date</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#fbe3bf;">Date</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#e9fdac;">date</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">true</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">false</span><span>;
</span><span> }
</span><span>}
</span></code></pre>
<p>下一步，我们将为带详细信息的 GET booking by id 接口添加自动化用例，即 GET booking/1。为此，我复制了前面的测试并开始修改，以匹配我在 Thunder Client 中看到的内容。首先，这里没有 bookings 数组，所以我从每个断言中删除了所有这些，并移动了 toBeGreaterThanOrEqual() 断言。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">savedToken </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">r2dBKvt8rCo5p74s</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking summary with specific room id</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/summary?roomid=1</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingDates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET all bookings with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">savedToken</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">` </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>.length).</span><span style="color:#8cdaff;">toBeGreaterThanOrEqual</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">James</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dean</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookings</span><span>[</span><span style="color:#fdb082;">0</span><span>].</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET booking by id with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/1</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">savedToken</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">` </span><span>},
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">json</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">roomid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">1</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">firstname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">James</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">lastname</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dean</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">depositpaid</span><span>).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkin</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#8cdaff;">isValidDate</span><span>(</span><span style="color:#e9fdac;">body</span><span>.</span><span style="color:#e9fdac;">bookingdates</span><span>.</span><span style="color:#e9fdac;">checkout</span><span>)).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ff8942;">true</span><span>);
</span><span> });
</span><span>});
</span><span>
</span><span style="color:#ff5e5e;">export </span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">isValidDate</span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">date</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">string</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#fbe3bf;">Date</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#e9fdac;">date</span><span>)) {
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">true</span><span>;
</span><span> } </span><span style="color:#ff5e5e;">else </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#ff8942;">false</span><span>;
</span><span> }
</span><span>}
</span></code></pre>
<p>现在我们有了一组很好的用例,测试了预订 API 下三个 GET 调用的正常路径场景。接下来,我们在 beforeAll() 钩子里增加 1 个请求，然后保存 鉴权要用到的 cookie 的值。</p>
<p>我首先创建了一个 post 请求,将用户名和密码传入 data,并检查 <a href="https://playwright.dev/docs/api/class-apiresponse">APIResponse</a> 返回的响应。我使用 VS Code 的 Playwright 调试器来做这件事,它在编写代码和深入了解 Playwright 和 JavaScript 的工作原理时非常有用。</p>
<p>通过对 response header 的研究,我决定直接使用 <code>response.headers()</code> 来拿到响应返回的 header，然后进一步拿到 cookie 的值。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/ GET requests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">""</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeAll</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">auth/login</span><span style="color:#ffffff;">"</span><span>, {
</span><span> data: {
</span><span> username: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">admin</span><span style="color:#ffffff;">"</span><span>,
</span><span> password: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">password</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">200</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">headers </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">headers</span><span>();
</span><span> </span><span style="color:#e9fdac;">cookies </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">headers</span><span>[</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">set-cookie</span><span style="color:#ffffff;">"</span><span>];
</span><span> });
</span><span style="color:#ff5e5e;">...
</span></code></pre>
<p>如你所见，我在 <code>describe</code> 块内创建了变量，然后在 <code>beforeAll</code> 块中对其进行设置。这是我和团队一直遵循的最佳实践，因为这样可以在所有测试中重复使用这些变量。请注意，我使用了 <code>let</code> 关键字声明变量，这样可以让变量在 <code>beforeAll</code> 块中被修改或设置。</p>
<p>现在我们有了 cookies 值，里面的信息很多，但我们只关注 token,我们可以重构我们的代码来实现这一点。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">// from
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET all bookings with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#ffffff;">`</span><span style="color:#fbe3bf;">token=${</span><span style="color:#e9fdac;">savedToken</span><span style="color:#fbe3bf;">}</span><span style="color:#ffffff;">` </span><span>},
</span><span> });
</span><span>
</span><span style="color:#6d6d6d;">// to
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">GET all bookings with details</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">get</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">booking/</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: { cookie: </span><span style="color:#e9fdac;">cookies </span><span>},
</span><span> });
</span></code></pre>
<p>为确保我们的代码不会出现偶发性故障,我将运行 <code>npx playwright test --repeat-each=10</code>命令,这将使每个测试运行 10 次,然后很幸运 💥 它们全都通过了!</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/03/image-8.png" alt="图片 9" /></p>
<p>测试结果 30 个通过 👆</p>
<hr />
<p>可以在<a href="https://github.com/playwrightsolutions/playwright-api-test-demo">这里</a>找到代码的仓库和分支(api-part1)。</p>
<p>在下一部分(第 2 部分)中,我们将继续处理这个示例代码,为 GET booking api 接口添加更多断言,并覆盖其他的预订 api 接口。我们还将重构一些代码,将可重用的方法放在代码库的单独区域,使一切整洁有序。</p>
<p>非常感谢 <a href="https://www.linkedin.com/in/joel-black-1344a267/">Joel Black</a> 和 <a href="https://www.linkedin.com/in/sgapanovich/">Sergei Gapanovich</a>,没有他们的影响、反馈和代码审查,这些例子会糟糕得多 😅。</p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想在收件箱中收到更多内容,请在下方订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/the-definitive-guide-to-api-test-automation-with-playwright-part-1-basics-of-api-testing-get/</p>
<p>发布时间: 2023-03-13</p>
如何playwright去检查按钮或者控件是否被禁用
2023-02-27T00:00:00+00:00
2023-02-27T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/utilizing-the-tohaveattribute-method-when-making-assertions-in-playwright-to-check-if-a-button-is-enabled-or-disabled/
<p>简单来说很多情况下，我们需要在用例里判断某个按钮是否处于被禁用(灰掉)的状态。</p>
<p>在 UI 层进行测试时，您可能希望根据用户的操作验证按钮或元素是否处于特定状态。我经常遇到的一个常见场景是登录、填写地址信息或输入信用卡详细信息。您不希望在必填字段中没有值时，用户就有机会点击提交按钮，通常这些按钮会被禁用。</p>
<p>在这些情况下，我发现构建测试以验证某些按钮是否正确处于禁用（不可点击状态）是很有帮助的。</p>
<p>下面是一个通过 CodePen 的基本示例，我们将针对其编写自动化测试。</p>
<p>展示禁用按钮直到输入文本的 CodePen 示例。</p>
<p>对于断言，我们将使用 toHaveAttribute() 方法。</p>
<p><code>expect({locator}).toHaveAttribute("{name}", "{value}")</code></p>
<p>在我们的示例中，定位器将是我们要检查是否禁用的按钮，属性名称将是 "disabled"，值将是 "true"。根据您正在测试的站点中禁用属性的实现方式，可能禁用只是一个没有值的属性，如果是这种情况，值实际上是一个空字符串。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">// 如果 DOM 看起来像这样
</span><span style="color:#ff5e5e;"><</span><span style="color:#e9fdac;">button class</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">" </span><span style="color:#e9fdac;">disabled</span><span style="color:#ff5e5e;">></span><span style="color:#e9fdac;">Click Me</span><span style="color:#ff5e5e;"></</span><span style="color:#e9fdac;">button</span><span style="color:#ff5e5e;">>
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>({</span><span style="color:#e9fdac;">locator</span><span>}).</span><span style="color:#8cdaff;">toHaveAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">disabled</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">""</span><span>)
</span><span>
</span><span style="color:#6d6d6d;">// 如果 DOM 看起来像这样
</span><span style="color:#ff5e5e;"><</span><span style="color:#e9fdac;">button class</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">" </span><span style="color:#e9fdac;">disabled</span><span style="color:#ff5e5e;">=</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span style="color:#ff5e5e;">></span><span style="color:#e9fdac;">Click Me</span><span style="color:#ff5e5e;"></</span><span style="color:#e9fdac;">button</span><span style="color:#ff5e5e;">>
</span><span>
</span><span style="color:#8cdaff;">expect</span><span>({</span><span style="color:#e9fdac;">locator</span><span>}).</span><span style="color:#8cdaff;">toHaveAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">disabled</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span>)
</span></code></pre>
<p>现在让我们看看完整的脚本。请注意，由于我们使用 CodePen，为了与生成的 HTML 元素交互，我们需要查看名为 "CodePen" 的 iFrame，所有元素都在这里。你还会注意到，在我的示例中，我为我们要交互的元素创建了变量，如果我们想创建多种场景，这些变量可以很容易地添加到页面对象中。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://codepen.io/bmayhew/pen/eYLdwVg</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 创建我们将要交互的元素的变量
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">codePenFrame </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[name="CodePen"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">textInput </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">codePenFrame</span><span>.</span><span style="color:#8cdaff;">getByPlaceholder</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fill me</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">codePenFrame</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Click Me</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">result </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">codePenFrame</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id=result</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Disabled 属性是活动的
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">button</span><span>).</span><span style="color:#8cdaff;">toHaveAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">disabled</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">textInput</span><span>.</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Testing 1234</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#e9fdac;">keyboard</span><span>.</span><span style="color:#8cdaff;">press</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Tab</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// Disabled 属性不再活动
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">button</span><span>).</span><span style="color:#e9fdac;">not</span><span>.</span><span style="color:#8cdaff;">toHaveAttribute</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">disabled</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">true</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">button</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">result</span><span>).</span><span style="color:#8cdaff;">toHaveText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">You clicked the button</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p>以下是关于定位器断言的文档链接，因为还有许多其他方法可以验证 DOM 中的元素。</p>
<p><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-attribute">LocatorAssertions</a></p>
<h2 id="lai-yuan">来源</h2>
<p><strong>来源链接</strong>: <a href="https://playwrightsolutions.com/utilizing-the-tohaveattribute-method-when-making-assertions-in-playwright-to-check-if-a-button-is-enabled-or-disabled/">Utilizing the toHaveAttribute() method when making assertions in Playwright to check if a button is enabled or disabled</a></p>
<p><strong>发布时间</strong>: 2023-02-27</p>
如何使用 Playwright 定位元素的父级?
2023-02-13T00:00:00+00:00
2023-02-13T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-you-locate-the-parent-of-an-element-with-playwright/
<p>本文将介绍 5 种定位父级元素的方法!</p>
<p>UI 自动化测试中的一个常见挑战是,如何访问或控制网页上没有唯一标识符的元素。以下面的<a href="https://the-internet.herokuapp.com/challenging_dom">Challenging DOM</a>页面为例,定位编辑按钮并不是一件轻松的任务。页面上有至少 10 个不同的编辑按钮,我们不能仅仅简单的点击带有"edit"文本的链接。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/02/image-4.png" alt="图片 1" /></p>
<p>首先,我们需要在页面上找到一个可以交互的、在 DOM 中保持一致的唯一标识。在典型的 UI 测试中,当你需要验证表格或网格中的数据时,其父元素通常会有某种唯一标识符。在本例中,我将使用"Adipisci5"作为唯一标识符。我将演示几种不同的方法来与包含"Adipisci5"的行中的 edit 按钮进行交互。以下是页面上 HTML 的截图。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/02/image-5.png" alt="图片 2" /></p>
<p>我们的目标是找到包含文本"Adipisci5"的数据单元格<td>,然后找到完整的行(如上图高亮显示),最后点击编辑链接。接下来,我将展示几种不同的方法来获取父级行<tr>。</p>
<hr />
<h2 id="shi-yong-playwright-locator-de-has-xuan-xiang">使用 Playwright locator 的 has 选项</h2>
<p>第一个例子使用了 locator 类的 <code>has</code> 选项。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">tr</span><span style="color:#ffffff;">"</span><span>, { has: </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">text="Adipisci5"</span><span style="color:#ffffff;">'</span><span>) });
</span></code></pre>
<p><a href="https://playwright.dev/docs/api/class-page#page-locator">locator</a></p>
<h2 id="css-tong-guo-wen-ben-pi-pei">CSS: 通过文本匹配</h2>
<p>这个例子利用了 Playwright 内置的 CSS 文本匹配功能。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">css=tr:has-text("Adipisci5")</span><span style="color:#ffffff;">'</span><span>);
</span></code></pre>
<p><a href="https://playwright.dev/docs/other-locators#css-matching-by-text">Other Locators</a></p>
<h3 id="shi-yong-getbyrole-he-accessible-name">使用 getByRole 和 accessible name</h3>
<p>这个例子使用了新发布的 getByRole 方法,通过 name 选项来查找唯一标识符。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Adipisci5</span><span style="color:#ffffff;">" </span><span>});
</span></code></pre>
<p><a href="https://playwright.dev/docs/api/class-page#page-get-by-role">getByRole</a></p>
<h2 id="shi-yong-getbyrole-he-filter-fang-fa">使用 getByRole 和 filter() 方法</h2>
<p>这是一种类似上面的方法,但我们使用了 .filter() 方法,它非常强大,因为你还可以在 hasText 部分使用正则表达式(参见第二个例子)。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">filter</span><span>({ hasText: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Adipisci5</span><span style="color:#ffffff;">" </span><span>});
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">filter</span><span>({ hasText: </span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Adi</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">ci5</span><span style="color:#ffffff;">/ </span><span>});
</span></code></pre>
<p><a href="https://playwright.dev/docs/locators#filtering-locators">Filter</a></p>
<h2 id="shi-yong-xpath-locator">使用 xpath locator("..")</h2>
<p>这种方法可行,而且是获取父元素的一种快速方法。总的来说,我不太喜欢在代码中使用 xpath,但这是我唯一允许使用的 xpath 场景。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=Adipisci5</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">xpath=..</span><span style="color:#ffffff;">"</span><span>);
</span></code></pre>
<p><img src="https://playwrightsolutions.com/content/images/2023/02/xpath.png" alt="图片 11" /></p>
<p><a href="https://playwright.dev/docs/other-locators#parent-element-locator">other locators</a></p>
<p>下面是一个完整的例子,展示了使用不同方法访问父元素,然后用这些父元素来点击选定行中的编辑链接,并通过对 URL 来断言来确认编辑按钮被点击。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Challenging DOM</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">beforeEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://the-internet.herokuapp.com/challenging_dom</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 Playwright locator 的 has 选项查找父元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">tr</span><span style="color:#ffffff;">"</span><span>, { has: </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">text="Adipisci5"</span><span style="color:#ffffff;">'</span><span>) })
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">edit</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">#edit</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 has-text 查找父元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">css=tr:has-text("Adipisci5")</span><span style="color:#ffffff;">'</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=edit</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">#edit</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 getByRole locator 和 accessible name 查找父元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Adipisci5</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">edit</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">#edit</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 getByRole locator 和带正则表达式的 filter 查找父元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span>({
</span><span> </span><span style="color:#e9fdac;">page</span><span>,
</span><span> }) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">row</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">filter</span><span>({ hasText: </span><span style="color:#ffffff;">/</span><span style="color:#fbe3bf;">Ad</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">sci5</span><span style="color:#ffffff;">/ </span><span>})
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">edit</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">#edit</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 xpath 查找父元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=Adipisci5</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">..</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">xpath='text=edit'</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">#edit</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用分步骤的 xpath 查找父元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">cell </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=Adipisci5</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">cell</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">..</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">editLink </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">row</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=edit</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">editLink</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">#edit</span><span style="color:#ffffff;">/</span><span>);
</span><span> });
</span><span>});
</span></code></pre>
<p>如你所见,Playwright 在定位和处理父元素时提供了极大的灵活性。如果我遗漏了什么,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我并告诉我。</p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,请在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想收到更多内容直接发送到你的收件箱,请在下方订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/how-do-you-locate-the-parent-of-an-element-with-playwright/</p>
<p>发布时间: 2023-02-13</p>
如何使用 Playwright 测试含页面重定向网页的网站?
2023-02-06T00:00:00+00:00
2023-02-06T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-i-test-a-website-that-has-a-page-redirect-with-playwright/
<p>在测试各种 Web 应用时,你不可避免的会遇到链接点击或页面操作导致重定向的情况。这种重定向可能通过 JavaScript 或 HTTP 请求实现。如果你想了解更多关于重定向实现方式的详细信息,可以参考<a href="https://www.semrush.com/blog/redirects/">这篇指南</a>。</p>
<h2 id="dai-zhong-ding-xiang-gong-neng-de-shi-li-wang-zhan">带重定向功能的示例网站</h2>
<p>在这个演示中,我创建了一个简单的 HTML 页面,其中包含一个"重定向"按钮。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/02/image.png" alt="图片 1" /></p>
<p>👆 简单的带重定向按钮的网页</p>
<p>点击该按钮后,页面会添加一段文本,开始重定向过程,并添加一个点击后会弹出提示框的"订阅"按钮。以下是实现这个功能的代码。你可以在这个 GitHub 仓库的 public 文件夹中找到完整代码:<a href="https://github.com/BMayhew/new-playwright-init/tree/master/public">https://github.com/BMayhew/new-playwright-init/tree/master/public</a></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#8cdaff;">redirect</span><span style="color:#ffffff;">() </span><span>{
</span><span> </span><span style="color:#6d6d6d;">// 重定向前显示消息
</span><span> document.</span><span style="color:#6699cc;">write</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">4秒后将重定向到新的URL...</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 4秒后重定向到新页面
</span><span> </span><span style="color:#6699cc;">setTimeout</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#ffffff;">() </span><span>{
</span><span> window.location </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwrightsolutions.com/</span><span style="color:#ffffff;">"</span><span>;
</span><span> }, </span><span style="color:#fdb082;">4000</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">button </span><span style="color:#ff5e5e;">= </span><span>document.</span><span style="color:#6699cc;">createElement</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#e9fdac;">button</span><span>.</span><span style="color:#e9fdac;">innerText </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">订阅</span><span style="color:#ffffff;">"</span><span>;
</span><span> </span><span style="color:#e9fdac;">button</span><span>.</span><span style="color:#6699cc;">addEventListener</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">click</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">alert</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">你点击了订阅按钮!</span><span style="color:#ffffff;">"</span><span>);
</span><span> });
</span><span> document.body.</span><span style="color:#6699cc;">appendChild</span><span>(</span><span style="color:#e9fdac;">button</span><span>);
</span><span>}
</span></code></pre>
<h2 id="yi-ge-shi-bai-de-playwright-ce-shi-yong-li">一个失败的 Playwright 测试用例</h2>
<p>为了使这个练习更有趣,我在重定向页面上也添加了一个"订阅"按钮。现在,我们编写一个测试用例:访问主页,点击重定向按钮,等待 4 秒,然后页面重定向到 PlaywrightSolutions.com 主页。之后,我们要点击"订阅"按钮,并开始填写订阅信息。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">访问主页并完成订阅</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://127.0.0.1:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=重定向</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=订阅</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">popup </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id=input-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=注册</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=输入你的邮箱地址</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#e9fdac;">toBeVisible</span><span>;
</span><span>});
</span></code></pre>
<p>然而,当我运行这段代码时,测试并没有按预期进行。它点击了重定向之前的页面上的"订阅"按钮,而不是 PlaywrightSolutions.com 页面上也就是重定向之后的页面上的"订阅"按钮。因此,脚本在执行 <code>await popup.locator("id=input-name").fill("test");</code> 这一步时失败了。
<img src="https://playwrightsolutions.com/content/images/2023/02/image-1.png" alt="图片 2" /></p>
<h2 id="ce-shi-chao-shi-cuo-wu-xiang-qing">测试超时错误详情</h2>
<p>出现这个问题的原因是,一旦点击"重定向"按钮,重定向页面上就出现了一个匹配"订阅"文本的元素。测试脚本立即点击了这个元素,触发了一个警告框。当重定向最终完成时,已经没有可以输入名字的弹出窗口了。</p>
<h2 id="page-waitforurl-jie-jue-fang-an-tui-jian-zuo-fa">page.waitForURL 解决方案(推荐做法)</h2>
<p>解决这个问题有几种方法,但最简单有效的是使用 page 对象的 <a href="https://playwright.dev/docs/api/class-page#page-wait-for-url">waitForURL 方法</a>。我们只需在点击重定向按钮之后,点击订阅按钮之前添加这个等待。waitForURL 命令可以使用完整 URL、glob 模式或正则表达式。更多细节可以查阅上面链接的文档。这个解决方案在使用 <a href="https://playwrightsolutions.com/in-playwright-test-is-there-an-easy-way-to-loop-the-test-multiple-times-to-check-for-flakiness/"><code>--repeat-each=10</code></a> <a href="https://playwrightsolutions.com/in-playwright-test-is-there-an-easy-way-to-loop-the-test-multiple-times-to-check-for-flakiness/">参数</a>多次运行时表现稳定。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">访问主页并完成订阅 - 使用 waitForURL</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://127.0.0.1:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=重定向</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForURL</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwrightsolutions.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=订阅</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">popup </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id=input-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=注册</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=输入你的邮箱地址</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#e9fdac;">toBeVisible</span><span>;
</span><span>});
</span></code></pre>
<h2 id="shi-yong-page-waitforurl-he-javascript-promise">使用 page.waitForURL 和 JavaScript Promise</h2>
<p>虽然代码稍长,但在遇到复杂情况时,你可以使用下面这种基于 Promise 的方法,这也是<a href="https://playwright.dev/docs/navigations#multiple-navigations">官方文档</a>中提到的。需要注意的是,曾经有一个名为 <code>waitForNavigation()</code> 的方法,但由于存在竞态条件问题,现已被弃用。使用下面的 Promise 方法时,我发现还需要在点击"订阅"按钮前添加 <code>page.waitForLoadState()</code>。相比之下,单独使用 <code>await page.waitForURL()</code> 的优势在于它内置了导航等待,默认会等到 <code>load</code> 事件触发才认为操作完成。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">访问主页并完成订阅 - 使用 Promise</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://127.0.0.1:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 在点击之前开始等待导航,注意这里没有 await
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">navigationPromise </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForURL</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwrightsolutions.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#6d6d6d;">// 触发导航的操作
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=重定向</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">navigationPromise</span><span>;
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForLoadState</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">networkidle</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=订阅</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">popup </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id=input-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=注册</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=输入你的邮箱地址</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#e9fdac;">toBeVisible</span><span>;
</span><span>});
</span></code></pre>
<p>另一种使用 <code>Promise.all([])</code> 的方法,它会等待数组中所有的 Promise 都 resolve 后才继续:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">访问主页并完成订阅 - 使用 Promise.all</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://127.0.0.1:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">all</span><span>([
</span><span> </span><span style="color:#6d6d6d;">// 重要:在点击之前设置等待导航
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForURL</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwrightsolutions.com/</span><span style="color:#ffffff;">"</span><span>),
</span><span> </span><span style="color:#6d6d6d;">// 触发导航的操作
</span><span> </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=重定向</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>(),
</span><span> ]);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForLoadState</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">networkidle</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=订阅</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">popup </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id=input-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=注册</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=输入你的邮箱地址</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#e9fdac;">toBeVisible</span><span>;
</span><span>});
</span></code></pre>
<p><img src="https://playwrightsolutions.com/content/images/2023/02/image-2.png" alt="图片 3" /></p>
<p>👆 梗图，开个玩笑</p>
<h2 id="shi-yong-expect-topass-de-fan-mo-shi-zuo-fa">使用 expect().toPass() 的反模式做法</h2>
<p>首先要强调,请不要在实际项目中这样做。我展示这种方法只是为了说明它的可能性。在最近的一个版本中,Playwright 引入了 .toPass() 方法,允许在特定的断言块内进行重试。你可以利用这个特性来等待 page.url() 变为期望的值。为了减少这种方法的不稳定性,我不得不添加 <code>await page.waitForLoadState("networkidle");</code> 这一行,它会等待网络活动至少停止 500ms 才继续。但这种方法无法保证在继续之前 DOM 和所有网络请求都已完成。再次强调,这种方法不推荐使用,仅作为技术探讨!</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">访问主页并完成订阅 - 反模式</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">http://127.0.0.1:3000</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=重定向</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">url</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://playwrightsolutions.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> }).</span><span style="color:#8cdaff;">toPass</span><span>();
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">waitForLoadState</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">networkidle</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=订阅</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">popup </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">iframe[title="portal-popup"]</span><span style="color:#ffffff;">'</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">id=input-name</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#8cdaff;">fill</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">test</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=注册</span><span style="color:#ffffff;">"</span><span>).</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">popup</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">text=输入你的邮箱地址</span><span style="color:#ffffff;">"</span><span>)).</span><span style="color:#e9fdac;">toBeVisible</span><span>;
</span><span>});
</span></code></pre>
<p>我希望这些方法能帮助你更轻松地处理网页重定向测试。如果你已经读到这里,那真是太棒了! 🙌 不过,我还是建议你重点关注 <code>page.waitForURL 解决方案</code> 部分的第一种方法,这才是最佳实践。</p>
<hr />
<p>感谢你的阅读!如果你觉得这篇文章有帮助,欢迎在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上与我联系,或者考虑<a href="https://ko-fi.com/butchmayhew">请我喝杯咖啡</a>。如果你想接收更多类似的内容,可以在下方订阅我们的通讯。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/how-do-i-test-a-website-that-has-a-page-redirect-with-playwright/">URL 来源</a></p>
<p>发布时间:2023 年 2 月 6 日 13:30:22</p>
如何获取 Playwright 测试运行后所有通过或失败测试的详细信息
2023-01-23T00:00:00+00:00
2023-01-23T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/is-it-possible-to-get-a-list-of-all-passed-or-failed-tests-after-a-playwright-test-run/
<p>在我刚开始使用 Playwright 时,我曾尝试回答这个问题,但一直找不到合适的解决方案。幸运的是,Playwright 团队开发了 reporter 功能,让我们可以轻松创建<a href="https://playwright.dev/docs/test-reporters#custom-reporters">自定义报告</a>。</p>
<p>这促使我开发了一个自定义 reporter, 它可以输出我需要的特定信息,并以可在测试运行后用 json 展示，json 文件是可以解析的，这为其他系统的集成提供了便利。我的目标是创建一个 JSON 文件,包含运行时长、最终状态(通过/失败),以及通过、失败和跳过的测试列表。有了这些信息,我就可以轻松地以编程方式重试任何失败的测试,并将失败的测试列表作为 Slack 通知集成的一部分。</p>
<p>这让我兴奋地宣布:我创建了一个 NPM 包,可以为你完成这项工作!</p>
<p><a href="https://www.npmjs.com/package/playwright-json-summary-reporter">playwright-json-summary-reporter</a></p>
<p>在你的 Playwright 项目中使用这个包非常简单。</p>
<h2 id="an-zhuang">安装</h2>
<p>在你的 Playwright 目录下运行以下命令来安装这个包。这会将依赖项添加到你的 <code>package.json</code> 文件中。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">$</span><span> npm install playwright-json-summary-reporter</span><span style="font-style:italic;color:#fc9354;"> --save-dev
</span></code></pre>
<h2 id="shi-yong-fang-fa">使用方法</h2>
<p>现在修改你的 <code>playwright.config.ts</code> 文件,加入这个自定义报告器:</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span> reporter: [
</span><span> [</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">playwright-json-summary-reporter</span><span style="color:#ffffff;">'</span><span>],
</span><span> [</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">html</span><span style="color:#ffffff;">'</span><span>], </span><span style="color:#6d6d6d;">// 其他reporter
</span><span> [</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">dot</span><span style="color:#ffffff;">'</span><span>]
</span><span> ],
</span></code></pre>
<p>现在当你运行测试时,应该会在目录根目录下生成一个新的 <code>summary.json</code> 文件。下面是该文件的一个示例。</p>
<pre data-lang="json" style="background-color:#191919;color:#f8f8f2;" class="language-json "><code class="language-json" data-lang="json"><span style="color:#6d6d6d;">// summary.json
</span><span>
</span><span>{
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">durationInMS</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">41565</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>: [
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/create-user-account.spec.ts:34:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/create-user-account.spec.ts:55:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/delete-user-account.spec.ts:47:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/login.spec.ts:12:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/login.spec.ts:37:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/login.spec.ts:61:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">api/login.spec.ts:84:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/codepen/copyToClipboard.spec.ts:5:1</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/codepen/copyToClipboard.spec.ts:17:1</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/internet.app/selectPresentElement.spec.ts:10:1</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/internet.app/selectPresentElement.spec.ts:35:1</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/grep.spec.ts:4:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/grep.spec.ts:9:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/loginUser.spec.ts:22:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/loginUserNoImages.spec.ts:23:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/loginUser.spec.ts:37:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/loginUserNoImages.spec.ts:40:3</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">ui/registerUser.spec.ts:17:1</span><span style="color:#ffffff;">"
</span><span> ],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">skipped</span><span style="color:#ffffff;">"</span><span>: [],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">failed</span><span style="color:#ffffff;">"</span><span>: [],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">warned</span><span style="color:#ffffff;">"</span><span>: [],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">timedOut</span><span style="color:#ffffff;">"</span><span>: [],
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">status</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">passed</span><span style="color:#ffffff;">"</span><span>,
</span><span> </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">startedAt</span><span style="color:#ffffff;">"</span><span>: </span><span style="color:#fdb082;">1674431153277
</span><span>}
</span></code></pre>
<p>有了这个文件,我现在可以使用命令行工具如 <code>cat</code> 和 <code>jq</code> 来解析文件并从命令行获取数据。下面的命令会获取失败数组中的所有值,并将换行符替换为空格,这样你就有了一个可以用来重新运行失败测试的文件列表。</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#e9fdac;">failed</span><span style="color:#ff5e5e;">=</span><span>`</span><span style="color:#e9fdac;">cat</span><span> summary.json </span><span style="color:#ff5e5e;">| </span><span style="color:#e9fdac;">jq</span><span style="font-style:italic;color:#fc9354;"> -r </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">.failed[]</span><span style="color:#ffffff;">' </span><span style="color:#ff5e5e;">| </span><span style="color:#e9fdac;">tr </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">\n</span><span style="color:#ffffff;">' ' '</span><span>`
</span></code></pre>
<p>这也让我们可以把 Playwright 的执行结果集成道其他应用，比如 slack 通知!</p>
<p>如果我提供的方法不够有用,你只是想要一个包含测试运行详情的纯文本文件,你可以看看 <a href="https://www.linkedin.com/in/stephenkilbourn/">Stephen Kilbourn</a> 的报告摘要包。</p>
<p><a href="https://www.npmjs.com/package/@skilbourn/playwright-report-summary">@skilbourn/playwright-report-summary</a></p>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,可以在 <a href="https://www.linkedin.com/mynetwork/discovery-see-all/?usecase=PEOPLE_FOLLOWS&followMember=butchmayhew">LinkedIn</a> 上联系我,或者考虑<a href="https://ko-fi.com/butchmayhew">给我买杯咖啡</a>。如果你想获得更多内容直接发送到你的收件箱,请在下方订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/is-it-possible-to-get-a-list-of-all-passed-or-failed-tests-after-a-playwright-test-run/</p>
<p>发布时间: 2023-01-23T13:30:50.000Z</p>
如何使用 playwright 访问浏览器的剪切板
2023-01-09T00:00:00+00:00
2023-01-09T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-i-access-the-browser-clipboard-with-playwright/
<p>最近我遇到了一个问题，我想与我正在测试的系统中的一个具有“复制到剪贴板”功能的部分交互。这具体是一个我可以生成然后分享的链接。这个部分是我们客户入职流程的一部分，我们认为需要对此进行自动化检查。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/01/image-1.png" alt="图片1" /></p>
<p>我们将使用 codepen.io 示例进行测试</p>
<p>我们要做的第一件事是导航到网站：<a href="https://codepen.io/shaikmaqsood/pen/XmydxJ">https://codepen.io/shaikmaqsood/pen/XmydxJ</a>，并点击一个链接或按钮，将某个项目复制到浏览器剪贴板。接下来，我们将实际与浏览器交互以获取复制的值。为了与剪贴板交互，我们将使用在页面类<code>page.evaluate()</code>上调用的 evaluate 方法。代码如下所示。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//copyToClipboard.spec.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">验证复制到剪贴板功能1</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://codepen.io/shaikmaqsood/pen/XmydxJ</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page
</span><span> .</span><span style="color:#8cdaff;">frameLocator</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">#result</span><span style="color:#ffffff;">"</span><span>)
</span><span> .</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Copy TEXT 1</span><span style="color:#ffffff;">" </span><span>})
</span><span> .</span><span style="color:#6699cc;">click</span><span>();
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">clipboardText1 </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#6699cc;">evaluate</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">navigator.clipboard.readText()</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">clipboardText1</span><span>).</span><span style="color:#8cdaff;">toContain</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Hello, I'm TEXT 1</span><span style="color:#ffffff;">"</span><span>);
</span><span>});
</span></code></pre>
<p><a href="https://github.com/BMayhew/playwright-demo/blob/master/tests/ui/codepen/copyToClipboard.spec.ts">Github 代码示例</a></p>
<p>为了在无人干预的情况下运行此代码，还有另一个步骤，即授予浏览器访问剪贴板的权限。具体来说，需要在<code>use:{}</code>块中添加<code>permissions: ["clipboard-read"]</code>。没有这个选项，你将在 chrome 中看到这个弹窗，你必须手动允许。</p>
<p><img src="https://playwrightsolutions.com/content/images/2023/01/image.png" alt="图片2：codepen.io请求查看复制到剪贴板的文本和图片（阻止/允许按钮）" /></p>
<p>通过添加以下权限，你将不再收到此由 playwright 控制的浏览器中的弹出窗口。值得注意的是，为了在 headless: true 模式下与 codepen.io 网站交互，我必须传递一个自定义的 userAgent 来绕过 Cloudflare 的“你是人类吗”检查。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#6d6d6d;">//playwright.config.ts
</span><span>
</span><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">PlaywrightTestConfig </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">config</span><span style="color:#ff5e5e;">: </span><span>PlaywrightTestConfig </span><span style="color:#ff5e5e;">= </span><span>{
</span><span> use: {
</span><span> browserName: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">chromium</span><span style="color:#ffffff;">"</span><span>,
</span><span> headless: </span><span style="color:#ff8942;">true</span><span>,
</span><span> permissions: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">clipboard-read</span><span style="color:#ffffff;">"</span><span>],
</span><span> userAgent: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">some custom ua</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span>};
</span><span>
</span><span style="color:#ff5e5e;">export default </span><span style="color:#e9fdac;">config</span><span>;
</span></code></pre>
<h2 id="yin-yong">引用</h2>
<p><a href="https://playwrightsolutions.com/how-do-i-access-the-browser-clipboard-with-playwright/">来源网址</a></p>
<p>发布时间：2023-01-09</p>
Playwright 中如何根据元素可见性来条件性点击?
2022-12-16T00:00:00+00:00
2022-12-16T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/is-it-possible-in-playwright-to-conditionally-click-an-element-depending-on-which-one-is-present/
<p>最近在 Playwright 的 Slack 频道中有人询问是否可以在两个元素中点击可见的那个。有一个回答让我深入了解了 JavaScript 中的 Promise。</p>
<p>解决方案使用了 Promise.race() 方法,该方法接受一个 Promise 数组,并返回最先完成的那个 Promise。</p>
<blockquote>
<p>Promise.race() 方法是 Promise 并发方法之一。当你想要第一个完成的异步任务,但不关心它最终的状态(成功或失败)时,这个方法很有用。</p>
</blockquote>
<p>这对我们来说很棒,因为只要我们要交互的定位器有一个是存在的,测试就不会失败。我发现 the-internet.herokuapp.com 网站有一个消失元素的页面可以验证这一点。刷新页面时,"Portfolio"元素总是存在,而"Gallery"元素只是偶尔出现。</p>
<p>下面的代码片段的注释解释了发生的事情,还有一些可用于调试的 console.log 注释。这种实现的优点是,如果被测系统有多个需要考虑的状态,你可以随意向数组中添加任意数量的定位器。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">使用 promise.race 点击数组中的一个元素</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://the-internet.herokuapp.com/disappearing_elements</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">// 构建一个可以传入 Promise 数组的 promise
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#8cdaff;">waitForLocator </span><span style="color:#ff5e5e;">= </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">locator</span><span style="color:#ff5e5e;">: </span><span>Locator</span><span style="color:#ffffff;">)</span><span style="color:#ff5e5e;">: </span><span>Promise<Locator> </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">return </span><span style="color:#e9fdac;">locator</span><span>.</span><span style="color:#8cdaff;">waitFor</span><span>().</span><span style="color:#6699cc;">then</span><span>(</span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span style="color:#e9fdac;">locator</span><span>);
</span><span> };
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">returnedLocator </span><span style="color:#ff5e5e;">= await </span><span style="color:#fbe3bf;">Promise</span><span>.</span><span style="color:#6699cc;">race</span><span>(
</span><span> </span><span style="color:#6d6d6d;">// Promise/定位器数组
</span><span> [
</span><span> </span><span style="color:#8cdaff;">waitForLocator</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Gallery</span><span style="color:#ffffff;">" </span><span>})),
</span><span> </span><span style="color:#8cdaff;">waitForLocator</span><span>(</span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Portfolio</span><span style="color:#ffffff;">" </span><span>})),
</span><span> ]
</span><span> );
</span><span> </span><span style="color:#6d6d6d;">// console.log(await returnedLocator.innerText());
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">returnedLocator</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> </span><span style="color:#6d6d6d;">// console.log(page.url());
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">gallery</span><span style="color:#ff5e5e;">|</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">portfolio</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span></code></pre>
<p>经过这次尝试后,我开始思考是否有更简单直接的方法来处理这种条件,于是我开始用 if 语句构思解决方案。几分钟后,我就有了一个不错的可行方案,更容易理解。在下面的代码中,我们检查 locator.isVisible(),如果为 true 则继续,如果为 false 则转到下一个代码块。我倾向于使用这种解决方案,因为它能完成任务,而且更易于理解。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">在两个元素中点击可见的那个</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://the-internet.herokuapp.com/disappearing_elements</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">gallery </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Gallery</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">portfolio </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">link</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Portfolio</span><span style="color:#ffffff;">" </span><span>});
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">gallery</span><span>.</span><span style="color:#8cdaff;">isVisible</span><span>()) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">gallery</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> } </span><span style="color:#ff5e5e;">else if </span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">portfolio</span><span>.</span><span style="color:#8cdaff;">isVisible</span><span>()) {
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">portfolio</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span><span> }
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">page</span><span>).</span><span style="color:#8cdaff;">toHaveURL</span><span>(</span><span style="color:#ffffff;">/</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">gallery</span><span style="color:#ff5e5e;">|</span><span style="color:#fdb082;">.</span><span style="color:#ff5e5e;">*</span><span style="color:#fbe3bf;">portfolio</span><span style="color:#ffffff;">/</span><span>);
</span><span>});
</span></code></pre>
<p><strong>2024 年来自乙醇的注释 👀：我更倾向于第 1 种方案，第 1 种方案更有 javascript 的味道一点，而且支持超过 2 个的 locator。然而，在 2024 年的今天，上面两种方案都不推荐。比较好的实现是 playwright 自带的<a href="https://playwright.dev/docs/locators#matching-one-of-the-two-alternative-locators">locator.or</a>方案，代码如下</strong></p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">newEmail </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">New</span><span style="color:#ffffff;">" </span><span>});
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">dialog </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByText</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Confirm security settings</span><span style="color:#ffffff;">"</span><span>);
</span><span style="color:#ff5e5e;">await </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">newEmail</span><span>.</span><span style="color:#8cdaff;">or</span><span>(</span><span style="color:#e9fdac;">dialog</span><span>).</span><span style="color:#8cdaff;">first</span><span>()).</span><span style="color:#8cdaff;">toBeVisible</span><span>();
</span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">dialog</span><span>.</span><span style="color:#8cdaff;">isVisible</span><span>())
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">getByRole</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">button</span><span style="color:#ffffff;">"</span><span>, { name: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Dismiss</span><span style="color:#ffffff;">" </span><span>}).</span><span style="color:#6699cc;">click</span><span>();
</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">newEmail</span><span>.</span><span style="color:#6699cc;">click</span><span>();
</span></code></pre>
<hr />
<p>感谢阅读!如果你觉得这篇文章有帮助,可以在 LinkedIn 上联系我,或考虑给我买杯咖啡。如果你想获得更多内容直接发送到你的收件箱,请在下方订阅。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源：https://playwrightsolutions.com/is-it-possible-in-playwright-to-conditionally-click-an-element-depending-on-which-one-is-present/</p>
<p>发布时间：2022 年 12 月 26 日 13:30:38</p>
如何在GitHub Actions中缓存 Playwright 浏览器二进制文件
2022-11-16T00:00:00+00:00
2022-11-16T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/playwright-github-action-to-cache-the-browser-binaries/
<p>我最近于 2022 年 11 月 16 日更新了这篇文章!</p>
<p>如果你发现自己每天多次在 GitHub Actions 中运行 Playwright 测试,你可以通过缓存下载的二进制文件来节省时间和成本。</p>
<p>要了解 Playwright 如何安装和管理浏览器,最好的方法是查看<a href="https://playwright.dev/docs/browsers#managing-browser-binaries">官方文档</a>。</p>
<p>文档中提到,每种浏览器的默认安装位置如下:</p>
<hr />
<p>Playwright 将 Chromium、WebKit 和 Firefox 浏览器下载到特定操作系统的缓存文件夹中:</p>
<ul>
<li>Windows: <code>%USERPROFILE%\AppData\Local\ms-playwright</code></li>
<li>MacOS: <code>~/Library/Caches/ms-playwright</code></li>
<li>Linux: <code>~/.cache/ms-playwright</code></li>
</ul>
<hr />
<p>下面的 GitHub Actions YAML 文件包含了一个创建缓存并存储 Playwright 二进制文件的部分,这样 GitHub Actions 就不必每次运行时都重新下载。这里的关键是确保 'key' 部分(目前设置为 <code>Linux-playwright-1.27.1</code>)在每次更新 Playwright 版本时都要更新。这将使缓存失效和自动下载最新的 Playwright 版本,并在新的 key 下缓存它。</p>
<p>例如,如果发布了 Playwright 1.28.0 版本,当我更新 package.json 文件以获取 1.28.0 版本时,缓存 key 将自动更新为 <code>Linux-playwright-1.28.0</code>,这将下载最新版本的 Playwright 并在该 key 值下缓存它。</p>
<p>另外需要注意的是,以下代码行很重要,它用于检查缓存是否仍然有效,或者是否应该重建:</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span></code></pre>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Playwright Tests
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">push</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>: [</span><span style="color:#fbe3bf;">main</span><span>, </span><span style="color:#fbe3bf;">master</span><span>]
</span><span> </span><span style="color:#ff5e5e;">pull_request</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>: [</span><span style="color:#fbe3bf;">main</span><span>, </span><span style="color:#fbe3bf;">master</span><span>]
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">test</span><span>:
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">60
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v3
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/setup-node@v2
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">node-version</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">16.x</span><span style="color:#ffffff;">"
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Get installed Playwright version
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-version
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Cache playwright binaries
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/cache@v3
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">playwright-cache
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> ~/.cache/ms-playwright
</span><span> </span><span style="color:#ff5e5e;">key</span><span>: </span><span style="color:#fbe3bf;">${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npm ci
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install --with-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span> - </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright install-deps
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">steps.playwright-cache.outputs.cache-hit != 'true'
</span><span>
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Run Playwright tests
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">npx playwright test
</span><span> - </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/upload-artifact@v2
</span><span> </span><span style="color:#ff5e5e;">if</span><span>: </span><span style="color:#fbe3bf;">always()
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">playwright-test-results
</span><span> </span><span style="color:#ff5e5e;">path</span><span>: </span><span style="color:#fbe3bf;">test-results/
</span></code></pre>
<p>以下是 GitHub Actions 实际运行时的一些截图。示例仓库可以在<a href="https://github.com/BMayhew/new-playwright-init/actions">这里</a>找到。</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/11/image-6.png" alt="图片1" /></p>
<p>👆GitHub Actions 运行创建缓存的示例</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/11/image-7.png" alt="图片2" /></p>
<p>GitHub Actions 运行使用缓存的示例 👆</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/11/image-8.png" alt="图片3" /></p>
<p>GitHub Actions 页面中可见的缓存 ⬆️</p>
<p>根据我的测试,这可以为你的 Playwright 测试运行节省不少时间(至少 3 分钟)。不过我确实遇到过有几天 Playwright 安装过程耗时超过 8 分钟的情况。正是这个问题促使我深入研究这个方案。</p>
<p>如果你想出了任何创新的缓存使用方法,或者觉得这篇文章对你有帮助,欢迎在 Twitter 上联系我 <a href="https://twitter.com/ButchMayhew">@butchmayhew</a>,或者考虑给我买杯咖啡。</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/</p>
<p>发布时间: 2022-11-16T09:30:00.000Z</p>
如何使用 GitHub Action 触发另一个代码库中的 Playwright 测试?
2022-11-06T00:00:00+00:00
2022-11-06T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-do-i-trigger-playwright-tests-to-run-across-repositories-using-github-actions/
<p>如果你发现 Playwright 测试自动化代码与被测服务或应用程序位于不同的代码库中,别担心!本文将介绍如何通过 GitHub Actions 跨代码库触发测试运行。</p>
<p>虽然有多种方法可以实现这一目标,但最简单的方式是利用 GitHub Actions,特别是 <code>peter-evans/repository-dispatch@v2</code> <a href="https://github.com/peter-evans/repository-dispatch">action</a>。这个 GitHub Action 可以让你轻松使用 <a href="https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#repository_dispatch">Repository Dispatch API</a> 来触发其他代码库中的 GitHub Actions。</p>
<p>唯一的前提条件是你需要创建一个具有 <code>repos</code> 权限的个人访问 token(PAT)。</p>
<p>创建个人访问 token 的步骤可以在<a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token">这里</a>找到。需要允许的权限范围如下图所示。</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/11/image.png" alt="图片 1" /></p>
<p>保存后,你需要将 PAT 保存为应用程序代码库中的 GitHub Action Secret。在设置页面左侧,展开 Secrets 并查看 Actions 页面</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/11/image-2.png" alt="图片 2" /></p>
<p>👆 代码库 > 设置 > Secrets > Actions</p>
<p>添加名为 <code>REPO_ACCESS_TOKEN</code> 的 PAT</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/11/image-3.png" alt="图片 3" /></p>
<p>👆 将 PAT 添加到 Action secrets</p>
<h2 id="bian-xie-github-action-yml-wen-jian">编写 GitHub Action yml 文件</h2>
<p>完成上述步骤后,你只需要编写 .yml 文件来启动 Repository Dispatch,并在测试代码库中设置 <code>on</code> repository_dispatch 来运行测试。以下是服务/应用程序代码库(你想要从中启动测试运行的地方)和接收代码库(运行测试的地方)的 GitHub Action yml 文件示例。</p>
<p>第一部分包括服务或应用程序的 yml 示例,以及一个可以查看实际运行情况的 GitHub 代码库链接。</p>
<p><em>my-service 代码库中的 build-deploy.yml</em></p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">My Service Build and Deploy
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">push</span><span>:
</span><span> </span><span style="color:#ff5e5e;">branches</span><span>:
</span><span> - </span><span style="color:#fbe3bf;">develop
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">deploy_staging</span><span>:
</span><span> </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Staging Deploy
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">记录 Staging 发布
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">echo "这次运行是 staging 部署"
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">pull代码
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">actions/checkout@v2
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">设置要传递给测试的 URL
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "ENVIRONMENT=http://my-site.com" >> $GITHUB_ENV
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">构建和部署
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "构建和部署"
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">触发 Playwright 测试作业
</span><span> </span><span style="color:#ff5e5e;">uses</span><span>: </span><span style="color:#fbe3bf;">peter-evans/repository-dispatch@v2
</span><span> </span><span style="color:#ff5e5e;">with</span><span>:
</span><span> </span><span style="color:#ff5e5e;">token</span><span>: </span><span style="color:#fbe3bf;">${{ secrets.REPO_ACCESS_TOKEN }}
</span><span> </span><span style="color:#ff5e5e;">repository</span><span>: </span><span style="color:#fbe3bf;">bmayhew/my-tests
</span><span> </span><span style="color:#ff5e5e;">event-type</span><span>: </span><span style="color:#fbe3bf;">run-my-tests
</span><span> </span><span style="color:#ff5e5e;">client-payload</span><span>: </span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">{"github": ${{ toJson(github) }}}</span><span style="color:#ffffff;">'
</span></code></pre>
<p><a href="https://github.com/BMayhew/my-service/actions/runs/3397953921/jobs/5650587912">GitHub Action 运行示例</a></p>
<p><a href="https://github.com/BMayhew/my-service">GitHub my-site 代码库</a></p>
<p>关于这行 <code>client-payload: '{"github": ${{ toJson(github) }}}'</code> 的快速说明: 这允许你传递当前 GitHub 运行的所有详细信息(状态、环境变量、你想要设置或从作业的前面步骤传递到测试作业的任何内容)。我使用这个的方式包括发送预览环境 URL、GitHub 评论 ID、设置我正在进行的反馈/测试类型(快乐路径或完整运行)等。</p>
<hr />
<p>这部分是 Playwright 测试代码库中应包含内容的示例。需要特别注意的行包括何时运行 GitHub Action <code>on</code> 以及创建与服务/应用程序 GitHub Action 中发送的 <code>event-type</code> 名称相匹配的类型。</p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">repository_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">types</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">run-my-tests</span><span style="color:#ffffff;">"</span><span>]
</span></code></pre>
<p><em>my-tests 代码库中的 run-tests.yml</em></p>
<pre data-lang="yaml" style="background-color:#191919;color:#f8f8f2;" class="language-yaml "><code class="language-yaml" data-lang="yaml"><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">Playwright 自动化测试
</span><span style="color:#ff8942;">on</span><span>:
</span><span> </span><span style="color:#ff5e5e;">workflow_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">inputs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">environment</span><span>:
</span><span> </span><span style="color:#ff5e5e;">description</span><span>: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">要运行测试的 URL</span><span style="color:#ffffff;">"
</span><span> </span><span style="color:#ff5e5e;">required</span><span>: </span><span style="color:#ff8942;">true
</span><span> </span><span style="color:#ff5e5e;">default</span><span>: </span><span style="color:#fbe3bf;">https://my-site.com
</span><span> </span><span style="color:#ff5e5e;">repository_dispatch</span><span>:
</span><span> </span><span style="color:#ff5e5e;">types</span><span>: [</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">run-my-tests</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">run-my-tests-2</span><span style="color:#ffffff;">"</span><span>]
</span><span style="color:#ff5e5e;">jobs</span><span>:
</span><span> </span><span style="color:#ff5e5e;">run_automation_tests</span><span>:
</span><span> </span><span style="color:#ff5e5e;">timeout-minutes</span><span>: </span><span style="color:#fdb082;">60
</span><span> </span><span style="color:#ff5e5e;">runs-on</span><span>: </span><span style="color:#fbe3bf;">ubuntu-latest
</span><span> </span><span style="color:#ff5e5e;">env</span><span>:
</span><span> </span><span style="color:#ff5e5e;">ENVIRONMENT</span><span>: </span><span style="color:#fbe3bf;">${{ github.event.inputs.environment }}${{ github.event.client_payload.github.event.inputs.environment }}
</span><span> </span><span style="color:#ff5e5e;">steps</span><span>:
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">运行 Playwright 测试
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#ff5e5e;">|
</span><span style="color:#fbe3bf;"> echo "环境: $ENVIRONMENT"
</span><span style="color:#fbe3bf;"> echo "GitHub 事件是: ${{ github.event_name }}"
</span><span style="color:#fbe3bf;"> echo "在这里运行测试"
</span><span style="color:#fbe3bf;"> echo "Action 中的以下步骤提供了你可以在脚本中使用的内容"
</span><span> - </span><span style="color:#ff5e5e;">name</span><span>: </span><span style="color:#fbe3bf;">输出 GitHub 上下文
</span><span> </span><span style="color:#ff5e5e;">id</span><span>: </span><span style="color:#fbe3bf;">github_context_step
</span><span> </span><span style="color:#6d6d6d;"># 以下内容会打印出所有可用于任何报告或从其他代码库运行测试的信息
</span><span> </span><span style="color:#ff5e5e;">run</span><span>: </span><span style="color:#fbe3bf;">echo '${{ toJSON(github) }}'
</span></code></pre>
<p><a href="https://github.com/BMayhew/my-tests/actions/runs/3397955085/jobs/5650589659">GitHub Action 运行示例</a></p>
<p><a href="https://github.com/BMayhew/my-tests">GitHub my-test 代码库</a></p>
<p>要访问 <code>client_payload</code> 中发送的任何详细信息,你必须调用:</p>
<p><code>${{ github.event.client_payload.github.你想要的信息 }}</code></p>
<p>如果你不确定想要什么,运行命令:</p>
<p><code>echo '${{ toJSON(github) }}'</code></p>
<p>这将在 GitHub Action 中输出一个 JSON 对象,包含你在 GitHub Action 中可以访问的所有不同键值对。</p>
<p>如果你想更进一步,可以继续使用 Repository Dispatch 功能向原始服务/应用程序代码库回传状态,根据测试是否通过执行不同的自动化操作。例如,你可以为特定的拉取请求添加标签,或创建一个操作来向拉取请求添加评论,说明测试的状态(你需要从 client_payload 中保留原始拉取请求 ID)。</p>
<hr />
<p>关于跨代码库使用这种功能的可能性是无限的。希望你觉得这篇文章有帮助!如果你想出了使用 Repository Dispatch 的任何创意方法,或者觉得这篇文章有用,欢迎在 Twitter 上联系我 <a href="https://twitter.com/ButchMayhew">@butchmayhew</a>,或者考虑给我买杯咖啡。</p>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/how-do-i-trigger-playwright-tests-to-run-across-repositories-using-github-actions/">URL 来源</a></p>
<p>发布时间: 2022-11-06T04:32:48.000Z</p>
是否可以使用 Playwright 进行无障碍测试？
2022-10-16T00:00:00+00:00
2022-10-16T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/is-it-possible-to-use-playwright-to-do-accessibility-testing/
<p>Markdown 内容：</p>
<p>当然可以！Deque 实验室提供了一个名为 axe 的工具来协助这项工作。对于 Playwright，他们专门提供了 axe-core/playwright 包，使用起来比以往更加简单。</p>
<p>以下代码片段展示了如何使用 axe-core/playwright 包中的 <code>AxeBuilder</code> 功能。调用 <code>analyze()</code> 将返回一个 promise，可以通过等待获取扫描的所有详细信息。我还列举了几种处理结果的方法：在控制台打印结果、将违规情况附加到使用 Playwright 测试运行器生成的测试报告中，以及使用 expect 语句在不符合规范时使测试失败。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test</span><span>, </span><span style="color:#e9fdac;">expect </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">AxeBuilder </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@axe-core/playwright</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Visit home page and run an axe test @axe</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}, </span><span style="font-style:italic;color:#fc9354;">testInfo</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://broken-workshop.dequelabs.com/</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#6d6d6d;">//使用 axe 分析页面
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">accessibilityScanResults </span><span style="color:#ff5e5e;">= await new </span><span>AxeBuilder({ </span><span style="color:#e9fdac;">page </span><span>}).</span><span style="color:#8cdaff;">analyze</span><span>();
</span><span> </span><span style="color:#6d6d6d;">//将违规情况附加到测试报告
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">testInfo</span><span>.</span><span style="color:#8cdaff;">attach</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">accessibility-scan-results</span><span style="color:#ffffff;">"</span><span>, {
</span><span> body: </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">stringify</span><span>(</span><span style="color:#e9fdac;">accessibilityScanResults</span><span>.</span><span style="color:#e9fdac;">violations</span><span>, </span><span style="color:#ff8942;">null</span><span>, </span><span style="color:#fdb082;">2</span><span>),
</span><span> contentType: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">application/json</span><span style="color:#ffffff;">"</span><span>,
</span><span> });
</span><span> </span><span style="color:#6d6d6d;">//在控制台输出违规情况
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">violation </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">accessibilityScanResults</span><span>.</span><span style="color:#e9fdac;">violations</span><span>;
</span><span> </span><span style="color:#e9fdac;">violation</span><span>.</span><span style="color:#6699cc;">forEach</span><span>(</span><span style="font-style:italic;color:#fbdfb5;">function </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">entry</span><span style="color:#ffffff;">) </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">entry</span><span>.</span><span style="color:#e9fdac;">impact </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">" " </span><span style="color:#ff5e5e;">+ </span><span style="color:#e9fdac;">entry</span><span>.description);
</span><span> });
</span><span> </span><span style="color:#6d6d6d;">//期望违规列表为空
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">accessibilityScanResults</span><span>.</span><span style="color:#e9fdac;">violations</span><span>).</span><span style="color:#8cdaff;">toEqual</span><span>([]);
</span><span>});
</span></code></pre>
<p>上面的示例虽然简单，但查看 Playwright 文档，你会发现更多功能，例如：</p>
<ul>
<li>配置 axe 扫描页面的特定部分</li>
<li>从扫描中排除单个元素</li>
<li>禁用单个扫描规则（完整的 Axe 规则列表请参见此处）</li>
<li>使用快照允许特定已知问题</li>
<li>为 AxeBuilder 创建 fixture 以简化代码</li>
</ul>
<p>你还可以根据想要运行的测试类型，使用特定标签调用 AxeBuilder 进行检查。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#6d6d6d;">//使用 axe 分析页面
</span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">accessibilityScanResults </span><span style="color:#ff5e5e;">= await new </span><span>AxeBuilder({ </span><span style="color:#e9fdac;">page </span><span>})
</span><span> .</span><span style="color:#8cdaff;">withTags</span><span>([</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">wcag2a</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">wcag2aa</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">wcag21a</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">wcag21aa</span><span style="color:#ffffff;">"</span><span>])
</span><span> .</span><span style="color:#8cdaff;">analyze</span><span>();
</span></code></pre>
<p>Axe 是一个在多种自动化解决方案中使用的工具，如果你想尝试它的 Chrome 扩展版本，可以在这里安装。</p>
<p>我越是使用和探索 Playwright，就越被它的功能所折服。</p>
<p><a href="https://playwright.dev/docs/accessibility-testing">无障碍测试</a></p>
<h2 id="lai-yuan">来源</h2>
<p>网址来源：https://playwrightsolutions.com/is-it-possible-to-use-playwright-to-do-accessibility-testing/</p>
<p>发布时间：2022-10-16</p>
如何在 Playwright 测试中根据条件不同使用 afterEach
2022-07-06T00:00:00+00:00
2022-07-06T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-to-conditionally-use-aftereach/
<p>在某些情况下，你可能希望在测试中使用 afterEach 来清理数据，但并非所有情况下都需要清理数据。我的具体例子是我在测试一个 POST 接口时，我们有正面和负面的测试。当我成功创建一个 POST 时，我希望在 afterEach 中删除刚刚创建的内容，但当我进行负面测试时，POST 并没有创建新的项目，我不需要运行 afterEach 来清理数据，因为它会因为试图删除不存在的 id 而失败。</p>
<p>解决方案是使 afterEach 有条件的被调用。请看下面的代码示例，我们创建了一个新变量<code>triggerAfterEach</code>，并设置为<code>true</code>来触发 afterEach。如果在测试中没有分配<code>triggerAfterEach</code>，afterEach 代码将不会执行。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">describe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">测试组</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">let </span><span style="color:#e9fdac;">triggerAfterEach</span><span style="color:#ff5e5e;">: </span><span style="color:#fbe3bf;">boolean</span><span>;
</span><span>
</span><span> </span><span style="color:#e9fdac;">test</span><span>.</span><span style="color:#8cdaff;">afterEach</span><span>(</span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">if </span><span>(</span><span style="color:#e9fdac;">triggerAfterEach</span><span>) {
</span><span> </span><span style="color:#6d6d6d;">//在这里执行after代码
</span><span> }
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">有afterEach的测试场景</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">triggerAfterEach </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">true</span><span>;
</span><span> });
</span><span>
</span><span> </span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">没有afterEach的测试场景</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">() </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">triggerAfterEach </span><span style="color:#ff5e5e;">= </span><span style="color:#ff8942;">false</span><span>;
</span><span> });
</span><span>});
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/how-to-conditionally-use-aftereach/">URL Source</a></p>
<p>Published Time: 2022-07-06</p>
playwright如何屏蔽页面上的各种弹出广告
2022-04-16T00:00:00+00:00
2022-04-16T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/network-abort-request-playwright-tutorial-part-59/
<p>最近，我的一个被测网站添加了谷歌广告，这导致我之前编写的所有测试都失败了。一个从底部弹出的广告窗口覆盖在了自动化程序要点击的输入框上。</p>
<p>为了解决这个问题，我转向使用<a href="https://playwright.dev/docs/api/class-route">route 方法</a>。这个方法允许拦截网络请求。<code>route</code>对象允许以下操作：</p>
<ul>
<li>abort - 中止路由的请求</li>
<li>continue - 继续路由的请求，可选择重写部分内容（如重写头部）</li>
<li>fulfill - 改写响应内容（如发送不同的状态码、内容类型或正文）</li>
<li>request - 允许你以多种方式与<a href="https://playwright.dev/docs/api/class-request">request 对象</a>交互。</li>
</ul>
<p>对于这个特定的例子，我想编写代码来查找所有 URL 以<code>https://googleads.*</code>开头的请求并拦截它们，同时继续处理其余的请求。</p>
<p>以下代码块使用当前会话/测试的上下文，创建一个路由拦截器来监视所有请求。代码的第 2 行获取请求 URL 作为字符串，并使用<code>startsWith()</code>函数返回一个布尔值。如果为 true，则执行第 3 行（中止），否则执行第 4 行（继续）。然后返回响应。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/*</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">request</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">request</span><span>().</span><span style="color:#8cdaff;">url</span><span>().</span><span style="color:#8cdaff;">startsWith</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://googleads.</span><span style="color:#ffffff;">"</span><span>)
</span><span> </span><span style="color:#ff5e5e;">? </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#6699cc;">abort</span><span>()
</span><span> </span><span style="color:#ff5e5e;">: </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return</span><span>;
</span><span>});
</span></code></pre>
<p>如果你想获取页面上发出的所有的异步请求列表，这段代码也很有用，把结果打印到控制台就可以了。这里的一个重要部分是要对请求做些处理，在下面的例子中我选择继续执行。如果你不使用<code>abort</code>、<code>continue</code>或<code>fulfill</code>，请求很可能会超时。</p>
<pre data-lang="javascript" style="background-color:#191919;color:#f8f8f2;" class="language-javascript "><code class="language-javascript" data-lang="javascript"><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">context</span><span>.</span><span style="color:#8cdaff;">route</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">**/*</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">(</span><span style="font-style:italic;color:#fc9354;">request</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#fbe3bf;">console</span><span>.</span><span style="color:#6699cc;">log</span><span>(</span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">request</span><span>().</span><span style="color:#8cdaff;">url</span><span>());
</span><span> </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">continue</span><span>();
</span><span> </span><span style="color:#ff5e5e;">return</span><span>;
</span><span>});
</span></code></pre>
<p>尽情使用吧！</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源: https://playwrightsolutions.com/network-abort-request-playwright-tutorial-part-59/</p>
<p>发布时间: 2022 年 4 月 16 日 05:04:36</p>
如何在Playwright中一次运行多个标签的测试用例?
2022-03-14T00:00:00+00:00
2022-03-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/how-can-i/
<p>要在 Playwright Test 中运行带有多个标签的测试，可以使用 <code>--grep</code> 选项。下面是具体的方法和命令：</p>
<p>假设你有三个标签：<code>@tag1</code>、<code>@tag2</code> 和 <code>@tag3</code>，你希望将 <code>@tag1</code> 和 <code>@tag2</code> 的测试分组在一起运行。你可以使用以下命令来实现：</p>
<pre data-lang="bash" style="background-color:#191919;color:#f8f8f2;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#6d6d6d;"># 运行带有 @tag1 的测试
</span><span style="color:#e9fdac;">$</span><span> npx playwright test</span><span style="font-style:italic;color:#fc9354;"> --grep</span><span> @tag1
</span><span>
</span><span style="color:#6d6d6d;"># 运行带有 @tag2 的测试
</span><span style="color:#e9fdac;">$</span><span> npx playwright test</span><span style="font-style:italic;color:#fc9354;"> --grep</span><span> @tag2
</span><span>
</span><span style="color:#6d6d6d;"># 运行带有 @tag1 和 @tag2 的测试
</span><span style="color:#e9fdac;">$</span><span> npx playwright test</span><span style="font-style:italic;color:#fc9354;"> --grep</span><span> @tag1</span><span style="font-style:italic;color:#fc9354;"> --grep</span><span> @tag2
</span><span>
</span><span style="color:#6d6d6d;"># 简化命令，运行带有 @tag1 或 @tag2 的测试
</span><span style="color:#e9fdac;">$</span><span> npx playwright test</span><span style="font-style:italic;color:#fc9354;"> -g</span><span> tag1</span><span style="color:#ff5e5e;">|</span><span style="color:#e9fdac;">tag2
</span></code></pre>
<p>在运行命令时，<code>-g tag1|tag2</code> 会运行所有带有 <code>@tag1</code> 或 <code>@tag2</code> 的测试。使用这个方法，你可以方便地按照标签来组织和运行测试。</p>
<p>如果你觉得这个解决方案有帮助，请给予支持！</p>
<h2 id="lai-yuan">来源</h2>
<p>URL Source: https://playwrightsolutions.com/how-can-i/</p>
<p>Published Time: 2022-03-14</p>
在 Playwright Test 中有简便的方法重复执行测试多次来检查用例的稳定性吗？
2022-03-14T00:00:00+00:00
2022-03-14T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/in-playwright-test-is-there-an-easy-way-to-loop-the-test-multiple-times-to-check-for-flakiness/
<p>在 Playwright Test 中有简便的方法重复执行测试多次来检查用例到底稳定不稳定性吗？</p>
<p>我发现在合并新代码到测试集的主干分支之前，在 pull request 上多次运行新的自动化测试或对现有测试的进行修改是一个很好的做法，这样可以检查测试的不稳定性。要实现这一点，你可以构建 CI 流水线来运行命令 <code>npx playwright test --repeat-each=5</code>。关于命令行运行的文档可以在<a href="https://playwright.dev/docs/test-cli">这里</a>找到。</p>
<p>你还可以更进一步，通过 git 比较查看哪些目录发生了变化，并将目录作为参数传递给命令。下面这个命令将会运行 todo-page 和 landing-page 目录下的所有测试，每个测试重复 5 次：<code>npx playwright test tests/todo-page/ tests/landing-page/ --repeat-each=5</code></p>
<p>如果这个解决方案对你有帮助，欢迎点赞支持！</p>
<h2 id="lai-yuan">来源</h2>
<p>URL 来源：https://playwrightsolutions.com/in-playwright-test-is-there-an-easy-way-to-loop-the-test-multiple-times-to-check-for-flakiness/</p>
<p>发布时间：2022 年 3 月 14 日 21:12:45</p>
如何在playwright中定位表格的行(table row)
2022-03-13T00:00:00+00:00
2022-03-13T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/access-a-table-row-with-a-unique-id-in-playwright/
<p>有许多不同的方法可以与表格进行交互，这是我们在 Playwright 测试中提取/确认数据是否存在的众多示例中的第一个。在这个示例中，我们将使用 https://letcode.in/table 上的表格。</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/03/image.png" alt="" /></p>
<p>在这个挑战中，我想获取包含 Cupcake 值的整行。Playwright 有一个非常好的定位器函数，它允许我们指定一个高级元素 tr 并找到包含文本 Cupcake 的表格行。这将返回表格行的定位器，以便进行断言或以其他方式与整行进行交互。</p>
<p>TODO: 下面的代码应该已经失效了</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">test </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">从单元格中的文本获取表格的整行</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">page </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">goto</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">https://letcode.in/table</span><span style="color:#ffffff;">"</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">row </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">page</span><span>.</span><span style="color:#8cdaff;">locator</span><span>(</span><span style="color:#ffffff;">'</span><span style="color:#fbe3bf;">tr:has-text("Cupcake")</span><span style="color:#ffffff;">'</span><span>);
</span><span>});
</span></code></pre>
<p>如果你 <code>console.log(row.innerText())</code>，你会得到如下返回值。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>Cupcake
</span><span>305
</span><span>4
</span><span>67
</span><span>4
</span><span>50
</span></code></pre>
<h2 id="lai-yuan">来源</h2>
<p><a href="https://playwrightsolutions.com/access-a-table-row-with-a-unique-id-in-playwright/">网址来源</a></p>
<p>发布时间: 2022-03-13</p>
playwright里如何快速确定该使用多少个worker运行用例
2022-03-13T00:00:00+00:00
2022-03-13T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/whats-an-easy-way-to-tell-how-many-workers/
<p>好消息是，默认情况下，Playwright 根据您的计算机规格尝试并行运行测试。更好的消息是，通过增加或减少工作线程数，您可以在运行 Playwright 测试时获得更快的反馈。</p>
<p>您可以通过阅读<a href="https://playwright.dev/docs/test-parallel">并行和分片</a>的文档来了解更多信息，但如果您想快速简便地查看哪种工作线程数量对您的计算机或云中的计算机最优，只需运行以下命令即可。</p>
<pre style="background-color:#191919;color:#f8f8f2;"><code><span>for i in `seq <min> <max>`; do time npx playwright test --reporter=line --workers=$i; done
</span></code></pre>
<p>将 <code><min></code> 修改为您的 CPU 数量除以 2，将 <code><max></code> 修改为 CPU 数量乘以 2。这个命令将使用不同的工作线程数启动 Playwright 测试套件（通过最小和最大值进行迭代）。输出将通过命令行返回。请注意，根据您的最小和最大输入以及测试数量，此过程可能需要一些时间。因此，请启动并冲泡一些 ☕️ 或 🫖。运行完成后，您应该会得到类似以下的输出。</p>
<p><img src="https://playwrightsolutions.com/content/images/2022/03/image-2.png" alt="Image 1" /></p>
<p>3、5 和 6 次运行的测试都是最短的运行时间。关键是找到最快的运行方式，而不会引入任何不稳定的测试。我的默认值是 <code>4</code>，看了结果后，我可能会继续使用这个值。</p>
<p>当尝试在 AWS EC2 实例或云中的其他服务器上运行 Playwright 测试时，我可以看到这个脚本非常实用。</p>
<h2 id="lai-yuan">来源</h2>
<p><strong>来源链接</strong>: <a href="https://playwrightsolutions.com/whats-an-easy-way-to-tell-how-many-workers/">What's an easy way to tell how many workers?</a></p>
<p><strong>发布时间</strong>: 2022-03-13</p>
使用 Playwright API 的 POST 请求上传 Content-Type 为 multipart/form-data 的文件
2022-03-12T00:00:00+00:00
2022-03-12T00:00:00+00:00
乙醇
https://playwright.itest.info/blog/making-a-post/
<p>在为我的 API 编写自动化脚本时，我遇到了一个问题：如何使用 Playwright API 发起 POST 请求来上传文件。最后，我在一个 <a href="https://playwright.slack.com/archives/CSUHZPVLM/p1638175756183800?thread_ts=1638175752.183700&cid=CSUHZPVLM">Slack 对话里</a> 找到了答案，于是决定在这里分享。</p>
<p>我尝试进行的 API 调用是向文件接口发送 POST 请求以上传文件，下面的例子中是一个 .png 文件。接口要求请求类型必须为 <code>multipart/form-data</code>。首先，我查看了 <a href="https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-post">Playwright 文档</a> 中关于 apiRequestContext.post() 的部分，发现可以传递的一个选项是 <code>multipart</code>（而不是通常用于发布 JSON 数据的 data）。</p>
<hr />
<ul>
<li><code>multipart</code> <<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a><<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type">string</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type">string</a>|<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type">number</a>|<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean</a>|[ReadStream]|<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>> 提供一个对象，该对象将使用 <code>multipart/form-data</code> 编码作为 HTML 表单发送，并作为请求体。如果指定了此参数，则 <code>content-type</code> 头将被设置为 <code>multipart/form-data</code>，除非显式提供。文件值可以传递为 <a href="https://nodejs.org/api/fs.html#fs_class_fs_readstream"><code>fs.ReadStream</code></a> 或包含文件名、mime 类型及其内容的类文件对象。<a href="https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-post-option-multipart">#</a></li>
<li><code>name</code> <<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type">string</a>> 文件名</li>
<li><code>mimeType</code> <<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type">string</a>> 文件类型</li>
<li><code>buffer</code> <<a href="https://nodejs.org/api/buffer.html#buffer_class_buffer">Buffer</a>> 文件内容</li>
</ul>
<hr />
<p>在查看文档和 Slack 对话后，我意识到还需要进一步了解如何创建一个 <code>buffer</code> 并将其传递到 POST 请求中。之后，我成功地构建了一个运行正常的 Playwright 测试，如下例所示。</p>
<pre data-lang="typescript" style="background-color:#191919;color:#f8f8f2;" class="language-typescript "><code class="language-typescript" data-lang="typescript"><span style="color:#ff5e5e;">import </span><span>{ </span><span style="color:#e9fdac;">expect</span><span>, </span><span style="color:#e9fdac;">request </span><span>} </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">@playwright/test</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">fs </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">fs</span><span style="color:#ffffff;">"</span><span>;
</span><span style="color:#ff5e5e;">import </span><span style="color:#e9fdac;">path </span><span style="color:#ff5e5e;">from </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">path</span><span style="color:#ffffff;">"</span><span>;
</span><span>
</span><span>
</span><span style="color:#8cdaff;">test</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">POST: Upload a file</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ff5e5e;">async </span><span style="color:#ffffff;">(</span><span>{ </span><span style="font-style:italic;color:#fc9354;">request</span><span>, </span><span style="font-style:italic;color:#fc9354;">baseURL </span><span>}</span><span style="color:#ffffff;">) </span><span style="font-style:italic;color:#fbdfb5;">=> </span><span>{
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">file </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">path</span><span>.</span><span style="color:#6699cc;">resolve</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">lib/</span><span style="color:#ffffff;">"</span><span>, </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">logo.png</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">image </span><span style="color:#ff5e5e;">= </span><span style="color:#e9fdac;">fs</span><span>.</span><span style="color:#8cdaff;">readFileSync</span><span>(</span><span style="color:#e9fdac;">file</span><span>);
</span><span>
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">response </span><span style="color:#ff5e5e;">= await </span><span style="color:#e9fdac;">request</span><span>.</span><span style="color:#8cdaff;">post</span><span>(</span><span style="color:#e9fdac;">baseURL </span><span style="color:#ff5e5e;">+ </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">/files</span><span style="color:#ffffff;">"</span><span>, {
</span><span> headers: {
</span><span> Accept: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">*/*</span><span style="color:#ffffff;">"</span><span>,
</span><span> ContentType: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">multipart/form-data</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> multipart: {
</span><span> file: {
</span><span> name: </span><span style="color:#e9fdac;">file</span><span>,
</span><span> mimeType: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">image/png</span><span style="color:#ffffff;">"</span><span>,
</span><span> buffer: </span><span style="color:#e9fdac;">image</span><span>,
</span><span> },
</span><span> title: </span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Logo of Business</span><span style="color:#ffffff;">"</span><span>,
</span><span> },
</span><span> });
</span><span> </span><span style="font-style:italic;color:#fbdfb5;">const </span><span style="color:#e9fdac;">body </span><span style="color:#ff5e5e;">= </span><span style="color:#ecfdb9;">JSON</span><span>.</span><span style="color:#6699cc;">parse</span><span>(</span><span style="color:#ff5e5e;">await </span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">text</span><span>());
</span><span>
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">response</span><span>.</span><span style="color:#8cdaff;">status</span><span>()).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#fdb082;">201</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.title).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">Logo of Business</span><span style="color:#ffffff;">"</span><span>);
</span><span> </span><span style="color:#8cdaff;">expect</span><span>(</span><span style="color:#e9fdac;">body</span><span>.type).</span><span style="color:#8cdaff;">toBe</span><span>(</span><span style="color:#ffffff;">"</span><span style="color:#fbe3bf;">png</span><span style="color:#ffffff;">"</span><span>);
</span><span>}
</span></code></pre>
<p>更多关于 Http POST 方法不同请求类型的详细信息可以在 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST">MDN Web Docs</a> 上找到。</p>
<h2 id="lai-yuan">来源</h2>
<p>来源网址: https://playwrightsolutions.com/making-a-post/</p>
<p>发布时间: 2022-03-12T06:12:26.000Z</p>
Terms
2020-01-08T00:00:00+00:00
2020-01-08T00:00:00+00:00
Thomas Weitzel
https://playwright.itest.info/pages/terms/
<p><em>These terms have been last updated on January 8, 2020</em>.</p>
<p>All content on this web site is for informational purposes only.</p>
<p>As the owner of this web site, I ...</p>
<ul>
<li>make no representations as to the accuracy or completeness of any information on this site or by following any link.</li>
<li>will not be liable for any errors or omissions in this information, nor for the availability of this information.</li>
<li>will not be liable for any losses, injuries, or damages from the display or use of this information.</li>
</ul>
<p>These terms are subject to change at any time and without notice.</p>
Privacy Policy
2019-03-11T00:00:00+00:00
2019-03-11T00:00:00+00:00
Thomas Weitzel
https://playwright.itest.info/pages/privacy/
<h3 id="data-protection">Data protection</h3>
<p>The use of my website is possible without providing personal data.
If personal data can be entered (for example: name, address, or email addresses), this is on a voluntary basis.
These data will not be disclosed to third parties without your explicit consent.</p>
<p>Data transmission in the Internet (e.g.
in the communication by email) can have security gaps.
A complete protection of the data from access by third parties is not possible.
The use of contact data published in the imprint by third parties for sending me unsolicited advertising and information materials is hereby prohibited.
I reserve the right to take legal action in the event of unsolicited promotional information, such as spam emails.</p>
<h3 id="hosting">Hosting</h3>
<p>I host my website at netcup. The provider is netcup GmbH, Daimlerstr. 25, 76185 Karlsruhe, referred to as "netcup".</p>
<p>Details on netcup's privacy policy can be found on their homepage under <a href="https://www.netcup.eu/kontakt/datenschutzerklaerung.php">privacy policy</a>.</p>
<p>The use of netcup is based on Article 6(1)(f) GDPR.
I have a legitimate interest that my website is available to visitors as reliably as possible.
If consent was requested, data processing takes place exclusively based on Article 6(1)(a) GDPR.
Consent can be revoked at any time.</p>
<h3 id="data-processing">Data processing</h3>
<p>I have signed a data processing contract with netcup.
This contract is required by privacy law and guarantees, that data of visitors of my website will be processed in compliance with the GDPR.</p>
<h3 id="responsible-controller">Responsible controller</h3>
<p>The person responsible for data processing on this website is the person named in the [imprint]({{< relref "imprint" >}}).
The "responsible controller" means the natural or legal person who decides on the processing of data (for example: name, address, or email addresses).</p>
<h3 id="information-cancellation-deletion">Information, cancellation, deletion</h3>
<p>At any time you have the right to free information about your stored personal data, its origins, recipients, and the purpose of the data processing, as well as a right to correction or deletion of this data.
You can contact me at any time via the address given in the imprint for further questions on the subject of your personal data.</p>
<h3 id="log-files-on-the-server">Log files on the server</h3>
<p>The web server stores information in its log files, some of which your browser transmits to me.
These are:</p>
<ul>
<li>the IP address of your computer</li>
<li>the time of the request</li>
<li>the name of the requested page</li>
<li>a status code (if the request was successful or not)</li>
<li>the referrer URL</li>
<li>the browser type, browser version and other information sent by your browser</li>
</ul>
<p>This data can not be used to identify a specific person.
I will not merge this data with other data sources.
I reserve the right to check this data retrospectively, if I become aware of illegal use of my website.</p>
<h3 id="ssl-encryption">SSL encryption</h3>
<p>This site uses SSL encryption for security reasons and to protect the transmission of sensitive content, such as the requests you send to me.
An encrypted connection can be recognized by the fact that the address in the address bar of the browser starts with <code>https://</code> and a lock symbol nearby.
If SSL encryption is enabled, the data you submit to me can not be read by third parties.</p>
<h3 id="cookies">Cookies</h3>
<p>This site uses functional cookies only on pages where math formulas are displayed with the help of the <a href="https://www.mathjax.org/">MathJax</a> library.
These cookies are only used in the context of MathJax and the display of math formulas.
The readability of the website represents a legitimate interest within the meaning of Article 6(1)(f) GDPR.
I do not use any other cookies on this website.</p>
<h3 id="embedded-content-from-other-websites">Embedded content from other websites</h3>
<p>Posts on this site may contain embedded content (e.g. videos, pictures, comments, etc.).
Embedded content from other websites behaves just as if the visitor had visited the other website.</p>
<p>These websites may collect information about you, use cookies, embed additional third-party tracking services, and record your interaction with this embedded content, if you have an account and are logged in to this other site.</p>
<h3 id="what-rights-do-you-have-to-your-data">What rights do you have to your data?</h3>
<p>You may request that I export your personal information, including any data you have provided to me.
In addition, you may request the deletion of any personal information I have stored about you.
This does not include the data that I need to keep for administrative, legal, or security-related purposes.</p>