1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[17436],{22002:(e,s,r)=>{r.d(s,{R:()=>i,x:()=>c});var t=r(7378);const n={},o=t.createContext(n);function i(e){const s=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),t.createElement(o.Provider,{value:s},e.children)}},79756:(e,s,r)=>{r.r(s),r.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>a});const t=JSON.parse('{"id":"api/browser/mock","title":"mock","description":"Mock the response of a request. You can define a mock based on a matching","source":"@site/docs/api/browser/_mock.md","sourceDirName":"api/browser","slug":"/api/browser/mock","permalink":"/docs/api/browser/mock","draft":false,"unlisted":false,"editUrl":"https://github.com/webdriverio/webdriverio/edit/main/packages/webdriverio/src/commands/browser/mock.ts","tags":[],"version":"current","frontMatter":{"id":"mock","title":"mock","custom_edit_url":"https://github.com/webdriverio/webdriverio/edit/main/packages/webdriverio/src/commands/browser/mock.ts"},"sidebar":"api","previous":{"title":"keys","permalink":"/docs/api/browser/keys"},"next":{"title":"mockClearAll","permalink":"/docs/api/browser/mockClearAll"}}');var n=r(86106),o=r(22002);const i={id:"mock",title:"mock",custom_edit_url:"https://github.com/webdriverio/webdriverio/edit/main/packages/webdriverio/src/commands/browser/mock.ts"},c=void 0,d={},a=[{value:"Usage",id:"usage",level:2},{value:"Parameters",id:"parameters",level:2},{value:"Example",id:"example",level:2},{value:"Returns",id:"returns",level:2}];function l(e){const s={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["Mock the response of a request. You can define a mock based on a matching\n",(0,n.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/URLPattern",children:"URLPattern"}),"\nand corresponding header and status code. Calling the mock method\nreturns a stub object that you can use to modify the response of the\nweb resource."]}),"\n",(0,n.jsx)(s.p,{children:"With the stub object you can then either return a custom response or\nhave the request fail."}),"\n",(0,n.jsx)(s.p,{children:"There are 3 ways to modify the response:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:"return a custom JSON object (for stubbing API request)"}),"\n",(0,n.jsx)(s.li,{children:"replace web resource with a local file (serve a modified JavaScript file) or"}),"\n",(0,n.jsx)(s.li,{children:"redirect resource to a different url"}),"\n"]}),"\n",(0,n.jsx)(s.admonition,{type:"info",children:(0,n.jsxs)(s.p,{children:["Note that using the ",(0,n.jsx)(s.code,{children:"mock"})," command requires support for WebDriver Bidi. That is\nusually the case when running tests locally in a Chromium based browser or on\nFirefox as well as if you use a Selenium Grid v4 or higher. If you run tests\nin the cloud, make sure that your cloud provider supports WebDriver Bidi."]})}),"\n",(0,n.jsx)(s.admonition,{type:"info",children:(0,n.jsxs)(s.p,{children:["The ",(0,n.jsx)(s.code,{children:"URLPattern"})," is an experimental technology and not yet supported in some environments, e.g. Node.js.\nWe recommend to import ",(0,n.jsx)(s.a,{href:"https://www.npmjs.com/package/urlpattern-polyfill",children:"a polyfill"}),"\nuntil the feature is more widely supported."]})}),"\n",(0,n.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"await browser.mock(url, { method, requestHeaders, responseHeaders, postData, statusCode })\n"})}),"\n",(0,n.jsx)(s.h2,{id:"parameters",children:"Parameters"}),"\n",(0,n.jsxs)(s.table,{children:[(0,n.jsx)(s.thead,{children:(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.th,{children:"Name"}),(0,n.jsx)(s.th,{children:"Type"}),(0,n.jsx)(s.th,{children:"Details"})]})}),(0,n.jsxs)(s.tbody,{children:[(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"url"})}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"String, URLPattern"})}),(0,n.jsx)(s.td,{children:"url to mock"})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsxs)(s.td,{children:[(0,n.jsx)(s.code,{children:"filterOptions"}),(0,n.jsx)("br",{}),(0,n.jsx)(s.em,{children:"optional"})]}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"MockFilterOptions"})}),(0,n.jsx)(s.td,{children:"filter mock resource by additional options"})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsxs)(s.td,{children:[(0,n.jsx)(s.code,{children:"filterOptions.method"}),(0,n.jsx)("br",{}),(0,n.jsx)(s.em,{children:"optional"})]}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"String, Function"})}),(0,n.jsx)(s.td,{children:"filter resource by HTTP method"})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsxs)(s.td,{children:[(0,n.jsx)(s.code,{children:"filterOptions.requestHeaders"}),(0,n.jsx)("br",{}),(0,n.jsx)(s.em,{children:"optional"})]}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"Object, Function"})}),(0,n.jsx)(s.td,{children:"filter resource by specific request headers"})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsxs)(s.td,{children:[(0,n.jsx)(s.code,{children:"filterOptions.responseHeaders"}),(0,n.jsx)("br",{}),(0,n.jsx)(s.em,{children:"optional"})]}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"Object, Function"})}),(0,n.jsx)(s.td,{children:"filter resource by specific response headers"})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsxs)(s.td,{children:[(0,n.jsx)(s.code,{children:"filterOptions.postData"}),(0,n.jsx)("br",{}),(0,n.jsx)(s.em,{children:"optional"})]}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"String, Function"})}),(0,n.jsx)(s.td,{children:"filter resource by request postData"})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsxs)(s.td,{children:[(0,n.jsx)(s.code,{children:"filterOptions.statusCode"}),(0,n.jsx)("br",{}),(0,n.jsx)(s.em,{children:"optional"})]}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.code,{children:"Number, Function"})}),(0,n.jsx)(s.td,{children:"filter resource by response statusCode"})]})]})]}),"\n",(0,n.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",metastring:'title="mock.js"',children:"it('should mock network resources', async () => {\n // via static string\n const userListMock = await browser.mock('**' + '/users/list')\n // you can also specifying the mock even more by filtering resources\n // by request or response headers, status code, postData, e.g. mock only responses with specific\n // header set and statusCode\n const strictMock = await browser.mock('*', {\n // mock all json responses\n statusCode: 200,\n requestHeaders: { 'Content-Type': 'application/json' },\n responseHeaders: { 'Cache-Control': 'no-cache' },\n postData: 'foobar'\n })\n\n // comparator function\n const apiV1Mock = await browser.mock('**' + '/api/v1', {\n statusCode: (statusCode) => statusCode >= 200 && statusCode <= 203,\n requestHeaders: (headers) => headers['Authorization'] && headers['Authorization'].startsWith('Bearer '),\n responseHeaders: (headers) => headers['Impersonation'],\n postData: (data) => typeof data === 'string' && data.includes('foo')\n })\n})\n\nit('should modify API responses', async () => {\n // filter by method\n const todoMock = await browser.mock('**' + '/todos', {\n method: 'get'\n })\n\n // mock an endpoint with a fixed fixture\n todoMock.respond([{\n title: 'Injected Todo',\n order: null,\n completed: false,\n url: \"http://todo-backend-express-knex.herokuapp.com/916\"\n }])\n\n // respond with different status code or header\n todoMock.respond([{\n title: 'Injected Todo',\n order: null,\n completed: false,\n url: \"http://todo-backend-express-knex.herokuapp.com/916\"\n }], {\n statusCode: 404,\n headers: {\n 'x-custom-header': 'foobar'\n }\n })\n})\n\nit('should modify text assets', async () => {\n const scriptMock = await browser.mock('**' + '/script.min.js')\n scriptMock.respond('./tests/fixtures/script.
1js')\n})\n\nit('should redirect web resources', async () => {\n const headerMock = await browser.mock('**' + '/header.png')\n headerMock.respond('https://media.giphy.com/media/F9hQLAVhWnL56/giphy.gif')\n\n const pageMock = await browser.mock('https://google.com/')\n pageMock.respond('https://webdriver.io')\n await browser.url('https://google.com')\n console.log(await browser.getTitle()) // returns \"WebdriverIO \xb7 Next-gen browser and mobile automation test framework for Node.js\"\n})\n"})}),"\n",(0,n.jsx)(s.h2,{id:"returns",children:"Returns"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"<Mock>"}),"\n",(0,n.jsxs)(s.strong,{children:[(0,n.jsx)("code",{children:(0,n.jsx)("var",{children:"return"})}),":"]})," a mock object to modify the response"]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.