@serenity-js/protractor 3.4.2 → 3.6.0

package/src/screenplay/models/ProtractorModalDialogHandler.ts

@@ -1,9 +1,10 @@
-import { AbsentModalDialog, AcceptedModalDialog, DismissedModalDialog, ModalDialog, ModalDialogHandler } from '@serenity-js/web';
-import * as protractor from 'protractor';
+import type { ModalDialog} from '@serenity-js/web';
+import { AbsentModalDialog, AcceptedModalDialog, DismissedModalDialog, ModalDialogHandler } from '@serenity-js/web';
+import type * as protractor from 'protractor';
 import { error as errors } from 'protractor';
 
 import { promised } from '../promised';
-import { ProtractorErrorHandler } from './ProtractorErrorHandler';
+import type { ProtractorErrorHandler } from './ProtractorErrorHandler';
 
 /**
  * Protractor-specific implementation of {@apilink ModalDialogHandler}.

package/src/screenplay/models/ProtractorPage.ts

@@ -1,14 +1,16 @@
 import { LogicError } from '@serenity-js/core';
-import { CorrelationId } from '@serenity-js/core/lib/model';
-import { BrowserWindowClosedError, Cookie, CookieData, Key, ModalDialogHandler, Page, PageElement, PageElements, Selector } from '@serenity-js/web';
-import { ElementFinder, ProtractorBrowser } from 'protractor';
+import type { CorrelationId } from '@serenity-js/core/lib/model';
+import type { Cookie, CookieData, ModalDialogHandler, PageElement, Selector } from '@serenity-js/web';
+import { BrowserWindowClosedError, Key, Page, PageElements } from '@serenity-js/web';
+import type { ElementFinder, ProtractorBrowser } from 'protractor';
 import { URL } from 'url';
 
 import { promised } from '../promised';
-import { ProtractorLocator, ProtractorRootLocator } from './locators';
-import { ProtractorBrowsingSession } from './ProtractorBrowsingSession';
+import { ProtractorExistingElementLocator, ProtractorLocator, ProtractorRootLocator } from './locators';
+import { ProtractorSelectors } from './locators/ProtractorSelectors';
+import type { ProtractorBrowsingSession } from './ProtractorBrowsingSession';
 import { ProtractorCookie } from './ProtractorCookie';
-import { ProtractorErrorHandler } from './ProtractorErrorHandler';
+import type { ProtractorErrorHandler } from './ProtractorErrorHandler';
 import { ProtractorPageElement } from './ProtractorPageElement';
 
 /**
@@ -38,6 +40,17 @@ export class ProtractorPage extends Page<ElementFinder> {
         );
     }
 
+    createPageElement(nativeElement: ElementFinder): PageElement<ElementFinder> {
+        return new ProtractorPageElement(
+            new ProtractorExistingElementLocator(
+                this.rootLocator as ProtractorRootLocator,
+                ProtractorSelectors.selectorFrom(nativeElement.locator()),
+                this.errorHandler,
+                nativeElement,
+            )
+        )
+    }
+
     locate(selector: Selector): PageElement<ElementFinder> {
         return new ProtractorPageElement(
             new ProtractorLocator(this.rootLocator, selector, this.errorHandler)

package/src/screenplay/models/ProtractorPageElement.ts

@@ -1,11 +1,13 @@
 import { LogicError } from '@serenity-js/core';
-import { PageElement, SelectOption, SwitchableOrigin } from '@serenity-js/web';
+import type { SwitchableOrigin } from '@serenity-js/web';
+import { PageElement, SelectOption } from '@serenity-js/web';
 import * as scripts from '@serenity-js/web/lib/scripts';
-import { by, ElementFinder, protractor } from 'protractor';
-import { Locator, WebElement } from 'selenium-webdriver';
+import type { ElementFinder} from 'protractor';
+import { by, protractor } from 'protractor';
+import type { Locator, WebElement } from 'selenium-webdriver';
 
 import { promised } from '../promised';
-import { ProtractorLocator } from './locators';
+import type { ProtractorLocator } from './locators';
 
 /**
  * Protractor-specific implementation of {@apilink PageElement}.

package/src/screenplay/models/locators/ProtractorLocator.ts

@@ -1,11 +1,12 @@
-import { f, LogicError } from '@serenity-js/core';
-import { ByCss, ByCssContainingText, ByDeepCss, ById, ByTagName, ByXPath, Locator, PageElement, RootLocator, Selector } from '@serenity-js/web';
-import * as protractor from 'protractor';
+import type { PageElement, RootLocator, Selector } from '@serenity-js/web';
+import { Locator } from '@serenity-js/web';
+import type * as protractor from 'protractor';
 
 import { unpromisedWebElement } from '../../unpromisedWebElement';
-import { ProtractorErrorHandler } from '../ProtractorErrorHandler';
+import type { ProtractorErrorHandler } from '../ProtractorErrorHandler';
 import { ProtractorPageElement } from '../ProtractorPageElement';
-import { ProtractorRootLocator } from './ProtractorRootLocator';
+import type { ProtractorRootLocator } from './ProtractorRootLocator';
+import { ProtractorSelectors } from './ProtractorSelectors';
 
 /**
  * Protractor-specific implementation of {@apilink Locator}.
@@ -22,37 +23,8 @@ export class ProtractorLocator extends Locator<protractor.ElementFinder, protrac
         super(parent, selector);
     }
 
-    // todo: refactor; replace with a map and some more generic lookup mechanism
     protected nativeSelector(): protractor.Locator {
-        if (this.selector instanceof ByCss) {
-            return protractor.by.css(this.selector.value);
-        }
-
-        if (this.selector instanceof ByDeepCss) {
-            if (! protractor.by.shadowDomCss) {
-                throw new LogicError(`By.deepCss() requires query-selector-shadow-dom plugin, which Serenity/JS ProtractorFrameworkAdapter registers by default. If you're using Serenity/JS without ProtractorFrameworkAdapter, please register the plugin yourself.`)
-            }
-
-            return protractor.by.shadowDomCss(this.selector.value.replace('>>>', '').trim());
-        }
-
-        if (this.selector instanceof ByCssContainingText) {
-            return protractor.by.cssContainingText(this.selector.value, this.selector.text);
-        }
-
-        if (this.selector instanceof ById) {
-            return protractor.by.id(this.selector.value);
-        }
-
-        if (this.selector instanceof ByTagName) {
-            return protractor.by.tagName(this.selector.value);
-        }
-
-        if (this.selector instanceof ByXPath) {
-            return protractor.by.xpath(this.selector.value);
-        }
-
-        throw new LogicError(f `${ this.selector } is not supported by ${ this.constructor.name }`);
+        return ProtractorSelectors.locatorFrom(this.selector);
     }
 
     async isPresent(): Promise<boolean> {
@@ -106,7 +78,7 @@ export class ProtractorLocator extends Locator<protractor.ElementFinder, protrac
 
         return Promise.all(elements.map(childElement =>
             new ProtractorPageElement(
-                new ExistingElementLocator(
+                new ProtractorExistingElementLocator(
                     this.parent as ProtractorRootLocator,
                     this.selector,
                     this.errorHandler,
@@ -118,9 +90,9 @@ export class ProtractorLocator extends Locator<protractor.ElementFinder, protrac
 }
 
 /**
- * @private
+ * @internal
  */
