1 line
35 KiB
JavaScript
1 line
35 KiB
JavaScript
(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[1293],{3342:function(e,n,t){"use strict";t.r(n),t.d(n,{assets:function(){return k},contentTitle:function(){return s},default:function(){return d},frontMatter:function(){return p},metadata:function(){return u},toc:function(){return m}});var l=t(87462),a=t(63366),r=(t(67294),t(3905)),i=t(93456),o=["components"],p={sidebar_label:"\u5de5\u7a0b\u5316\uff1a\u5982\u4f55\u5bf9\u524d\u7aef\u4ee3\u7801\u5b9e\u65bd\u6d4b\u8bd5",sidebar_position:3},s="\u5982\u4f55\u5bf9\u524d\u7aef\u4ee3\u7801\u5b9e\u65bd\u6d4b\u8bd5",u={unversionedId:"book4/engineer-front-end-testing",id:"book4/engineer-front-end-testing",title:"\u5982\u4f55\u5bf9\u524d\u7aef\u4ee3\u7801\u5b9e\u65bd\u6d4b\u8bd5",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book4/engineer-front-end-testing.md",sourceDirName:"book4",slug:"/book4/engineer-front-end-testing",permalink:"/awesome-interview/book4/engineer-front-end-testing",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_label:"\u5de5\u7a0b\u5316\uff1a\u5982\u4f55\u5bf9\u524d\u7aef\u4ee3\u7801\u5b9e\u65bd\u6d4b\u8bd5",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"\u6d4f\u89c8\u5668\uff1a\u672c\u5730\u5b58\u50a8\u65b9\u5f0f\u53ca\u573a\u666f",permalink:"/awesome-interview/book4/browser-local-storage"},next:{title:"\u5de5\u7a0b\u5316\uff1a\u8c08\u8c08\u5fae\u524d\u7aef",permalink:"/awesome-interview/book4/engineer-mfa"}},k={},m=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",level:2},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",level:2},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",level:2},{value:"\u6d4b\u8bd5\u7684\u79cd\u7c7b",id:"\u6d4b\u8bd5\u7684\u79cd\u7c7b",level:3},{value:"\u5982\u4f55\u7f16\u5199\u6d4b\u8bd5",id:"\u5982\u4f55\u7f16\u5199\u6d4b\u8bd5",level:3},{value:"\u6d4b\u8bd5\u7684\u7ed3\u6784",id:"\u6d4b\u8bd5\u7684\u7ed3\u6784",level:4},{value:"\u6d4b\u8bd5\u5de5\u5177",id:"\u6d4b\u8bd5\u5de5\u5177",level:4},{value:"\u8fdb\u884c\u6d4b\u8bd5\u7684\u6700\u4f73\u5b9e\u8df5",id:"\u8fdb\u884c\u6d4b\u8bd5\u7684\u6700\u4f73\u5b9e\u8df5",level:3},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",level:2}],c={toc:m};function d(e){var n=e.components,t=(0,a.Z)(e,o);return(0,r.kt)("wrapper",(0,l.Z)({},c,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"\u5982\u4f55\u5bf9\u524d\u7aef\u4ee3\u7801\u5b9e\u65bd\u6d4b\u8bd5"},"\u5982\u4f55\u5bf9\u524d\u7aef\u4ee3\u7801\u5b9e\u65bd\u6d4b\u8bd5"),(0,r.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u4f60\u662f\u5982\u4f55\u770b\u5f85\u8f6f\u4ef6\u6d4b\u8bd5\u7684\uff1f"),(0,r.kt)("li",{parentName:"ul"},"\u4f60\u5728\u5de5\u4f5c\u4e2d\u662f\u5982\u4f55\u5b9e\u65bd\u6d4b\u8bd5\u7684\uff1f"),(0,r.kt)("li",{parentName:"ul"},"\u5bf9\u524d\u7aef\u4ee3\u7801\u8fdb\u884c\u6d4b\u8bd5\uff0c\u6709\u54ea\u4e9b\u6d4b\u8bd5\u65b9\u6cd5\uff1f"),(0,r.kt)("li",{parentName:"ul"},"\u8bf4\u8bf4\u4f60\u5bf9\u6d4b\u8bd5\u9a71\u52a8\u5f00\u53d1\u7684\u7406\u89e3\uff1f")),(0,r.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"Unit Tests")," ",(0,r.kt)("inlineCode",{parentName:"p"},"E2E Tests")," ",(0,r.kt)("inlineCode",{parentName:"p"},"\u6d4b\u8bd5\u8986\u76d6\u7387")," ",(0,r.kt)("inlineCode",{parentName:"p"},"TDD")," ",(0,r.kt)("inlineCode",{parentName:"p"},"BDD")),(0,r.kt)("p",null,"\u6d4b\u8bd5\u662f\u4fdd\u969c\u4ee3\u7801\u8d28\u91cf\u7684\u91cd\u8981\u624b\u6bb5\uff0c\u53ef\u4ee5\u9a8c\u8bc1\u6211\u4eec\u4ee3\u7801\u7684\u6b63\u786e\u6027\uff1b\u6d4b\u8bd5\u53ef\u4ee5\u589e\u5f3a\u6211\u4eec\u5728\u4fee\u6539\u4ee3\u7801\u65f6\u7684\u4fe1\u5fc3\uff0c\u4fdd\u8bc1\u4ee3\u7801\u91cd\u6784\u7684\u6b63\u786e\u6027\uff1b\u7f16\u5199\u6d4b\u8bd5\u8fd8\u6709\u52a9\u4e8e\u7406\u89e3\u4e1a\u52a1\u529f\u80fd\uff0c\u907f\u514d\u5728\u7f16\u5199\u4ee3\u7801\u65f6\u505a\u51fa\u8fc7\u5ea6\u7684\u8bbe\u8ba1\uff1b\u5bf9\u4e8e\u5f00\u53d1\u4eba\u5458\u6765\u8bf4\uff0c\u6d4b\u8bd5\u7528\u4f8b\u8fd8\u662f\u6700\u597d\u7684\u5f00\u53d1\u6587\u6863\u3002\u6d4b\u8bd5\u7684\u5206\u7c7b\u65b9\u6cd5\u6709\u5f88\u591a\u79cd\uff0c\u4e00\u822c\u6309\u6d4b\u8bd5\u9636\u6bb5\u53ef\u4ee5\u5206\u4e3a\u5355\u5143\u6d4b\u8bd5\uff08Unit Tests\uff09\u3001\u96c6\u6210\u6d4b\u8bd5\uff08Integration Tests\uff09\u3001E2E \u6d4b\u8bd5\uff08\u7aef\u5230\u7aef\u6d4b\u8bd5\uff0cEnd-to-End Tests\uff09\u6765\u4fdd\u969c\u4ea7\u54c1\u5173\u952e\u8def\u5f84\u7684\u53ef\u9760\u6027\u3002"),(0,r.kt)("p",null,"\u4e00\u822c\u6765\u8bf4\uff0c\u6d4b\u8bd5\u4ee3\u7801\u7531\u5927\u91cf\u7684\u5355\u5143\u6d4b\u8bd5\uff0c\u9002\u4e2d\u7684\u96c6\u6210\u6d4b\u8bd5\uff0c\u4ee5\u53ca\u5c11\u91cf\u7684 E2E \u6d4b\u8bd5\u6784\u6210\u3002"),(0,r.kt)("p",null,"\u6d4b\u8bd5\u9a71\u52a8\u5f00\u53d1\uff08TDD\uff09\u662f\u4e00\u79cd\u901a\u8fc7\u7f16\u5199\u6d4b\u8bd5\u6765\u6307\u5bfc\u8f6f\u4ef6\u7684\u5f00\u53d1\u8fc7\u7a0b\uff0c\u6784\u5efa\u8f6f\u4ef6\u7684\u6280\u672f\u3002"),(0,r.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,r.kt)("h3",{id:"\u6d4b\u8bd5\u7684\u79cd\u7c7b"},"\u6d4b\u8bd5\u7684\u79cd\u7c7b"),(0,r.kt)("p",null,"\u4ece\u4e0d\u540c\u7684\u89d2\u5ea6\u5bf9\u5f85\u6d4b\u8bd5\uff0c\u4f1a\u6709\u4e0d\u540c\u7684\u5206\u7c7b\u65b9\u6cd5\uff0c\u4f8b\u5982\u767d\u76d2\u6d4b\u8bd5\u3001\u56de\u5f52\u6d4b\u8bd5\u3001\u7070\u5ea6\u6d4b\u8bd5\u3001\u5192\u70df\u6d4b\u8bd5\u7b49\u3002\u4ee5\u4e0b\u4e3b\u8981\u5173\u6ce8\u6d4b\u8bd5\u9636\u6bb5\u3002\u6309\u6d4b\u8bd5\u7684\u4e0d\u540c\u76ee\u6807\uff0c\u5728\u4ee3\u7801\u4e2d\u8fdb\u884c\u4ee5\u4e0b\u4e09\u79cd\u81ea\u52a8\u5316\u6d4b\u8bd5\uff1a"),(0,r.kt)("p",null,"\u8fd9\u4e09\u79cd\u6d4b\u8bd5\u6784\u6210\u6d4b\u8bd5\u91d1\u5b57\u5854\uff0c\u4ece E2E \u6d4b\u8bd5\u5230\u5355\u5143\u6d4b\u8bd5\uff0c\u96c6\u6210\u5ea6\u8d8a\u6765\u8d8a\u4f4e\u3001\u9694\u79bb\u5ea6\u8d8a\u6765\u8d8a\u9ad8\uff0c\u8fd0\u884c\u6d4b\u8bd5\u6240\u9700\u8981\u7684\u65f6\u95f4\u4e5f\u8d8a\u6765\u8d8a\u77ed\u3002\n",(0,r.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/4338052/165334296-ecb4e75d-d166-4735-bf82-c2a96279dbe5.png",alt:"image"})),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u5355\u5143\u6d4b\u8bd5")),(0,r.kt)("p",null,"\u662f\u6307\u5bf9\u8f6f\u4ef6\u4e2d\u72ec\u7acb\u5355\u5143\uff08\u901a\u5e38\u662f\u4e00\u4e2a\u51fd\u6570\u3001\u4e00\u4e2a\u6a21\u5757\u6216\u4e00\u7ec4\u7d27\u5bc6\u5173\u8054\u7684\u529f\u80fd\u96c6\u5408\uff09\u8fdb\u884c\u6d4b\u8bd5\u7684\u65b9\u6cd5\u3002\u5355\u5143\u6d4b\u8bd5\u81f3\u5c11\u5e94\u8be5\u5bf9\u6a21\u5757\u66b4\u9732\u7684\u516c\u5171\u63a5\u53e3\u8fdb\u884c\u6d4b\u8bd5\uff0c\u540c\u65f6\u4e0d\u5e94\u4e0e\u4ee3\u7801\u7684\u5177\u4f53\u5b9e\u73b0\u8026\u5408\u5f97\u592a\u7d27\u5bc6\uff08\u5982 Element \u7684 classname\uff09\u3002\u5355\u5143\u6d4b\u8bd5\u4e2d\u7ecf\u5e38\u4f1a\u7528\u5230\u88ab\u79f0\u4e3a Mocks \u6216 Stubs \u7684 fake \u5b9e\u73b0\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u6d4b\u8bd5\u514d\u4e8e\u5f71\u54cd\u771f\u5b9e\u7684\u7cfb\u7edf\uff0c\u6216\u8005\u8ba9\u6d4b\u8bd5\u8fd0\u884c\u5f97\u66f4\u5feb\u3002"),(0,r.kt)("p",null,"\u5173\u4e8e\u6d4b\u8bd5\u7684 mock\uff0c\u4e00\u822c\u6709\u4e24\u79cd\u4e0d\u540c\u7684\u610f\u89c1\uff1a\u4e00\u6d3e\u8ba4\u4e3a\u5bf9\u5f53\u524d\u6d4b\u8bd5\u70b9\u5173\u6ce8\u4e4b\u5916\u7684\u4e1c\u897f\u90fd\u53ef\u4ee5\u8fdb\u884c mock\uff0c\u4ee5\u5b9e\u73b0\u5b8c\u7f8e\u7684\u9694\u79bb\uff0c\u6765\u8fbe\u5230\u907f\u514d\u526f\u4f5c\u7528\u548c\u8fdb\u884c\u590d\u6742\u7684\u6d4b\u8bd5\u73af\u5883\u8bbe\u7f6e\u7684\u76ee\u7684\uff1b\u53e6\u4e00\u6d3e\u8ba4\u4e3a\u8981\u5c3d\u91cf\u5c11\u7684\u5728\u6d4b\u8bd5\u4e2d\u4f7f\u7528 mock\uff0c\u56e0\u4e3a mock \u53ef\u80fd\u4e0e\u771f\u5b9e\u7684\u63a5\u53e3\u5b58\u5728\u4e0d\u4e00\u81f4\u7684\u5730\u65b9\uff0c\u800c\u8fd9\u5f88\u96be\u5bdf\u89c9\u5230\u3002\u5728\u5b9e\u9645\u7684\u5de5\u4f5c\u4e2d\uff0c\u90fd\u4f1a\u7efc\u5408\u8003\u8651\u8fd9\u4e24\u6d3e\u7684\u610f\u89c1\uff0c\u5408\u7406\u8c28\u614e\u7684\u8fd0\u7528 mock\u3002\u901a\u5e38\u6d4b\u8bd5\u8986\u76d6\u7387\u8fbe\u5230 100% \u5e76\u4e0d\u610f\u5473\u7740\u8f6f\u4ef6\u5c31\u662f\u7edd\u5bf9\u53ef\u9760\u7684\u3002"),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u96c6\u6210\u6d4b\u8bd5")),(0,r.kt)("p",null,"\u4e00\u4e2a\u5b8c\u6574\u7684\u8f6f\u4ef6\u901a\u5e38\u9700\u8981\u5f88\u591a\u5b50\u7cfb\u7edf\u914d\u5408\u5de5\u4f5c\u3002\u6bd4\u5982\u5bf9\u540e\u7aef\u6765\u8bf4\uff0c\u5305\u542b\u6570\u636e\u5e93\u3001\u6587\u4ef6\u7cfb\u7edf\u53ca\u5176\u4ed6\u7f51\u7edc\u8c03\u7528\uff1b\u5bf9\u524d\u7aef\u6765\u8bf4\uff0c\u5305\u542b UI \u7ec4\u4ef6\uff0c\u6570\u636e\u4ed3\u5e93\uff0c\u7f51\u7edc\u8bf7\u6c42\u7b49\u3002\u6b63\u5982\u5355\u5143\u6d4b\u8bd5\u96be\u4ee5\u7cbe\u786e\u754c\u5b9a\u4e00\u4e2a\u5355\u5143\u7684\u8303\u56f4\u4e00\u6837\uff0c\u96c6\u6210\u6d4b\u8bd5\u5728\u8fb9\u754c\u7684\u786e\u5b9a\u4e2d\u6bd4\u5355\u5143\u6d4b\u8bd5\u66f4\u52a0\u6a21\u7cca\u3002\u96c6\u6210\u6d4b\u8bd5\u4e00\u822c\u662f\u6307\u5bf9\u7cfb\u7edf\u548c\u5916\u90e8\u529f\u80fd\u7684\u96c6\u6210\u6574\u4f53\u8fdb\u884c\u7684\u6d4b\u8bd5\u3002"),(0,r.kt)("p",null,"\u53e6\u4e00\u65b9\u9762\uff0c\u96c6\u6210\u6d4b\u8bd5\u7684\u542b\u4e49\u901a\u5e38\u6bd4\u5355\u5143\u6d4b\u8bd5\u66f4\u6a21\u7cca\uff0c\u5982\u4f55\u786e\u5b9a\u6d4b\u8bd5\u7684\u8fb9\u754c\u5f80\u5f80\u968f\u7740\u9879\u76ee\u7684\u5177\u4f53\u60c5\u51b5\u800c\u5404\u6709\u4e0d\u540c\u3002\u96c6\u6210\u6d4b\u8bd5\u4e2d\u901a\u5e38\u6709\u7740\u548c\u5355\u5143\u6d4b\u8bd5\u91cd\u590d\u7684\u90e8\u5206\u3002\u6709\u4e00\u79cd\u89c2\u70b9\u662f\u8ba4\u4e3a\u53ef\u4ee5\u7528\u5951\u7ea6\u6d4b\u8bd5\uff08Contract Tests\uff09\u4ee3\u66ff\u90e8\u5206\u96c6\u6210\u6d4b\u8bd5\u3002"),(0,r.kt)("p",null,"\u5728\u73b0\u4ee3\u5316\u7684\u7ec4\u7ec7\u67b6\u6784\u4e2d\uff0c\u968f\u7740\u8f6f\u4ef6\u7684\u89c4\u6a21\u8d8a\u6765\u8d8a\u5927\uff0c\u5f00\u53d1\u90e8\u95e8\u4e5f\u4f1a\u5206\u6210\u5404\u4e2a\u89c4\u6a21\u8f83\u5c0f\u7684\u56e2\u961f\uff0c\u5404\u81ea\u8d1f\u8d23\u76f8\u5bf9\u72ec\u7acb\u7684\u90e8\u5206\uff0c\u6784\u5efa\u9ad8\u5185\u805a\u3001\u4f4e\u8026\u5408\u7684\u670d\u52a1\u3002\u4e0d\u540c\u7684\u670d\u52a1\u4e4b\u95f4\u901a\u5e38\u662f\u901a\u8fc7\u63a5\u53e3\u4e92\u76f8\u901a\u4fe1\u7684\uff0c\u6bd4\u5982\u901a\u8fc7 HTTP \u8fdb\u884c REST \u901a\u4fe1\uff0c\u4f7f\u7528 gRPC \u6765\u8fdb\u884c RPC \u901a\u4fe1\uff0c\u6216\u8005\u4f7f\u7528\u6d88\u606f\u961f\u5217\u6765\u8fdb\u884c\u901a\u4fe1\u3002\u8fd9\u65f6\uff0c\u53ef\u4ee5\u8003\u8651\u4f7f\u7528\u5951\u7ea6\u6d4b\u8bd5\uff0c\u6765\u5bf9\u5404\u4e2a\u5b50\u7cfb\u7edf\u63d0\u4f9b\u7684\u63a5\u53e3\u8fdb\u884c\u6d4b\u8bd5\u3002"),(0,r.kt)(i.Mermaid,{config:{},chart:"flowchart TB\n subgraph \u96c6\u6210\u6d4b\u8bd5\u7ed3\u6784\n E1[\u670d\u52a1\u7aef] --\x3e I\n E2[\u5b89\u5353\u7aef] --\x3e I\n E3[iOS\u7aef] --\x3e I\n E4[Web\u7aef] --\x3e I\n I[\u96c6\u6210\u6d4b\u8bd5] --\x3e R[\u63a8\u51fa]\n end\n subgraph \u5951\u7ea6\u6d4b\u8bd5\u7ed3\u6784\n M1[\u670d\u52a1\u7aef] --\x3e C1[\u5951\u7ea6\u6d4b\u8bd5]\n M2[\u5b89\u5353\u7aef] --\x3e C2[\u5951\u7ea6\u6d4b\u8bd5]\n M3[iOS\u7aef] --\x3e C3[\u5951\u7ea6\u6d4b\u8bd5]\n M4[Web\u7aef] --\x3e C4[\u5951\u7ea6\u6d4b\u8bd5]\n C1 --\x3e R1[\u63a8\u51fa]\n C2 --\x3e R1[\u63a8\u51fa]\n C3 --\x3e R1[\u63a8\u51fa]\n C4 --\x3e R1[\u63a8\u51fa]\n end",mdxType:"Mermaid"}),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"E2E \u6d4b\u8bd5")),(0,r.kt)("p",null,"\u6d4b\u8bd5\u91d1\u5b57\u5854\u7684\u6700\u9876\u7aef\u4e00\u822c\u662f E2E \u6d4b\u8bd5\uff0c\u5728\u8fdb\u884c\u6d4b\u8bd5\u65f6\uff0c\u4e00\u822c\u6709\u6d4b\u8bd5\u4eba\u5458\u624b\u52a8\u8fdb\u884c\u7684\u6d4b\u8bd5\uff0c\u4e5f\u6709\u81ea\u52a8\u5316\u7684\u5de5\u5177\u8fdb\u884c\u7684\u6d4b\u8bd5\u3002"),(0,r.kt)("p",null,"E2E \u6d4b\u8bd5\u4e2d\u7684\u4e00\u6761\u7528\u4f8b\u4f1a\u8986\u76d6\u4e00\u6761\u5b8c\u6574\u7684\u7528\u6237\u64cd\u4f5c\u6d41\u7a0b\u3002\u5bf9\u4e8e web \u7a0b\u5e8f\u6765\u8bf4\uff0c\u6211\u4eec\u4f1a\u6d4b\u8bd5\u7528\u6237\u7684\u8f93\u5165\u662f\u5426\u89e6\u53d1\u4e86\u6b63\u786e\u7684\u52a8\u4f5c\u3001\u6570\u636e\u662f\u5426\u5448\u73b0\u7ed9\u4e86\u7528\u6237\u3001UI \u72b6\u6001\u662f\u5426\u6309\u7167\u9884\u671f\u6539\u53d8\u7b49\u7b49\u3002"),(0,r.kt)("p",null,"Web \u5e94\u7528\u7a0b\u5e8f\u7684 E2E \u6d4b\u8bd5\u901a\u5e38\u662f\u4f7f\u7528 WebDriver \u6765\u9a71\u52a8\u5b9e\u9645\u7684\u6d4f\u89c8\u5668\u8fd0\u884c\u6765\u8fdb\u884c\u6d4b\u8bd5\u7684\uff0c\u8fd9\u901a\u5e38\u610f\u5473\u7740 E2E \u6d4b\u8bd5\u4f1a\u5f88\u6162\u3002\u6240\u4ee5\u6211\u4eec\u5728\u529f\u80fd\u70b9\u80fd\u591f\u88ab\u524d\u9762\u4e24\u79cd\u6d4b\u8bd5\u8986\u76d6\u7684\u65f6\u5019\uff0c\u5c3d\u91cf\u91c7\u7528\u5b83\u4eec\u6765\u8fdb\u884c\u6d4b\u8bd5\u3002"),(0,r.kt)("h3",{id:"\u5982\u4f55\u7f16\u5199\u6d4b\u8bd5"},"\u5982\u4f55\u7f16\u5199\u6d4b\u8bd5"),(0,r.kt)("p",null,"\u6700\u7406\u60f3\u7684\u72b6\u6001\u662f\u8df5\u884c\u6d4b\u8bd5\u9a71\u52a8\u5f00\u53d1\uff0c\u91c7\u7528\u5148\u7ea2\u540e\u7eff\u7684\u6d41\u7a0b\u5f00\u53d1\u8f6f\u4ef6\u3002\u8fd9\u6bd4\u5199\u5b8c\u529f\u80fd\u4ee3\u7801\u540e\u518d\u8865\u5145\u6d4b\u8bd5\u8981\u597d\uff0c\u56e0\u4e3a\u540e\u8865\u6d4b\u8bd5\u7528\u4f8b\u662f\u5728\u529f\u80fd\u4ee3\u7801\u5df2\u7ecf\u5b8c\u6210\u7684\u60c5\u51b5\u4e0b\u8fdb\u884c\u7684\uff0c\u8fd9\u4e5f\u5c31\u662f\u6240\u8c13\u7684\u767d\u76d2\u6d4b\u8bd5\u3002"),(0,r.kt)("p",null,"\u767d\u76d2\u6d4b\u8bd5\u53ef\u80fd\u9762\u4e34\u67d0\u4e9b\u601d\u7ef4\u76f2\u70b9\uff08\u4f8b\u5982\u4e00\u65e6\u4ece\u4e00\u5806\u4e0d\u89c4\u5219\u7684\u56fe\u5f62\u4e2d\u627e\u51fa\u4e86\u4e94\u89d2\u661f\uff0c\u540e\u9762\u518d\u6b21\u770b\u5230\u65f6\u5c31\u5f88\u96be\u518d\u5ffd\u7565\u5b83\u4e86\uff09\uff0c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u6d4b\u8bd5\u8986\u76d6\u7684\u4e0d\u591f\u5168\u9762\u3002\u767d\u76d2\u6d4b\u8bd5\u4e5f\u53ef\u80fd\u8fc7\u591a\u7684\u6d4b\u8bd5\u8fb9\u7f18\u60c5\u51b5\uff0c\u800c\u5ffd\u7565\u4e86\u4e1a\u52a1\u4e3b\u6d41\u7a0b\u3002\n",(0,r.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/4338052/164974483-2a382312-1b02-4336-87fa-02c7d6679542.png",alt:"image"})),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,r.kt)("a",{parentName:"p",href:"https://insights.thoughtworks.cn/test-like-user-1/"},"\u50cf\u7528\u6237\u4e00\u6837\u6d4b\u8bd5\uff1a\u6253\u7834\u77e5\u8bc6\u8bc5\u5492"))),(0,r.kt)("p",null,"TDD \u6709\u56db\u4e2a\u5173\u952e\u70b9\uff1a"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},"\u601d\u8003\uff08Think\uff09\uff1a\u5bf9\u4e1a\u52a1\u9700\u6c42\u8fdb\u884c\u62c6\u89e3\uff0c\u5c06\u9700\u6c42\u5206\u89e3\u4e3a\u6709\u4e0a\u4e0b\u6587\u3001\u884c\u4e3a\u548c\u9884\u671f\u7ed3\u679c\u7684\u4e00\u4e2a\u6216\u591a\u4e2a\u4efb\u52a1\u5217\u8868\uff0c\u5e76\u4fdd\u8bc1\u5217\u8868\u4e2d\u7684\u6bcf\u4e2a\u4efb\u52a1\u662f\u7b80\u5355\u7684\u3001\u80fd\u5feb\u901f\u5b9e\u73b0\u7684\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u7ea2\uff08Red bar\uff09\uff1a\u4ece\u4e0a\u4e00\u6b65\u7684\u4efb\u52a1\u5217\u8868\u4e2d\u6311\u9009\u4efb\u52a1\uff0c\u4e3a\u8be5\u4efb\u52a1\u5feb\u901f\u7684\u7f16\u5199\u6d4b\u8bd5\u4ee3\u7801\uff0c\u7136\u540e\u4e0d\u65ad\u5faa\u73af\u7684\u5b8c\u6210\u6240\u6709\u4efb\u52a1\u5230\u6d4b\u8bd5\u7528\u4f8b\u7684\u8f6c\u6362\u3002\u6b64\u65f6\uff0c\u8fd0\u884c\u6d4b\u8bd5\u4ee3\u7801\u65f6\u7684\u65ad\u8a00\u662f\u4f1a\u5931\u8d25\u7684\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u7eff\uff08Green bar\uff09\uff1a\u4ee5\u6700\u5feb\u7684\u901f\u5ea6\u8ba9\u6d4b\u8bd5\u53d8\u7eff\uff0c\u8fd9\u901a\u5e38\u610f\u5473\u7740\u4e0d\u9700\u8981\u8003\u8651\u590d\u6742\u7684\u8bbe\u8ba1\u6a21\u5f0f\uff0c\u4e0d\u505a\u8fc7\u5ea6\u8bbe\u8ba1\uff0c\u4e0d\u5199\u591a\u4f59\u7684\u4ee3\u7801\uff0c\u53ea\u9700\u8981\u7b26\u5408\u4e00\u4e9b\u7b80\u5355\u7684\u8bbe\u8ba1\u539f\u5219\u5c31\u884c\u4e86\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u91cd\u6784\uff08Refactor\uff09\uff1a\u5728\u4e0a\u9762\u6240\u6709\u7684\u6d4b\u8bd5\u90fd\u901a\u8fc7\u4ee5\u540e\uff0c\u73b0\u5728\u53ef\u4ee5\u5bf9\u4ee3\u7801\u5f00\u59cb\u91cd\u6784\uff08\u8bc6\u522b\u4ee3\u7801\u4e2d\u7684\u574f\u5473\u9053\uff08Code smell\uff09\u3001\u5e94\u7528\u66f4\u5065\u58ee\u7684\u8bbe\u8ba1\u6a21\u5f0f\u7b49\uff09\uff0c\u800c\u4e0d\u5fc5\u62c5\u5fc3\u7834\u574f\u4e4b\u524d\u7684\u529f\u80fd\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u5f53\u51c6\u5907\u597d\u6dfb\u52a0\u65b0\u7684\u529f\u80fd\u65f6\uff0c\u91cd\u65b0\u5f00\u59cb\u4e0a\u9762\u7684\u5faa\u73af\u3002\u4e0d\u65ad\u6dfb\u52a0\u5c0f\u7684\u589e\u91cf\u662f\u5b9e\u8df5 TDD \u7684\u5173\u952e\u3002")),(0,r.kt)(i.Mermaid,{chart:"flowchart TD\n T[Think] --\x3e R\n R[Red bar] --\x3e G\n G[Green bar] --\x3e RF\n RF[Refactor] --\x3e T\n RF --\x3e G",mdxType:"Mermaid"}),(0,r.kt)("h4",{id:"\u6d4b\u8bd5\u7684\u7ed3\u6784"},"\u6d4b\u8bd5\u7684\u7ed3\u6784"),(0,r.kt)("p",null,"\u5bf9\u4e8e\u6240\u6709\u7684\u6d4b\u8bd5\u4ee3\u7801\uff0c\u4e00\u822c\u90fd\u4f1a\u9075\u5faa\u4ee5\u4e0b\u7684\u7ed3\u6784\u3002"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},"\u8bbe\u7f6e\u6d4b\u8bd5\u6570\u636e\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u8c03\u7528\u6d4b\u8bd5\u65b9\u6cd5\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u65ad\u8a00\u671f\u671b\u7684\u7ed3\u679c\u5df2\u7ecf\u8fd4\u56de\u3002")),(0,r.kt)("p",null,'\u8fd9\u4e2a\u7ed3\u6784\u901a\u5e38\u88ab\u8bb0\u4e3a "Arrange, Act, Assert" \u7684 3A \u77ed\u8bed\u3002\u53e6\u5916\u6709\u4e00\u4e2a\u6765\u81ea BDD\uff08\u884c\u4e3a\u9a71\u52a8\u5f00\u53d1\uff09\u7684\u4e00\u7ec4\u77ed\u8bed\u662f "Given, When, Then"\u3002'),(0,r.kt)("h4",{id:"\u6d4b\u8bd5\u5de5\u5177"},"\u6d4b\u8bd5\u5de5\u5177"),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u5355\u5143\u6d4b\u8bd5\u5de5\u5177")),(0,r.kt)("p",null,"\u6d4b\u8bd5\u6846\u67b6\uff1a\u5e38\u7528\u7684\u6d4b\u8bd5\u6846\u67b6\u6709 Jest\uff0cMocha\uff0cJasmine\uff0cAVA \u7b49\uff0c\u5927\u90e8\u5206\u6d4b\u8bd5\u6846\u67b6\u90fd\u63d0\u4f9b\u4e86\u7c7b\u4f3c\u7684\u529f\u80fd\uff0c\u4e00\u822c\u5305\u62ec\u4ee5\u4e0b\u8fd9\u4e9b\u65b9\u9762\uff1a"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u6d4b\u8bd5\u5757\u7684\u7ec4\u7ec7\uff0c\u6bd4\u5982 describe \u548c it/test \u8bed\u6cd5\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u6bcf\u4e2a describe \u5757\u7684 before","[All]","\uff0cafter","[All]","\uff0cbeforeEach\uff0cafterEach \u94a9\u5b50\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u5168\u5c40\u7684 setup \u548c teardown \u8bbe\u7f6e\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u5339\u914d\u8bed\u6cd5\uff0c\u5404\u4e2a\u6846\u67b6\u4e00\u822c\u62e5\u6709\u76f8\u4f3c\u7684\u63a5\u53e3\uff0c\u800c\u8fd9\u4e2a\u98ce\u683c\u4e00\u822c\u7ee7\u627f\u81ea Chai \u8fd9\u4e2a\u6846\u67b6\u3002"),(0,r.kt)("li",{parentName:"ul"},"Mock \u529f\u80fd\u7684\u652f\u6301\uff0c\u5bf9\u5b9a\u65f6\u5668\u7684 mock\u3001\u5bf9\u51fd\u6570\u7684 mock\u3001\u5bf9\u6a21\u5757\u7684 mock\u3002")),(0,r.kt)("p",null,"\u88ab Chai \u53d1\u626c\u5149\u5927\u7684\u4e09\u79cd\u5339\u914d\u8bed\u6cd5\uff1a"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'// Assert \u7ecf\u5178\u8bed\u6cd5\uff0c\u63d0\u4f9b\u4e86\u5bf9\u88ab\u6d4b\u8bd5\u5bf9\u8c61\u7684\u5404\u4e2a\u7ef4\u5ea6\u7684\u65ad\u8a00\u8bed\u6cd5\u3002\nassert.typeOf(foo, "string");\nassert.equal(foo, "bar");\nassert.lengthOf(foo, 3);\nassert.property(tea, "flavors");\nassert.lengthOf(tea.flavors, 3);\n\n// \u4e0b\u9762\u4e24\u79cd\u90fd\u662f BDD \u98ce\u683c\u7684\u65ad\u8a00\u65b9\u5f0f\uff0c\u5b83\u4eec\u90fd\u4f7f\u7528\u4e86\u66f4\u63a5\u8fd1\u81ea\u7136\u8868\u8fbe\u7684\u8bed\u6cd5\u6765\u8fdb\u884c\u5339\u914d\u3002\n// \u5728 node.js \u548c\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e2d\uff0c\u5b83\u4eec\u51e0\u4e4e\u6ca1\u6709\u533a\u522b\u3002\n// Should \u91c7\u7528\u4e86\u4fee\u6539 Object \u539f\u578b\u7684\u65b9\u5f0f\u5b9e\u73b0\u5230\u94fe\u5f0f\u8bed\u6cd5\uff0c\u8fd9\u53ef\u80fd\u5728\u53e4\u8001\u7684 IE \u6d4f\u89c8\u5668\u6216\u67d0\u4e9b\u5d4c\u5165\u5f0f JS \u8fd0\u884c\u65f6\u4e2d\u4e0d\u80fd\u6b63\u5e38\u5de5\u4f5c\u3002\n\n// Expect\nexpect(foo).to.be.a("string");\nexpect(foo).to.equal("bar");\nexpect(foo).to.have.lengthOf(3);\nexpect(tea).to.have.property("flavors").with.lengthOf(3);\n\n// Should\nfoo.should.be.a("string");\nfoo.should.equal("bar");\nfoo.should.have.lengthOf(3);\ntea.should.have.property("flavors").with.lengthOf(3);\n')),(0,r.kt)("p",null,"\u5176\u4ed6\u62e5\u6709\u7684\u6d4b\u8bd5\u5de5\u5177\uff1a"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u9488\u5bf9\u5177\u4f53 UI \u6846\u67b6\u7684\u6d4b\u8bd5\u63d2\u4ef6\uff0c\u5982\u9488\u5bf9 React \u7684 ",(0,r.kt)("inlineCode",{parentName:"li"},"@testing-library/react"),"\uff0c",(0,r.kt)("inlineCode",{parentName:"li"},"enzyme"),"\uff0c",(0,r.kt)("inlineCode",{parentName:"li"},"react-test-renderer")," \u7b49\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u6a21\u62df DOM \u73af\u5883\u7684 ",(0,r.kt)("inlineCode",{parentName:"li"},"jsdom"),"\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u8df5\u884c BDD \u7684\u4ee3\u8868 ",(0,r.kt)("inlineCode",{parentName:"li"},"Cucumber.js"),"\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u6536\u96c6\u6d4b\u8bd5\u8986\u76d6\u7387\u7684\u8f85\u52a9\u5de5\u5177 ",(0,r.kt)("inlineCode",{parentName:"li"},"istanbul"),"\uff0c\u6216\u4f7f\u7528 v8 \u5f15\u64ce\u5185\u7f6e\u7684\u8986\u76d6\u7387\u529f\u80fd\u7684 ",(0,r.kt)("inlineCode",{parentName:"li"},"c8"),"\u3002")),(0,r.kt)("p",null,"\u6d4b\u8bd5\u8986\u76d6\u7387\u6536\u96c6\u539f\u7406\uff1a"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"istanbul.js")," \u63d0\u4f9b\u4e86\u540d\u4e3a ",(0,r.kt)("inlineCode",{parentName:"p"},"nyc")," \u7684\u5de5\u5177\uff0c\u6267\u884c ",(0,r.kt)("inlineCode",{parentName:"p"},"nyc instrument <input> <output>")," \u5373\u53ef\u5b8c\u6210\u5bf9\u4ee3\u7801\u7684\u63d2\u6869\u3002\u5728\u4ee3\u7801\u5b9e\u9645\u8fd0\u884c\u65f6\uff0c\u63d2\u6869\u4ee3\u7801\u4f1a\u7edf\u8ba1\u6e90\u4ee3\u7801\u5404\u90e8\u5206\u7684\u8fd0\u884c\u6b21\u6570\uff0c\u6765\u7edf\u8ba1\u8986\u76d6\u7387\u3002"),(0,r.kt)("p",null,"\u4f8b\u5b50\uff1a"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="greeting.js"',title:'"greeting.js"'},'function greeting(name = "HZFE") {\n if (DEBUG) {\n name = `${name} (DEBUG)`;\n }\n\n const foo = DEBUG ? "(DEBUG) foo" : "foo";\n\n for (const i = 0; i < name.length; i++) {\n name += "!";\n }\n\n return `Hello ${name}`;\n}\n')),(0,r.kt)("p",null,"\u7ecf\u8fc7 ",(0,r.kt)("inlineCode",{parentName:"p"},"nyc instrument")," \u540e\uff0c\u5927\u81f4\u4ee3\u7801\u5982\u4e0b\uff1a"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="output.js"',title:'"output.js"'},'function cov_g4lly5ec() {\n // ...\n var coverageData = {\n path: "...",\n statementMap: {\n 0: { start: { line: 2, column: 2 }, end: { line: 4, column: 3 } },\n // ...\n },\n fnMap: {\n 0: {\n name: "greeting",\n decl: { start: { line: 1, column: 9 }, end: { line: 1, column: 17 } },\n loc: { start: { line: 1, column: 33 }, end: { line: 13, column: 1 } },\n line: 1,\n },\n },\n branchMap: {\n 0: {\n loc: { start: { line: 1, column: 18 }, end: { line: 1, column: 31 } },\n type: "default-arg",\n locations: [\n { start: { line: 1, column: 25 }, end: { line: 1, column: 31 } },\n ],\n line: 1,\n },\n // ...\n },\n s: { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0 },\n f: { 0: 0 },\n b: { 0: [0], 1: [0, 0], 2: [0, 0] },\n // ...\n };\n // ...\n return actualCoverage;\n}\ncov_g4lly5ec();\nfunction greeting(name = (cov_g4lly5ec().b[0][0]++, "HZFE")) {\n cov_g4lly5ec().f[0]++;\n cov_g4lly5ec().s[0]++;\n if (DEBUG) {\n cov_g4lly5ec().b[1][0]++;\n cov_g4lly5ec().s[1]++;\n name = `${name} (DEBUG)`;\n } else {\n cov_g4lly5ec().b[1][1]++;\n }\n const foo =\n (cov_g4lly5ec().s[2]++,\n DEBUG\n ? (cov_g4lly5ec().b[2][0]++, "(DEBUG) foo")\n : (cov_g4lly5ec().b[2][1]++, "foo"));\n cov_g4lly5ec().s[3]++;\n for (const i = (cov_g4lly5ec().s[4]++, 0); i < name.length; i++) {\n cov_g4lly5ec().s[5]++;\n name += "!";\n }\n cov_g4lly5ec().s[6]++;\n return `Hello ${name}`;\n}\n')),(0,r.kt)("p",null,"istanbul \u5728\u89e3\u6790\u6e90\u4ee3\u7801\u65f6\uff0c\u4f1a\u5728\u51fd\u6570\u4f53\u3001\u9ed8\u8ba4\u53c2\u6570\u3001\u5206\u652f\u8bed\u53e5\u7b49\u5404\u5904\u4f4d\u7f6e\u63d2\u5165\u8bb0\u5f55\u6267\u884c\u6b21\u6570\u7684\u4ee3\u7801\uff0c\u5728\u4e09\u5143\u8fd0\u7b97\u7b26\u7b49\u7279\u6b8a\u4f4d\u7f6e\u4f1a\u5229\u7528 JS \u9017\u53f7\u8fd0\u7b97\u7b26\u7684\u7279\u6027\u63d2\u5165\u7edf\u8ba1\u4ee3\u7801\u3002"),(0,r.kt)("p",null,"\u4f8b\uff0c\u5728",(0,r.kt)("inlineCode",{parentName:"p"},"cov_g4lly5ec().b[1][0]++;")," \u4e4b\u4e2d\u7684 b \u4ee3\u8868 branch\uff08\u5206\u652f\uff09\uff0c1 \u4ee3\u8868\u7b2c\u4e00\u4e2a\u5206\u652f\u8bed\u53e5\uff0c1 \u540e\u9762\u7d27\u8ddf\u7684 0 \u4ee3\u8868\u5206\u652f\u7684\u7b2c\u4e00\u4e2a\u53c9\u8def\u3002\u4f9d\u6b64\u7c7b\u63a8\uff0c\u8fd9\u4e9b\u4ee3\u7801\u8bb0\u5f55\u4e86 f(function)\uff0cs(statement)\uff0cb(branch) \u7684\u6267\u884c\u6b21\u6570\u3002\u540e\u9762\u7684\u7d22\u5f15\u6700\u7ec8\u4f1a\u89e3\u6790\u5230 ",(0,r.kt)("inlineCode",{parentName:"p"},"statementMap"),"\uff0c",(0,r.kt)("inlineCode",{parentName:"p"},"fnMap"),"\uff0c",(0,r.kt)("inlineCode",{parentName:"p"},"branchMap")," \u4e2d\u7684\u5bf9\u5e94\u9879\uff0c\u6620\u5c04\u5230\u6e90\u4ee3\u7801\u4e2d\u7684\u5177\u4f53\u4f4d\u7f6e\u3002\u8fd9\u6837\u5728\u6267\u884c\u5b8c\u6d4b\u8bd5\u7528\u4f8b\u4e2d\uff0c\u5c31\u80fd\u591f\u77e5\u9053\u6e90\u4ee3\u7801\u4e2d\u6bcf\u4e00\u5904\u8bed\u6cd5\u7ed3\u6784\u88ab\u8fd0\u884c\u7684\u60c5\u51b5\u3002"),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"E2E \u6d4b\u8bd5")),(0,r.kt)("p",null,"\u5e38\u89c1\u5de5\u5177\u6709 Pupeteer\u3001Nightwatch\u3001TestCafe\u3001Selenium\u3001Cypress\u3001Playwright \u7b49\u3002\u5b83\u4eec\u90fd\u662f\u901a\u8fc7\u63a7\u5236\u6d4f\u89c8\u5668\u6267\u884c\u4ee3\u7801\u6765\u6a21\u62df\u5b9e\u9645\u7528\u6237\u7684\u64cd\u4f5c\uff0c\u6765\u9a8c\u8bc1 UI \u7684\u53d8\u5316\u7b26\u5408\u9884\u671f\u3002E2E \u6d4b\u8bd5\u7684\u76ee\u7684\u662f\u4e3a\u4e86\u5c3d\u91cf\u6d4b\u8bd5\u8f6f\u4ef6\u5728\u771f\u5b9e\u73af\u5883\u4e0b\u7684\u8868\u73b0\uff0c\u4e00\u822c\u5f88\u5c11\u4f7f\u7528 mock\u3002\n\u57fa\u4e8e\u6d4b\u8bd5\u5728\u771f\u5b9e\u7684\u6d4f\u89c8\u5668\u4e0b\u8fd0\u884c\uff0c\u548c\u6d4b\u8bd5\u73af\u5883\u7f51\u7edc\u4e0d\u7a33\u5b9a\u4e24\u4e2a\u4e3b\u8981\u56e0\u7d20\uff0cE2E \u6d4b\u8bd5\u901a\u5e38\u8981\u6267\u884c\u5f88\u957f\u7684\u65f6\u95f4\uff0c\u5e76\u4e14\u4f1a\u8f83\u9891\u7e41\u7684\u9762\u4e34\u5931\u8d25\u3002\u5728\u5b9e\u9645\u7684\u6301\u7eed\u96c6\u6210\u73af\u5883\u4e2d\uff0c\u4e00\u822c\u4f1a\u8ba9 E2E \u6d4b\u8bd5\u91cd\u8bd5 2 \u5230 3 \u6b21\u6765\u5c3d\u53ef\u80fd\u7684\u6392\u9664\u73af\u5883\u56e0\u7d20\u5bfc\u81f4\u7684\u5931\u8d25\u3002"),(0,r.kt)("p",null,"\u5728\u8fd9\u4e9b\u5e38\u7528\u7684\u5de5\u5177\u4e2d\uff0c\u76ee\u524d\u4f7f\u7528\u6bd4\u8f83\u5e7f\u6cdb\u7684\u4e09\u4e2a\u662f Pupeteer\uff0cCypress\uff0cPlaywright\u3002\u5b83\u4eec\u4e09\u4e2a\u6709\u6bd4\u8f83\u7a81\u51fa\u7684\u7279\u70b9\uff1a"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Pupeteer\uff1aGoogle \u5b98\u65b9\u63d0\u4f9b\u7684\u6d4b\u8bd5\u5de5\u5177\uff0c\u4f7f\u7528 Chrome DevTools Protocol \u4e0e Chromium \u7cfb\u5217\u7684\u6d4f\u89c8\u5668\u8fdb\u884c\u4ea4\u4e92\u3002\u6240\u63d0\u4f9b\u7684 API \u662f\u6bd4\u8f83\u5e95\u5c42\u7684\u57fa\u672c\u64cd\u4f5c\uff0c\u901a\u5e38\u9700\u8981\u81ea\u5df1\u5c01\u88c5\u5e38\u7528\u7684\u64cd\u4f5c\uff0c\u4f46\u5728\u5177\u4f53\u7684\u4f7f\u7528\u4e2d\u76f8\u5bf9\u7075\u6d3b\uff0c\u9650\u5236\u8f83\u5c11\u3002"),(0,r.kt)("li",{parentName:"ul"},"Cypress: \u9ad8\u5ea6\u96c6\u6210\u7684\u6d4b\u8bd5\u5de5\u5177\uff0c\u81ea\u52a8\u7b49\u5f85\u5f02\u6b65\u64cd\u4f5c\uff0c\u964d\u4f4e\u7f16\u7801\u95e8\u69db\u3002\u63d0\u4f9b Test Runner \u53ef\u89c6\u5316\u8fd0\u884c\u6d4b\u8bd5\uff0c\u8bb0\u5f55\u6d4b\u8bd5\u6b65\u9aa4\u4e2d\u7684\u5177\u4f53\u7ec6\u8282\uff0c\u53ef\u4ee5\u67e5\u770b\u6d4b\u8bd5\u4ee3\u7801\u4e2d\u6bcf\u4e00\u6b65\u6240\u5bf9\u5e94\u7684 DOM \u5feb\u7167\uff0c\u4fbf\u4e8e debug\u3002\u57fa\u4e8e iframe \u8fd0\u884c\uff0c\u6d4b\u8bd5\u4ee3\u7801\u548c\u88ab\u6d4b\u8bd5\u5e94\u7528\u5904\u4e8e\u540c\u4e00\u8fd0\u884c\u73af\u5883\uff0c\u53ef\u4ee5\u63d0\u9ad8\u6d4b\u8bd5\u7684\u53ef\u9760\u6027\u3002\u76ee\u524d\u7684\u9650\u5236\u662f\u4e0d\u652f\u6301\u591a\u7a97\u53e3\uff0c\u4ee5\u53ca iframe \u5728\u5b89\u5168\u7b56\u7565\u4e0a\u7684\u5c0f\u90e8\u5206\u65e0\u6cd5\u89c4\u907f\u7684\u9650\u5236\u3002"),(0,r.kt)("li",{parentName:"ul"},"Playwright\uff1a\u5fae\u8f6f\u5f00\u53d1\u7684\u6d4b\u8bd5\u5de5\u5177\uff0c\u652f\u6301\u9664 Chromium \u4e4b\u5916\u7684 Firefox \u548c Safari\uff0c\u62e5\u6709 Trace View \u53ef\u4ee5\u63d0\u4f9b\u7c7b\u4f3c Cypress \u7684\u5f3a\u5927 debug \u4f53\u9a8c\u3002\u652f\u6301\u9664\u4e86 JS/TS \u4ee5\u5916\u7684\u8bed\u8a00\u5982 Python\u3001.NET\u3001Java\uff0c\u9002\u7528\u8303\u56f4\u66f4\u5e7f\u3002")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"\u96c6\u6210\u6d4b\u8bd5")),(0,r.kt)("p",null,"\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u96c6\u6210\u6d4b\u8bd5\u6240\u9700\u4f7f\u7528\u7684\u5de5\u5177\u90fd\u6db5\u76d6\u5728\u5355\u5143\u6d4b\u8bd5\u548c E2E \u6d4b\u8bd5\u4f7f\u7528\u7684\u5de5\u5177\u4e4b\u4e2d\u4e86\u3002"),(0,r.kt)("h3",{id:"\u8fdb\u884c\u6d4b\u8bd5\u7684\u6700\u4f73\u5b9e\u8df5"},"\u8fdb\u884c\u6d4b\u8bd5\u7684\u6700\u4f73\u5b9e\u8df5"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},"\u6d4b\u8bd5\u5e94\u8be5\u8db3\u591f\u5feb\u3002\u53ea\u6709\u6d4b\u8bd5\u80fd\u591f\u5feb\u901f\u8fd0\u884c\u5f97\u5230\u53cd\u9988\uff0c\u6d4b\u8bd5\u4eba\u5458\u624d\u4f1a\u4e50\u610f\u91c7\u7528 TDD \u7684\u65b9\u5f0f\u8fdb\u884c\u5f00\u53d1\u3002\u53cd\u4f8b\u662f E2E \u6d4b\u8bd5\uff0c\u901a\u5e38\u5f00\u53d1\u4eba\u5458\u4e0d\u4f1a\u60f3\u8981\u5728\u672c\u5730\u9891\u7e41\u7684\u8fd0\u884c E2E \u6d4b\u8bd5\uff0c\u56e0\u4e3a\u8fd9\u4f1a\u6d6a\u8d39\u4ed6\u4eec\u5f88\u591a\u65f6\u95f4\u3002\u4f7f\u6d4b\u8bd5\u8fd0\u884c\u8db3\u591f\u5feb\uff0c\u5408\u7406\u7684\u914d\u7f6e\u6d4b\u8bd5\u6846\u67b6\uff0c\u53ea\u8fd0\u884c\u6539\u52a8\u76f8\u5173\u7684\u6d4b\u8bd5\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u6d4b\u8bd5\u5e94\u8be5\u8db3\u591f\u7b80\u5355\u3002\u5982\u679c\u6d4b\u8bd5\u4ee3\u7801\u5199\u7684\u975e\u5e38\u590d\u6742\uff0c\u4e5f\u8bb8\u4f1a\u6709\u7591\u95ee\uff1a\u201c\u5982\u4f55\u4fdd\u8bc1\u6d4b\u8bd5\u4ee3\u7801\u662f\u6b63\u786e\u7684\u5462\uff1f\u201d\uff0c\u90a3\u5c31\u53ef\u80fd\u9700\u8981\u5bf9\u6d4b\u8bd5\u4ee3\u7801\u8fdb\u884c\u6d4b\u8bd5\uff0c\u6240\u4ee5\u5728\u6d4b\u8bd5\u4ee3\u7801\u4e2d\uff0c\u5e94\u8be5\u4fdd\u8bc1\u4f7f\u7528\u7b80\u5355\u7684\u4ee3\u7801\uff0c\u4e0d\u8981\u4f7f\u7528\u590d\u6742\u3001\u62bd\u8c61\u5ea6\u9ad8\u7684\u4ee3\u7801\u3002\u5bf9\u4e8e\u786e\u5b9e\u9700\u8981\u4f7f\u7528\u590d\u6742\u5de5\u5177\u7684\u573a\u666f\uff0c\u53ef\u4ee5\u5c1d\u8bd5\u4f7f\u7528\u4e45\u7ecf\u8003\u9a8c\u7684\u5de5\u5177\u5e93\u3002\u6216\u8005\u81ea\u5df1\u62bd\u8c61\u4e00\u90e8\u5206\u6d4b\u8bd5\u8f85\u52a9\u5de5\u5177\u4ee3\u7801\uff0c\u5e76\u5bf9\u5176\u8fdb\u884c\u6d4b\u8bd5\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u6d4b\u8bd5\u5e94\u8be5\u5177\u5907\u826f\u597d\u7684\u53ef\u8bfb\u6027\u3002\u548c\u4e0a\u4e00\u6761\u7c7b\u4f3c\uff0c\u4fdd\u6301\u7b80\u5355\u7684\u540c\u65f6\uff0c\u4e5f\u8981\u4fdd\u8bc1\u826f\u597d\u7684\u53ef\u8bfb\u6027\u3002\u826f\u597d\u7684\u53ef\u8bfb\u6027\u53ef\u4ee5\u907f\u514d\u5f00\u53d1\u4eba\u5458\u8bef\u89e3\u6d4b\u8bd5\u7528\u4f8b\u7684\u610f\u56fe\uff0c\u5e76\u53ef\u4ee5\u6700\u5927\u9650\u5ea6\u53d1\u6325\u6d4b\u8bd5\u7528\u4f8b\u4f5c\u4e3a\u6700\u4f73\u6587\u6863\u7684\u529f\u80fd\u3002\u867d\u7136\u53ef\u8bfb\u6027\u662f\u6bd4\u8f83\u4e3b\u89c2\u7684\u611f\u53d7\uff0c\u4f46\u4e5f\u53ef\u4ee5\u901a\u8fc7\u9075\u5faa\u4e0b\u9762\u7684\u89c4\u5219\u8fdb\u884c\u4e00\u5b9a\u7a0b\u5ea6\u4e0a\u7684\u91cf\u5316\u3002",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},'\u4f7f\u7528 "Arrange, Act, Assert" \u6216 "Given, When, Then" \u6765\u7ec4\u7ec7\u6d4b\u8bd5\u4ee3\u7801\u3002'),(0,r.kt)("li",{parentName:"ul"},"\u6bcf\u4e2a\u6d4b\u8bd5\u5757\u4e2d\u4e13\u6ce8\u4e8e\u4e00\u9879\u529f\u80fd\u7684\u6d4b\u8bd5\uff0c\u4e0d\u8981\u5c06\u592a\u591a\u65ad\u8a00\u6df7\u5408\u5728\u4e00\u8d77\u3002"),(0,r.kt)("li",{parentName:"ul"},"\u907f\u514d\u4f7f\u7528\u9b54\u672f\u6570\u5b57\u548c\u5b57\u7b26\u4e32\uff0c\u4f7f\u7528\u542b\u4e49\u66f4\u6e05\u6670\u7684\u5e38\u91cf\u53d6\u4ee3\u3002"))),(0,r.kt)("li",{parentName:"ol"},"\u6d4b\u8bd5\u4ee3\u7801\u4e2d\u4e0d\u8981\u91cd\u590d\u5b9e\u73b0\u6e90\u4ee3\u7801\u4e2d\u7684\u903b\u8f91\u3002\u4f8b\u5982\uff0c\u7528\u4e8e\u4e0e\u5b9e\u9645\u4ee3\u7801\u8fd4\u56de\u7684 Received \u5bf9\u6bd4\u7684 Expected \u5e94\u8be5\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u5217\u4e3e\u51fa\u6765\u7684\u5b57\u9762\u91cf\uff0c\u800c\u4e0d\u662f\u901a\u8fc7\u548c\u6e90\u4ee3\u7801\u7c7b\u4f3c\u7684\u903b\u8f91\u52a8\u6001\u751f\u6210\u7684\u7ed3\u679c\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u6d4b\u8bd5\u5fc5\u987b\u662f\u7a33\u5b9a\u7684\u3002\u6d4b\u8bd5\u7528\u4f8b\u7684\u6210\u529f\u6216\u5931\u8d25\u53ea\u53d6\u51b3\u4e8e\u88ab\u6d4b\u8bd5\u7684\u4ee3\u7801\uff0c\u6d4b\u8bd5\u7528\u4f8b\u4e0d\u56e0\u5176\u4ed6\u7528\u4f8b\u3001\u73af\u5883\u56e0\u7d20\u3001\u5916\u90e8\u4f9d\u8d56\u7684\u53d8\u5316\u800c\u6539\u53d8\u7ed3\u679c\u3002"),(0,r.kt)("li",{parentName:"ol"},"\u4e0d\u8981\u5c06\u6d4b\u8bd5\u4e0e\u5b9e\u73b0\u7ec6\u8282\u8026\u5408\u3002\u63d0\u9ad8\u6d4b\u8bd5\u7528\u4f8b\u7a33\u5b9a\u6027\uff0c\u907f\u514d\u56e0\u4e3a\u4ee3\u7801\u4e2d\u5fae\u5c0f\u7684\u6539\u52a8\u800c\u5bfc\u81f4\u6d4b\u8bd5\u7528\u4f8b\u5931\u8d25\u3002\u5982\uff0c\u4f7f\u7528 contain \u4ee3\u66ff equal \u68c0\u67e5\u5185\u5bb9\uff1b\u4f7f\u7528 getByRole \u4ee3\u66ff querySelector\u3002")),(0,r.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://martinfowler.com/articles/practical-test-pyramid.html"},"The Practical Test Pyramid")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"http://www.jamesshore.com/v2/books/aoad1/test_driven_development"},"TDD")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://v8.dev/blog/javascript-code-coverage"},"V8 Coverage")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://istanbul.js.org/docs/advanced/instrument/"},"istanbul")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://www.chaijs.com/guide/styles/"},"Assertion Styles")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://jestjs.io/"},"Jest")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://testing-library.com/"},"Testing Library"))))}d.isMDXComponent=!0},11748:function(e,n,t){var l={"./locale":89234,"./locale.js":89234};function a(e){var n=r(e);return t(n)}function r(e){if(!t.o(l,e)){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}return l[e]}a.keys=function(){return Object.keys(l)},a.resolve=r,e.exports=a,a.id=11748}}]); |