update docs for codeceptjs

Author: George Griffiths

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .vscode
 coverage
-.DS_Store
+.DS_Store
+**/output/**

README.md

@@ -32,11 +32,8 @@ This module exposes a playwright `selectorEngine`: https://github.com/microsoft/
 ```javascript
 const { selectorEngine } = require("query-selector-shadow-dom/plugins/playwright");
 const playwright = require('playwright');
-...
-// NOTE: this api was change in playwright 0.12.0 to below in comments
-// https://github.com/microsoft/playwright/blob/master/docs/api.md#selectorsregistername-script 
-//   await selectors.register('shadow', createTagNameEngine);
-await playwright.selectors.register(selectorEngine, { name: 'shadow' })
+
+ await selectors.register('shadow', createTagNameEngine);
 ...
   await page.goto('chrome://downloads');
   // shadow= allows a css query selector that automatically pierces shadow roots.

codecept.conf.js

@@ -0,0 +1,31 @@
+const { setHeadlessWhen } = require('@codeceptjs/configure');
+
+// turn on headless mode when running with HEADLESS=true environment variable
+// HEADLESS=true npx codecept run
+setHeadlessWhen(process.env.HEADLESS);
+
+exports.config = {
+  tests: 'test/codeceptjs/*.test.js',
+  output: './output',
+  helpers: {
+    Playwright: {
+      url: 'http://localhost',
+      show: true,
+      browser: 'chromium'
+    }
+  },
+  include: {
+    I: './steps_file.js'
+  },
+  bootstrap: null,
+  mocha: {},
+  name: 'query-selector-shadow-dom',
+  plugins: {
+    retryFailedStep: {
+      enabled: true
+    },
+    screenshotOnFail: {
+      enabled: true
+    }
+  }
+}

examples/playwright/custom-engine.js

@@ -2,7 +2,7 @@ const { selectorEngine } = require("query-selector-shadow-dom/plugins/playwright
 const playwright = require('playwright')
 
 const main = async () => {
-  await playwright.selectors.register(selectorEngine, { name: 'shadow' })
+  await playwright.selectors.register('shadow', selectorEngine)
 
   const browser = await playwright.chromium.launch({ headless: false})
   const context = await browser.newContext({ viewport: null })

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "allowJs": true
+  }
+}

plugins/codeceptjs/README.md

@@ -10,8 +10,6 @@ Goal/Example: To be able to write a test that works easily with shadow dom web c
 See Issues for what currently works and what doesn't
 
 ```javascript
-const playwright = require("playwright");
-
 Feature("The chrome downloads page");
 Scenario("Can interact with the search box", async I => {
   I.amOnPage("chrome://downloads");

steps.d.ts

@@ -0,0 +1,12 @@
+/// <reference types='codeceptjs' />
+type steps_file = typeof import('./steps_file.js');
+
+declare namespace CodeceptJS {
+  interface SupportObject { I: CodeceptJS.I }
+  interface CallbackOrder { [0]: CodeceptJS.I }
+  interface Methods extends CodeceptJS.Playwright {}
+  interface I extends ReturnType<steps_file> {}
+  namespace Translation {
+    interface Actions {}
+  }
+}

steps_file.js

@@ -0,0 +1,10 @@
+// in this file you can append custom step methods to 'I' object
+
+module.exports = function() {
+  return actor({
+
+    // Define custom steps here, use 'this' to access default methods of I.
+    // It is recommended to place a general 'login' function here.
+
+  });
+}

test/codeceptjs/README.md

@@ -0,0 +1,61 @@
+CodeceptJS functions to test:
+
+appendField
+attachFile
+checkOption
+clearField
+click
+clickLin
+dontSee
+dontSeeCheckboxIsChecked
+dontSeeCookie
+dontSeeCurrentUrlEquals
+dontSeeElement
+dontSeeElementInDOM
+dontSeeInField
+doubleClick
+dragAndDrop
+dragSlider
+fillField
+forceClick
+grabAttributeFrom
+grabCssPropertyFrom
+grabDataFromPerformanceTiming
+grabElementBoundingRect
+grabHTMLFrom
+grabNumberOfVisibleElements
+grabPageScrollPosition
+grabTextFrom
+grabValueFrom
+moveCursorTo
+openNewTab
+pressKey
+pressKeyDown
+pressKeyUp
+rightClick
+scrollPageToBottom
+scrollPageToTop
+scrollTo
+see
+seeAttributesOnElements
+seeCheckboxIsChecked
+seeCssPropertiesOnElements
+seeElement
+seeElementInDO
+seeInField
+seeNumberOfElements
+seeNumberOfVisibleElements
+seeTextEquals
+selectOptio
+uncheckOptio
+waitForClickable
+waitForDetached
+waitForElement
+waitForEnabled
+waitForInvisible
+waitForText
+waitForValue
+waitForVisible
+waitNumberOfVisibleElements
+waitToHide
+waitUntil

test/codeceptjs/components.test.js

@@ -0,0 +1,5 @@
+Feature('components');
+
+Scenario('test something', (I) => {
+
+});