1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[16457],{1001:(e,n,o)=>{o.d(n,{A:()=>S});var s=o(7378),i=o(23372),r=o(41129),t=o(82434),c=o(30505),a=o(90703),d=o(8663),l=o(39164),h=o(60534);function u(e){return s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function p(e){const{values:n,children:o}=e;return(0,s.useMemo)(()=>{const e=n??function(e){return u(e).map(({props:{value:e,label:n,attributes:o,default:s}})=>({value:e,label:n,attributes:o,default:s}))}(o);return function(e){const n=(0,l.XI)(e,(e,n)=>e.value===n.value);if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[n,o])}function m({value:e,tabValues:n}){return n.some(n=>n.value===e)}function v({queryString:e=!1,groupId:n}){const o=(0,c.W6)(),i=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,d.aZ)(i),(0,s.useCallback)(e=>{if(!i)return;const n=new URLSearchParams(o.location.search);n.set(i,e),o.replace({...o.location,search:n.toString()})},[i,o])]}function x(e){const{defaultValue:n,queryString:o=!1,groupId:i}=e,r=p(e),[t,c]=(0,s.useState)(()=>function({defaultValue:e,tabValues:n}){if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!m({value:e,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const o=n.find(e=>e.default)??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:r})),[d,l]=v({queryString:o,groupId:i}),[u,x]=function({groupId:e}){const n=function(e){return e?`docusaurus.tab.${e}`:null}(e),[o,i]=(0,h.Dv)(n);return[o,(0,s.useCallback)(e=>{n&&i.set(e)},[n,i])]}({groupId:i}),g=(()=>{const e=d??u;return m({value:e,tabValues:r})?e:null})();(0,a.A)(()=>{g&&c(g)},[g]);return{selectedValue:t,selectValue:(0,s.useCallback)(e=>{if(!m({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);c(e),l(e),x(e)},[l,x,r]),tabValues:r}}var g=o(17933);const j={tabList:"tabList_PGOh",tabItem:"tabItem_Wr1C"};var b=o(86106);function f({className:e,block:n,selectedValue:o,selectValue:s,tabValues:r}){const c=[],{blockElementScrollPositionUntilNextRender:a}=(0,t.a_)(),d=e=>{const n=e.currentTarget,i=c.indexOf(n),t=r[i].value;t!==o&&(a(n),s(t))},l=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const o=c.indexOf(e.currentTarget)+1;n=c[o]??c[0];break}case"ArrowLeft":{const o=c.indexOf(e.currentTarget)-1;n=c[o]??c[c.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.A)("tabs",{"tabs--block":n},e),children:r.map(({value:e,label:n,attributes:s})=>(0,b.jsx)("li",{role:"tab",tabIndex:o===e?0:-1,"aria-selected":o===e,ref:e=>{c.push(e)},onKeyDown:l,onClick:d,...s,className:(0,i.A)("tabs__item",j.tabItem,s?.className,{"tabs__item--active":o===e}),children:n??e},e))})}function w({lazy:e,children:n,selectedValue:o}){const r=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){const e=r.find(e=>e.props.value===o);return e?(0,s.cloneElement)(e,{className:(0,i.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:r.map((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o}))})}function y(e){const n=x(e);return(0,b.jsxs)("div",{className:(0,i.A)(r.G.tabs.container,"tabs-container",j.tabList),
1children:[(0,b.jsx)(f,{...n,...e}),(0,b.jsx)(w,{...n,...e})]})}function S(e){const n=(0,g.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},22002:(e,n,o)=>{o.d(n,{R:()=>t,x:()=>c});var s=o(7378);const i={},r=s.createContext(i);function t(e){const n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),s.createElement(r.Provider,{value:n},e.children)}},46836:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>t,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"wdio-vscode-service","title":"VSCode Extension Testing Service","description":"wdio-vscode-service is a 3rd party package, for more information please see GitHub | npm","source":"@site/docs/_wdio-vscode-service.md","sourceDirName":".","slug":"/wdio-vscode-service","permalink":"/docs/wdio-vscode-service","draft":false,"unlisted":false,"editUrl":"https://github.com/webdriverio-community/wdio-vscode-service/edit/main/README.md","tags":[],"version":"current","frontMatter":{"id":"wdio-vscode-service","title":"VSCode Extension Testing Service","custom_edit_url":"https://github.com/webdriverio-community/wdio-vscode-service/edit/main/README.md"},"sidebar":"docs","previous":{"title":"OCR Testing Service","permalink":"/docs/wdio-ocr-service"},"next":{"title":"Nuxt Service Service","permalink":"/docs/wdio-nuxt-service"}}');var i=o(86106),r=o(22002);o(1001),o(87780);const t={id:"wdio-vscode-service",title:"VSCode Extension Testing Service",custom_edit_url:"https://github.com/webdriverio-community/wdio-vscode-service/edit/main/README.md"},c=void 0,a={},d=[{value:"Installation",id:"installation",level:2},{value:"Example Configuration",id:"example-configuration",level:2},{value:"TypeScript Setup",id:"typescript-setup",level:3},{value:"Usage",id:"usage",level:2},{value:"Accessing VSCode APIs",id:"accessing-vscode-apis",level:3},{value:"Configuration",id:"configuration",level:2},{value:"Service Options",id:"service-options",level:3},{value:"<code>cachePath</code>",id:"cachepath",level:4},{value:"VSCode Capabilities (<code>wdio:vscodeOptions</code>)",id:"vscode-capabilities-wdiovscodeoptions",level:3},{value:"<code>binary</code>",id:"binary",level:4},{value:"<code>extensionPath</code>",id:"extensionpath",level:4},{value:"<code>storagePath</code>",id:"storagepath",level:4},{value:"<code>userSettings</code>",id:"usersettings",level:4},{value:"<code>workspacePath</code>",id:"workspacepath",level:4},{value:"<code>filePath</code>",id:"filepath",level:4},{value:"<code>vscodeArgs</code>",id:"vscodeargs",level:4},{value:"<code>verboseLogging</code>",id:"verboselogging",level:4},{value:"<code>vscodeProxyOptions</code>",id:"vscodeproxyoptions",level:4},{value:"Chromedriver",id:"chromedriver",level:3},{value:"Create Your Own PageObjects",id:"create-your-own-pageobjects",level:2},{value:"TypeScript Support",id:"typescript-support",level:2},{value:"Proxy Support",id:"proxy-support",level:2},{value:"References",id:"references",level:2},{value:"Contributing",id:"contributing",level:2},{value:"Learn More",id:"learn-more",level:2}];function l(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["wdio-vscode-service is a 3rd party package, for more information please see ",(0,i.jsx)(n.a,{href:"https://github.com/webdriverio-community/wdio-vscode-service",children:"GitHub"})," | ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/wdio-vscode-service",children:"npm"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Tested on:"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/webdriverio-community/wdio-vscode-service/actions/workflows/ci.yml",children:(0,i.jsx)(n.img,{src:"https://img.shields.io/badge/VSCode%20Version-insiders%20/%20stable%20/%20v1.86.0%20/%20web-brightgreen",alt:"VSCode Version"})})," ",(0,i.jsx)(n.a,{href:"https://github.com/webdriverio-community/wdio-vscode-service/actions/workflows/ci.yml",children:(0,i.jsx)(n.img,{src:"https://img.shields.io/badge/Platform-windows%20%2F%20macos%20%2F%20ubuntu-brightgreen",alt:"CI Status"})})]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"WebdriverIO service for testing VSCode extensions."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"This WebdriverIO service allows you to seamlessly test your VSCode extensions from end to end in the VSCode Desktop IDE or as a web extension. You only need to provide a path to your extension and the service does the rest by:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\ud83c\udfd7\ufe0f Installing VSCode (either ",(0,i.jsx)(n.code,{children:"stable"}),", ",(0,i.jsx)(n.code,{children:"insiders"})," or a specified version)"]}),"\n",(0,i.jsx)(n.li,{children:"\u2b07\ufe0f Downloading Chromedriver specific to a given VSCode version"}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\ude80 Enables you to access the VSCode API from your tests"}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\udda5\ufe0f Starting VSCode with custom user settings (including support for VSCode on Ubuntu, MacOS and Windows)"}),"\n",(0,i.jsxs)(n.li,{children:["\ud83c\udf10 Or serves VSCode from a server to be accessed by any browser for testing ",(0,i.jsx)(n.a,{href:"https://code.visualstudio.com/api/extension-guides/web-extensions",children:"web extensions"})]}),"\n",(0,i.jsx)(n.li,{children:"\ud83d\udcd4 Bootstrapping page objects with locators matching your VSCode version"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["This project was highly inspired by the ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/vscode-extension-tester",children:"vscode-extension-tester"})," project which is based on Selenium. This package takes the idea and adapts it to WebdriverIO."]}),"\n",(0,i.jsxs)(n.p,{children:["Starting from VSCode v1.86 it is required to use ",(0,i.jsx)(n.code,{children:"webdriverio"})," v8.14 or later to install Chromedriver with no configuration necessary. If you need to test earlier versions of VSCode, see the ",(0,i.jsx)(n.a,{href:"#chromedriver",children:"Chromedriver configuration"})," section below."]}),"\n",(0,i.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,i.jsx)(n.p,{children:"To initiate a new WebdriverIO project, run:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm create wdio ./\n"})}),"\n",(0,i.jsxs)(n.p,{children:["An installation wizard will guide you through the process. Ensure you select TypeScript as compiler and don't have it generate page objects for you given this project comes with all page objects needed. Then make sure to select ",(0,i.jsx)(n.code,{children:"vscode"})," within the list of services:"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://raw.githubusercontent.com/webdriverio-community/wdio-vscode-service/main/.github/assets/demo.gif",alt:"Install Demo",title:"Install Demo"})}),"\n",(0,i.jsxs)(n.p,{children:["For more information on how to install ",(0,i.jsx)(n.code,{children:"WebdriverIO"}),", please check the ",(0,i.jsx)(n.a,{href:"https://webdriver.io/docs/gettingstarted",children:"project docs"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"example-configuration",children:"Example Configuration"}),"\n",(0,i.jsxs)(n.p,{children:["To use the service you need to add ",(0,i.jsx)(n.code,{children:"vscode"})," to your list of services, optionally followed by a configuration object. This will make WebdriverIO download given VSCode binaries and appropriate Chromedriver version:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// wdio.conf.ts\nex
1port const config = {\n outputDir: 'trace',\n // ...\n capabilities: [{\n browserName: 'vscode',\n browserVersion: '1.86.0', // \"insiders\" or \"stable\" for latest VSCode version\n 'wdio:enforceWebDriverClassic': true, // this is important for using WebdriverIO v9!\n 'wdio:vscodeOptions': {\n extensionPath: __dirname,\n userSettings: {\n \"editor.fontSize\": 14\n }\n }\n }],\n services: ['vscode'],\n /**\n * Optionally define the path WebdriverIO stores all VSCode binaries, e.g.:\n * services: [['vscode', { cachePath: __dirname }]]\n */\n // ...\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["If you define ",(0,i.jsx)(n.code,{children:"wdio:vscodeOptions"})," with any other ",(0,i.jsx)(n.code,{children:"browserName"})," but ",(0,i.jsx)(n.code,{children:"vscode"}),", e.g. ",(0,i.jsx)(n.code,{children:"chrome"}),", the service will serve the extension as a web extension. If you test on Chrome no additional driver service is required, e.g.:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// wdio.conf.ts\nexport const config = {\n outputDir: 'trace',\n // ...\n capabilities: [{\n browserName: 'chrome',\n 'wdio:vscodeOptions': {\n extensionPath: __dirname\n }\n }],\n services: ['vscode'],\n // ...\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.em,{children:"Note:"})," when testing web extensions you can only choose between ",(0,i.jsx)(n.code,{children:"stable"})," or ",(0,i.jsx)(n.code,{children:"insiders"})," as ",(0,i.jsx)(n.code,{children:"browserVersion"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"typescript-setup",children:"TypeScript Setup"}),"\n",(0,i.jsxs)(n.p,{children:["In your ",(0,i.jsx)(n.code,{children:"tsconfig.json"})," make sure to add ",(0,i.jsx)(n.code,{children:"wdio-vscode-service"})," to your list of types:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n "compilerOptions": {\n "types": [\n "node",\n "webdriverio/async",\n "@wdio/mocha-framework",\n "expect-webdriverio",\n "wdio-vscode-service"\n ],\n "target": "es2019",\n "moduleResolution": "node",\n "esModuleInterop": true\n }\n}\n'})}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(n.p,{children:["You can then use the ",(0,i.jsx)(n.code,{children:"getWorkbench"})," method to access the page objects for the locators matching your desired VSCode version:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"describe('WDIO VSCode Service', () => {\n it('should be able to load VSCode', async () => {\n const workbench = await browser.getWorkbench()\n expect(await workbench.getTitleBar().getTitle())\n .toBe('[Extension Development Host] - README.md - wdio-vscode-service - Visual Studio Code')\n })\n})\n"})}),"\n",(0,i.jsx)(n.h3,{id:"accessing-vscode-apis",children:"Accessing VSCode APIs"}),"\n",(0,i.jsxs)(n.p,{children:["If you like to execute certain automation through the ",(0,i.jsx)(n.a,{href:"https://code.visualstudio.com/api/references/vscode-api",children:"VSCode API"})," you can do that by running remote commands via the custom ",(0,i.jsx)(n.code,{children:"executeWorkbench"})," command. This command allows you to remotely execute code from your test inside the VSCode environment and enables you to access the VSCode API. You can pass arbitrary parameters into the function which will then be propagated into the function. The ",(0,i.jsx)(n.code,{children:"vscode"})," object will be always passed in as the first argument following the outer function parameters. Note that you can not access variables outside of the function scope as the callback is executed remotely. Here is an example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"const workbench = await browser.getWorkbench()\nawait browser.executeWorkbench((vscode, param1, param2) => {\n vscode.window.showInformationMessage(`I am an ${param1} ${param2}!`)\n}, 'API', 'call')\n\nconst notifs = await workbench.getNotifications()\nconsole.log(await notifs[0].getMessage()) // outputs: \"I am an API call!\"\n"})}),"\n",(0,i.jsxs)(n.p,{children:["For the full page object documentation, check out the ",(0,i.jsx)(n.a,{href:"https://webdriverio-community.github.io/wdio-vscode-service/modules.html",children:"docs"}),". You can find various usage examples in this ",(0,i.jsx)(n.a,{href:"https://github.com/webdriverio-community/wdio-vscode-service/blob/main/test/specs",children:"project's test suite"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,i.jsx)(n.p,{children:"Through service configuration, you can manage the VSCode version as well as user settings for VSCode:"}),"\n",(0,i.jsx)(n.h3,{id:"service-options",children:"Service Options"}),"\n",(0,i.jsx)(n.p,{children:"Service options are options needed for the service to set up the test environment."}),"\n",(0,i.jsx)(n.h4,{id:"cachepath",children:(0,i.jsx)(n.code,{children:"cachePath"})}),"\n",(0,i.jsx)(n.p,{children:"Define a cache path to avoid re-downloading VS Code bundles. This is useful for CI/CD to avoid re-downloading VSCode for every test run."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"string"}),(0,i.jsx)("br",{}),"\nDefault: ",(0,i.jsx)(n.code,{children:"process.cwd()"})]}),"\n",(0,i.jsxs)(n.h3,{id:"vscode-capabilities-wdiovscodeoptions",children:["VSCode Capabilities (",(0,i.jsx)(n.code,{children:"wdio:vscodeOptions"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["In order to run tests through VSCode you have to define ",(0,i.jsx)(n.code,{children:"vscode"})," as ",(0,i.jsx)(n.code,{children:"browserName"}),". You can specify the VSCode version by providing a ",(0,i.jsx)(n.code,{children:"browserVersion"})," capability. Custom VSCode options are then defined within the custom ",(0,i.jsx)(n.code,{children:"wdio:vscodeOptions"})," capability. The options are the following:"]}),"\n",(0,i.jsx)(n.h4,{id:"binary",children:(0,i.jsx)(n.code,{children:"binary"})}),"\n",(0,i.jsxs)(n.p,{children:["Path to a locally installed VSCode installation. If the option is not provided the service will download VSCode based on the given ",(0,i.jsx)(n.code,{children:"browserVersion"})," (or ",(0,i.jsx)(n.code,{children:"stable"})," if not given)."]}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.h4,{id:"extensionpath",children:(0,i.jsx)(n.code,{children:"extensionPath"})}),"\n",(0,i.jsx)(n.p,{children:"Define the directory to the extension you want to test."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.h4,{id:"storagepath",children:(0,i.jsx)(n.code,{children:"storagePath"})}),"\n",(0,i.jsx)(n.p,{children:"Define a custom location for VS Code to store all its data. This is the root for internal VS Code directories such as (partial list)"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"user-data-dir"}),": The directory where all the user settings (global settings), extension logs etc are stored."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"extension-install-dir"}),": The directory where VS Code extensions are installed."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"If not provided, a temporary directory is used."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.h4,{id:"usersettings",children:(0,i.jsx)(n.code,{children:"userSettings"})}),"\n",(0,i.jsx)(n.p,{children:"Define custom user settings to be applied to VSCode."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"Record<string, number | string | object | boolean>"}),(0,i.jsx)("br",{}),"\nDefault: ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n",(0,i.jsx)(n.h4,{id:"workspacepath",children:(0,i.jsx)(n.code,{children:"workspacePath"})}),"\n",(0,i.jsx)(n.p,{children:"Opens VSCode for a specific workspace. If not provided VSCode starts without a workspace opened."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.h4,{id:"filepath",children:(0,i.jsx)(n.code,{children:"filePath"})}),"\n",(0,i.jsx)(n.p,{children:"Opens VSCode with a specific file opened."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.h4,{id:"vscodeargs",children:(0,i.jsx)(n.code,{children:"vscodeArgs"})}),"\n",(0,i.jsx)(n.p,{children:"Additional start-up arguments as an object, e.g."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"vscodeArgs: { fooBar: true, 'bar-foo': '/foobar' }\n"})}),"\n",(0,i.jsx)(n.p,{children:"will be passed in as:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"--foo-bar --fooBar --bar-foo=/foobar\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"Record<string, string | boolean>"}),(0,i.jsx)("br",{}),"\nDefault: see ",(0,i.jsx)(n.a,{href:"https://github.com/webdriverio-community/wdio-vscode-service/blob/196a69be3ac2fb82d9c7e4f19a2a1c8ccbaec1e2/src/constants.ts#L5-L14",children:(0,i.jsx)(n.code,{children:"constants.ts#L5-L14"})})]}),"\n",(0,i.jsx)(n.h4,{id:"verboselogging",children:(0,i.jsx)(n.code,{children:"verboseLogging"})}),"\n",(0,i.jsx)(n.p,{children:"If set to true, the service logs VSCode output from the extension host and console API."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"boolean"}),(0,i.jsx)("br",{}),"\nDefault: ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsx)(n.h4,{id:"vscodeproxyoptions",children:(0,i.jsx)(n.code,{children:"vscodeProxyOptions"})}),"\n",(0,i.jsx)(n.p,{children:"VSCode API proxy configurations define how WebdriverIO connects to the VSCode workbench to give you access to the VSCode API."}),"\n",(0,i.jsxs)(n.p,{children:["Type: ",(0,i.jsx)(n.code,{children:"VSCodeProxyOptions"}),(0,i.jsx)("br",{}),"\nDefault:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"{\n /**\n * If set to true, the service tries to establish a connection with the\n * VSCode workbench to enable access to the VSCode API\n */\n enable: true,\n /**\n * Port of the WebSocket connection used to connect to the workbench.\n * By default set to an available port in your operating system.\n */\n // port?: number\n /**\n * Timeout for connecting to WebSocket inside of VSCode\n */\n connectionTimeout: 5000,\n /**\n * Timeout for command to be executed within VSCode\n */\n commandTimeout: 5000\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"chromedriver",children:"Chromedriver"}),"\n",(0,i.jsxs)(n.p,{children:["Starting from VSCode v1.86 it is required to use ",(0,i.jsx)(n.code,{children:"webdriverio"})," v8.14 or later to install Chromedriver with no configuration necessary. The ",(0,i.jsx)(n.a,{href:"https://webdriver.io/blog/2023/07/31/driver-management",children:"simplified browser automation setup"})," handles everything for you."]}),"\n",(0,i.jsxs)(n.p,{children:["To test earlier versions of VS Code, find the expected version of Chromedriver from the logs, download ",(0,i.jsx)(n.a,{href:"https://chromedriver.chromium.org/downloads",children:"Chromedriver"}),", and configure the path. For example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:"[0-0] ERROR webdriver: Failed downloading chromedriver v108: Download failed: ...\n"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:" capabilities: [{\n browserName: 'vscode',\n browserVersion: '1.80.0',\n 'wdio:chromedriverOptions': {\n binary: path.join(cacheDir, 'chromedriver-108.0.5359.71')\n"})}),"\n",(0,i.jsx)(n.h2,{id:"create-your-own-pageobjects",children:"Create Your Own PageObjects"}),"\n",(0,i.jsx)(n.p,{children:"You can reuse the components used in this service for your own review page objects. For that first create a file that defines all your selectors, e.g.:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"// e.g. in /test/pageobjects/locators.ts\nexport const componentA = {\n elem: 'form', // component container element\n submit: 'button[type=\"submit\"]', // submit button\n username: 'input.username', // username input\n password: 'input.password' // password input\n}\n"})}),"\n",(0,i.jsx)(n.p,{children:"Now you can create a page object as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"// e.g. in /test/pageobjects/loginForm.ts\nimport { PageDecorator, IPageDecorator, BasePage } from 'wdio-vscode-service'\nimport * as locatorMap, { componentA as componentALocators } from './locators'\nexport interface LoginForm extends IPageDecorator<typeof componentALocators> {}\n@PageDecorator(componentALocators)\nexport class LoginForm extends BasePage<typeof componentALocators, typeof locatorMap> {\n /**\n * @private locator key to identify locator map (see locators.ts)\n */\n public locatorKey = 'componentA' as const\n\n public login (username: string, password: string) {\n await this.username$.setValue(username)\n await this.password$.setValue(password)\n await this.submit$.click()\n }\n}\n"})}),"\n",(0,i.jsx)(n.p,{children:"Now in your test, you can use your page object as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"import { LoginForm } from '../pageobjects/loginForm'\nimport * as locatorMap from '../locators'\n\n// e.g. in /test/specs/example.e2e.ts\ndescribe('my extension', () => {\n it('should login', async () => {\n const loginForm = new LoginForm(locatorMap)\n await loginForm.login('admin', 'test123')\n\n // you can also use page object elements directly via `[selector]$`\n // or `[selector]$$`, e.g.:\n await loginForm.submit$.click()\n\n // or access locators directly\n console.log(loginForm.locators.username)\n // outputs: \"input.username\"\n })\n})\n"})}),"\n",(0,i.jsx)(n.h2,{id:"typescript-support",children:"TypeScript Support"}),"\n",(0,i.jsxs)(n.p,{children:["If you use WebdriverIO with TypeScript make sure to add ",(0,i.jsx)(n.code,{children:"wdio-vscode-service"})," to your ",(0,i.jsx)(n.code,{children:"types"})," in your ",(0,i.jsx)(n.code,{children:"tsconfig.json"}),", e.g.:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n "compilerOptions": {\n "moduleResolution": "node",\n "types": [\n "webdriverio/async",\n "@wdio/mocha-framework",\n "expect-webdriverio",\n // add this
1service to your types\n "wdio-devtools-service"\n ],\n "target": "es2019"\n }\n}\n'})}),"\n",(0,i.jsx)(n.h2,{id:"proxy-support",children:"Proxy Support"}),"\n",(0,i.jsxs)(n.p,{children:["During the initialization of this service, a ChromeDriver and VSCode distribution is downloaded. You can tunnel this requests through a proxy by setting the environment variable ",(0,i.jsx)(n.code,{children:"HTTPS_PROXY"})," or ",(0,i.jsx)(n.code,{children:"https_proxy"}),". E. g.:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"HTTPS_PROXY=http://127.0.0.1:1080 npm run wdio\n"})}),"\n",(0,i.jsx)(n.h2,{id:"references",children:"References"}),"\n",(0,i.jsxs)(n.p,{children:["The following VS Code extensions use ",(0,i.jsx)(n.code,{children:"wdio-vscode-service"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=stateful.marquee",children:"Marquee"})," (27k downloads)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer",children:"Live Server"})," (27.8m downloads)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=Iterative.dvc",children:"DVC Extension for Visual Studio Code"})," (11.2k downloads)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console",children:"Nx Console"})," (1.2m downloads)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension",children:"inlang \u2013 i18n supercharged"})," (3k downloads)"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"contributing",children:"Contributing"}),"\n",(0,i.jsx)(n.p,{children:"Before posting a pull request, please run the following:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"git clone [email protected]:webdriverio-community/wdio-vscode-service.git"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"cd wdio-vscode-service"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"npm install"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"npm run build"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"npm run test"})," (or ",(0,i.jsx)(n.code,{children:"npm run ci"}),")"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"learn-more",children:"Learn More"}),"\n",(0,i.jsxs)(n.p,{children:["If you want to learn more about testing VSCode Extensions, check out ",(0,i.jsx)(n.a,{href:"https://twitter.com/bromann",children:"Christian Bromann's"})," talk at ",(0,i.jsx)(n.a,{href:"https://www.youtube.com/watch?v=PhGNTioBUiU",children:"OpenJS World 2022"}),":"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://www.youtube.com/watch?v=PhGNTioBUiU",children:(0,i.jsx)(n.img,{src:"https://img.youtube.com/vi/PhGNTioBUiU/sddefault.jpg",alt:"Testing VSCode Extensions at OpenJS World 2022"})})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.p,{children:["For more information on WebdriverIO check out the project ",(0,i.jsx)(n.a,{href:"https://webdriver.io",children:"homepage"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},87780:(e,n,o)=>{o.d(n,{A:()=>t});o(7378);var s=o(23372);const i={tabItem:"tabItem_l0gC"};var r=o(86106);function t({children:e,hidden:n,className:o}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,s.A)(i.tabItem,o),hidden:n,children: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.