-class ExistingElementLocator extends ProtractorLocator {
+export class ProtractorExistingElementLocator extends ProtractorLocator {
     constructor(
         parent: ProtractorRootLocator,
         selector: Selector,

package/src/screenplay/models/locators/ProtractorRootLocator.ts

@@ -1,5 +1,5 @@
 import { RootLocator } from '@serenity-js/web';
-import * as protractor from 'protractor';
+import type * as protractor from 'protractor';
 
 import { promised } from '../../promised';
 

package/src/screenplay/models/locators/ProtractorSelectors.ts

@@ -0,0 +1,65 @@
+import { f, LogicError } from '@serenity-js/core';
+import { ByCss, ByCssContainingText, ByDeepCss, ById, ByTagName, ByXPath, type Selector } from '@serenity-js/web';
+import * as protractor from 'protractor';
+
+export class ProtractorSelectors {
+    static selectorFrom(nativeLocator: protractor.Locator & { using?: string, value: string }): Selector {
+
+        switch (true) {
+            case nativeLocator.using === 'xpath':
+                return new ByXPath(nativeLocator.value);
+
+            case nativeLocator.toString().startsWith('by.shadowDomCss'): {
+                const [ , selector ] = nativeLocator.toString().match(/by\.shadowDomCss\("(.*)"\)$/);
+                return new ByDeepCss(selector);
+            }
+
+            case nativeLocator.toString().startsWith('by.cssContainingText'): {
+                // https://github.com/angular/protractor/blob/4bc80d1a459542d883ea9200e4e1f48d265d0fda/lib/locators.ts#L428
+                const [ , selector, text ] = nativeLocator.toString().match(/by\.cssContainingText\("(.*)", "(.*)"\)$/);
+                return new ByCssContainingText(selector, text);
+            }
+
+            case nativeLocator.using === 'css selector' && nativeLocator.value.startsWith('*[id='): {
+                const [ , selector ] = nativeLocator.value.match(/\*\[id="(.*)"]$/)
+                return new ById(selector);
+            }
+
+            // case nativeLocator.using === 'css selector':
+            default:
+                return new ByCss(nativeLocator.value);
+        }
+    }
+
+    static locatorFrom(selector: Selector): protractor.Locator {
+        if (selector instanceof ByCss) {
+            return protractor.by.css(selector.value);
+        }
+
+        if (selector instanceof ByDeepCss) {
+            if (! protractor.by.shadowDomCss) {
+                throw new LogicError(`By.deepCss() requires query-selector-shadow-dom plugin, which Serenity/JS ProtractorFrameworkAdapter registers by default. If you're using Serenity/JS without ProtractorFrameworkAdapter, please register the plugin yourself.`)
+            }
+
+            return protractor.by.shadowDomCss(selector.value.replace('>>>', '').trim());
+        }
+
+        if (selector instanceof ByCssContainingText) {
+            return protractor.by.cssContainingText(selector.value, selector.text);
+        }
+
+        if (selector instanceof ById) {
+            return protractor.by.id(selector.value);
+        }
+
+        if (selector instanceof ByTagName) {
+            return protractor.by.tagName(selector.value);
+        }
+
+        if (selector instanceof ByXPath) {
+            return protractor.by.xpath(selector.value);
+        }
+
+        throw new LogicError(f `${ selector } is not supported by ${ this.constructor.name }`);
+    }
+}

package/src/screenplay/questions/ProtractorParam.ts

@@ -1,5 +1,6 @@
 /* eslint-disable unicorn/prevent-abbreviations */
-import { Answerable, d, Question, QuestionAdapter } from '@serenity-js/core';
+import type { Answerable, QuestionAdapter } from '@serenity-js/core';
+import { d, Question } from '@serenity-js/core';
 
 import { BrowseTheWebWithProtractor } from '../abilities';
 

package/src/screenplay/unpromisedWebElement.ts

@@ -1,4 +1,4 @@
-import { WebElement } from 'protractor';
+import type { WebElement } from 'protractor';
 
 /**
  * Under [certain conditions](https://github.com/angular/protractor/blob/4bc80d1a459542d883ea9200e4e1f48d265d0fda/lib/element.ts#L797),