使用typescript和Protractor在shadowroot中定位react元素[
在使用typescript和Protractor在shadowroot中定位react元素时，可以按照以下步骤进行操作：
- 首先，确保已经安装了Node.js和Protractor，并且已经配置好了Protractor的环境。
- 在项目中安装相关依赖：
- 在项目中安装相关依赖：
- 创建一个Protractor的配置文件protractor.conf.js，并进行相关配置：
- 创建一个Protractor的配置文件protractor.conf.js，并进行相关配置：
- 创建一个测试用例文件spec.ts，并编写测试代码：
- 创建一个测试用例文件spec.ts，并编写测试代码：
- 运行测试用例：
- 运行测试用例：
在上述代码中，需要将"your-shadowroot-selector"替换为实际的shadowroot选择器，将"your-react-element-selector"替换为实际的React元素选择器。通过执行JavaScript代码获取shadowroot，并使用Protractor提供的定位方法定位React元素，然后可以进行相关操作。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 链接地址：https://cloud.tencent.com/product/cvm
腾讯云云服务器（CVM）是腾讯云提供的一种弹性计算服务，可为用户提供安全、可靠、高性能的云端计算能力。它支持多种操作系统，提供了丰富的实例类型和配置选项，适用于各种应用场景。腾讯云云服务器（CVM）具有高可用性、弹性伸缩、安全可靠等优势，可广泛应用于Web应用、移动应用、大数据分析、游戏服务等领域。
注意：由于要求不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商，因此无法提供其他品牌商的相关产品和链接。
相关·内容
我正在使用Protractor 5.4.2来测试用Polymer.js创建的网页。我有一个具有多层阴影根的网页。我必须选择一个位于第10个卷影根下的输入。要遍历到第10级，我需要从第一个影子根移动，或者我可以直接访问第10个影子根？ ?
浏览 14提问于2020-01-09得票数 0
我见过这个使用protractor获取所有属性的解决方案：
但我使用的是Angular 6的typescript，似乎无法用上面的方法扩展它。
我正在做的是：
import {browser, by, element} from 'protractor';
element.prototype.getAttributes = function () {
return (function (node) {
let attrs = {};
for (let i = 0; i < node.length; i++) {
attrs[node.it
浏览 0提问于2018-09-28得票数 1
如何使用typescript在Angular+Protractor e2e测试中检查元素是否具有colspan属性
我尝试了以下方法，但似乎不起作用
const colspan = await cols[0].getAttribute('colspan');
浏览 0提问于2019-09-05得票数 0
环境:角(v5应用与聚合物网络组件。用于运行e2e测试的量角器。
Angular CLI: 1.6.4
Node: 6.10.0
Angular: 5.2.0
@angular/cli: 1.6.4
typescript: 2.5.3
下面给出的是我的聚合物网组件阴影根，在铬中展开。您可以看到这个自定义元素中的输入type = "text"。
我无法访问自定义聚合物组件内部的输入元件使用量角器by.deepCss。
var polymerFirstName = element(by.className('polyFName'));
var inputs = p
浏览 0提问于2018-01-23得票数 9
回答已采纳
2回答
我正在使用Parcel为我的应用程序和Shadow创建包。以下是我的配置，
///index.tsx file
import customCSS from "bundle-text:./assets/antd.scss"
const appContainer = document
.getElementById(config.containerId)
?.attachShadow({ mode: "open" }) as ShadowRoot
ReactDOM.render(
<React.StrictMode
浏览 15提问于2022-02-25得票数 1
我正在尝试使用ReactJS和Material框架构建微前端应用程序。作为其中的一部分，我试图使用ShadowDOM将一个react应用程序嵌入到主要的React中。
我让应用程序运行和工作，除非打开一个弹出窗口、对话框、模式或日期选择器，ClickAwayListener没有按预期工作，这意味着没有关闭。
请建议一种方法来解决这个问题，或者给我一个解决办法，让应用程序运行。
浏览 10提问于2019-09-18得票数 2
回答已采纳
4回答
如何在量角器中找到元件定位器
、、、、
我刚开始使用量角器，请帮助我在Protractor/angularJS中使用下面的代码找到元素定位器--我尝试过使用xpath和CSS。从这段代码中可以使用什么定位器？
<button type="submit" value="autofocus" class="btn" data-ng-click="reset()">Reset</button>
浏览 1提问于2015-09-30得票数 1
回答已采纳
我正在尝试集成量角器和浏览器堆栈。我已经在package.json和lock.json包中添加了浏览器堆栈本地依赖。在执行脚本时，我得到下面的错误。
PS C:\Users\umohabi\Desktop\testBrowserStack> npm run test
> protractor-typescript-cucumber@4.0.0 test C:\Users\umohabi\Desktop\testBrowserStack
> protractor typeScript/config/config.js
Connecting local
C:\Users\u
浏览 1提问于2019-07-19得票数 0
我的测试是从命令行通过的，但是我使用Atom编辑typescript源代码。
当我在编辑器中打开其中一个测试文件时，我在下面的代码行中看到一个错误：
expect(pageObject.name.getText()).toEqual('Some name');
这是错误：
Typescript
Error
Argument of type '"Some name"' is not assignable to parameter of type 'Expected<Promise<string>>'.at
浏览 17提问于2017-06-16得票数 10
回答已采纳
2回答
我在我的应用程序中使用web组件。在web组件中，我需要插入一个react组件。Web组件具有Shadow DOM。当我尝试使用下面的命令来呈现react组件时，我得到了错误。
comp = React.createElement(ReactElem, {
config: config,
onRender: handleRender
});
ReactDOM.render(comp , self.shadowRoot.querySelector('#app1'));
错误
target container is not a dom element
我尝试使用W
浏览 2提问于2017-02-16得票数 5
回答已采纳
1回答
我过去曾使用过一种方法来使paper-input的空白在过去，但是我通常的方法在与Vaadin-grid结合时不起作用。
我是不是漏掉了什么？
Vaadin网格HTML
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout cell">
<label for="keyFilter" class="keyText cell flex">Ke
浏览 3提问于2017-08-22得票数 0
回答已采纳
我试图找到一个元素，但它给了我
“没有这样的元素:无法定位元素”。
我的元素在链接下面：
<a href="/Admin/Company/View?id=225896">View</a>
Xpath=//a[@href='/Admin/Company/View?id=225896']
Xpath=//*[contains(@href,'/Admin/Company/View?id=225896')]
Xpath=//*[contains(@href,'View?id=225896')]
还有
浏览 1提问于2019-07-19得票数 0
编辑：
我想出来了，并在下面贴出了答案。
原始问题
我试图在阴影区域内创建一个完全分区化的web应用程序，我一直在使用Antd组件，并遇到了这样的问题: Antd将下拉选项附加到body标记中，而不是作为正在呈现到的元素的子元素。
为了隔离这个问题，我删除了React.render之外的所有内容&一个Antd元素，它仍然执行相同的任务。
然后，我使用了一个不同的组件“react -日期选择器”，它的工作方式是我希望Antd做到的，其中组件呈现为指定给react的div的子组件。
不幸的是，Antd呈现到HTML的主体，而不是作为子代，使得使用影子根没有意义。
我的主要问题是：
这是A
浏览 2提问于2019-11-07得票数 2
回答已采纳
2回答
我刚刚开始使用Ionic，并查看了文档，我认为我应该继续使用内置的东西，而不是普通的HTML。
所以我有这个HTML：
<ion-item>
<ion-input type="tel"
autofocus="true"
placeholder="Phone number"
name="phoneNumber"
formControlName="phon
浏览 11提问于2018-08-15得票数 1
回答已采纳
我们用Typescript编写量角器测试。由于selenium调用应该是同步的，所以几乎测试中的每一行都以“await”开头：
var option = await element(by.cssContainingText('mat-option .mat-option-text', text));
await browser.wait(protractor.ExpectedConditions.elementToBeClickable(option), 10000);
await option.click();
当测试失败时-很难理解测试
浏览 0提问于2020-07-09得票数 1
1回答
我正在将e2e测试集成到我的项目中。项目使用Typescript (2.6.1)。
我刚刚安装了Protractor (5.2.0)，但是无论我做什么，Typescript都不能从Protractor模块导入任何东西。
我的tsconfig如下所示：
{
"compilerOptions": {
"target": "es5",
"module": "amd"
},
"exclude": [
"./spec",
浏览 0提问于2017-11-13得票数 2
回答已采纳
在页面的初始页面加载时，我有一个用户列表
<div class="user"></div>
<div class="user"></div>
<div class="user"></div>
我用React组件替换了内容：
const buildElement = React.createElement;
let domElements = document.getElementsByClassName('user');
for(let domContain
浏览 2提问于2019-10-24得票数 0
在运行"npm :remote:dev“命令时获得以下错误。在912-1916年间的行中显示错误。
node_modules/@types/chai/index.d.ts(1879,43): error TS1005: ',' expected.
node_modules/@types/chai/index.d.ts(1879,56): error TS1005: ',' expected.
node_modules/@types/chai/index.d.ts(1879,71): error TS1005: ',' expected.
浏览 4提问于2019-10-19得票数 2
1回答
如何在jest测试中模拟阴影元素
、、、、
我有一个react组件ReactComponentContainer，它获取配置和shadowRoot。
import React from 'react';
import App from './App';
import ReactComponent from './ReactComponent';
const ReactComponentContainer = function({config, shadowRoot}) {
configme(shadowRoot.host || shadowRoot);
return (
浏览 2提问于2020-01-11得票数 3
1回答
我正在尝试单击protractor中ng-repeater中的一个复选框，以获取以下html
我使用的代码是；
element.all(by.repeater('user in siteUsers | filter: { SiteId: site.SiteId }'))
.then(function (ElementArray) {
ElementArray[0].all(by.tagName('input')).get(0).click();
}).catch((err)
浏览 0提问于2017-02-20得票数 1
我想要开发一个框架，在这个框架中，我将所有的定位器放在一个地方，在一个json文件中，比如test.json。就像这样。
{
"yourName": "by.model('yourName')"
}
我想在下面的规范中读到这个。
var test = require('./test.json');
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
浏览 7提问于2016-09-13得票数 1
1回答
我正在尝试创建一个基类来在click和select方法中添加显式权重。这是我到目前为止已经尝试过的代码，但在Click.on()上得到错误：
import { Enter, Click } from "serenity-js/lib/screenplay-protractor";
import { by } from "protractor";
import { protractor, browser } from 'protractor';
var EC = protractor.ExpectedConditions;
export cl
浏览 11提问于2018-02-01得票数 0
回答已采纳
1回答
这可能有点棘手-我想在通过模板准备的Web组件中呈现React，但我得到了‘不变的违规:目标容器不是DOM元素’：
import { Component, Prop } from "@stencil/core";
import { format } from "../../utils/utils";
import ReactDOM from 'react-dom';
import React from "react";
import { LikeButton } from './../LikeButton';
c
浏览 0提问于2019-04-19得票数 2
我试图在呈现之后将焦点设置在人物选择器输入上，但是，我不能使用任何dom查询选择器等，因为它并不真正存在于正确的时间。 没有有效的tabindex值，并且输入是渲染中的几个子级。 {this.state.mentionStatus ? (
<div className={styles.mentionSearchBox}>
<PeoplePicker
selectionChanged={this.addPerson}
placeholder="Select person."
showMax={10}
浏览 15提问于2021-08-30得票数 1
回答已采纳
我正在尝试构建一个带有编号行的简单编辑器。我暂时对表示行号的跨度进行了硬编码，但跨度是堆叠在一起的，而不是彼此垂直跟随。我想要的是其中的一个跨度出现在文本区中的每一行旁边。下面是react typescript代码 import React from 'react';
import './Editor.css';
const Editor = () => {
return (
<div className="editor">
<textarea id="codeA
浏览 9提问于2021-07-05得票数 0
2回答
在量角器中元素点不可点击
、、、、
我有一个模式上传images.when，我点击上传图像，它是导航到本地计算机，然后选择指定的图像。我在导航到本地计算机后出错。
错误：
消息:失败:未知错误:元素不能点击点(736,187)。其他元素将收到单击：.(会话信息: chrome=54.0.2840.99) (驱动程序信息: chromedriver=2.25.426923 (0390b888694d6eb0d5d09729679f934aab9eed)，platform=Windows NT 10.0.14393 x86_64)堆栈: WebDriverError:未知错误:元素不可点击点(736,187)。其他元素将收到单击：
浏览 9提问于2016-11-24得票数 1
在aurelia js应用程序中使用protractor编写端到端(e2e)测试时，避免使用browser.sleep的最佳方法是什么？
或者，有没有其他框架更适合使用aurelia进行e2e测试？
PS:我使用aurelia Cli和typescript
谢谢
浏览 7提问于2017-06-26得票数 3
1回答
是否有可能将嵌套的影子王国放置在彼此的顶上？
对于普通DOM，嵌套的div默认情况下只是堆栈：
.d1 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
.d2 {
width: 100px;
height: 100px;
background-color: darkslateblue;
}
.d3 {
width: 50px;
height: 50px;
background-color: lightgray;
}
<div class="contai
浏览 10提问于2022-10-12得票数 0
回答已采纳
在chrome Browser (V51)的JS控制台上，尝试使用以下代码在中访问男装外衣部分下的“立即购物”按钮：
document.querySelector('shop-app').shadowRoot.querySelector('shop-home').shadowRoot.querySelector('shop-button');
我尝试使用selenium在我的自动化测试中访问相同的元素，第1行:WebElement shopBtn = (WebElement)((JavascriptExecutor)driver).execute
浏览 0提问于2016-06-28得票数 1
我的页面上有一个span元素。我想知道如何提取span开始标记和span结束标记之间的文本。我在javascript中使用selenium和protractor。
<span....>
Inner text
</span>
浏览 0提问于2015-04-01得票数 4
2回答
目前，我的组织是在聚合物1与硒，量角器和摩卡，我们使用的阴影。对于验收测试，我们使用/deep/组合器来穿透DOM。对于聚合物2，/deep/组合器是不推荐的。
我的问题：在编写验收测试时，如果不推荐使用/deep/组合器，该如何穿透影子DOM？
浏览 11提问于2017-09-28得票数 6
我想在TypeScript中做一些类似的事情：
public wait(element){
var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element), 5000);
}
但是我得到消息"ts属性‘元素’在类型‘BasePage’上不存在“如何做得更好？
浏览 0提问于2018-03-09得票数 0
我创建了一个类(web组件)，在其中我声明了两个setter和getters，一个用于expressionValue，第二个用于scoreValue。现在我发现了这些错误：
所有‘@typescript-eslint/adjacent-overload-signatures’签名应该是相邻的，所有'scoreValue‘签名都应该是相邻的@typescript-eslint/adjacent-overload-signatures
我想知道如何才能修复这个错误来保留我的setter和getter。或者这是不可能的，而实现这一目标的唯一方法是在@typescript-eslint/ad
浏览 1提问于2020-08-08得票数 4
回答已采纳
我希望将整个HTML DOM (包括Shadow DOM树)序列化为一个字符串，即包括影子主机和阴影根，其方式可以被重构。
我可以通过.shadowRoot.innerHTML编程访问Shadow，但是在整个DOM上调用.outerHTML或使用XMLSerializer并不包括shadowRoot。
是否有一种方法来序列化整个HTML文档，包括影子DOM树？
浏览 3提问于2016-05-04得票数 7
我正在构建一个用于框架的Web组件，它嵌入了一个网格库。
通过将网格包装在HTMLElement类中，我设法使网格显示。
export default class DataGrid extends HTMLElement {
constructor() {
super();
let tmpl = document.createElement('template');
tmpl.innerHTML = `
<div id="lib-datagrid"><
浏览 1提问于2021-10-13得票数 0
回答已采纳
1回答
近年来，web组件标准已经成为Web底层GUI API的标准。它的关键特性之一是Shadow DOM，它封装DOM，支持大大简化CSS选择器。
一个基本的例子是，
const template = document.createElement('template');
template.innerHTML = /*html*/`
<style>
p {
color: red;
}
</style>
<p>Hello, world!</p>
`;
class HelloWorld exten
浏览 2提问于2021-06-20得票数 2
回答已采纳
我是JavaScript的新手。我在React应用程序中编写了一个JavaScript文件，并以这种方式在类中声明了一个私有函数notifyObservers： class Subject {
constructor(idOfDevice) {
//...
}
var notifyObservers = function (data) {
this.observers.forEach(obs => obs.notify(data));
}
getFrequency(idOfDevice) {
//...
}
} 就像我看到的建议那样做
浏览 72提问于2020-04-07得票数 0
回答已采纳
我有一个简单的LitElement组件，像这样：
class MyElement extends LitElement {
constructor() {
super();
}
customMethod(data) {
// do something with the passed parameter
}
render() {
return html`<div id="element"></div>`;
}
}
customElements.define('my-element',
浏览 0提问于2019-09-30得票数 1
假设我创建并插入了这样一个元素
<template id="react-web-component">
<span>template stuff</span
<script src="/static/js/bundle.js" type="text/javascript"></script>
</template>
<script>
(function (window, document) {
const doc = (document._curre
浏览 3提问于2017-08-08得票数 5
回答已采纳
5回答
我试图修改使用阴影根目录创建的web组件的样式。
我看到样式被添加到head标记中，但是它对shadow root没有影响，因为它是封装的。
我需要的是加载所有组件的样式，并使它们显示在shadow root上。
这是创建web组件的一部分：
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './tmp/mockComponent.css'; // This is t
浏览 14提问于2020-03-12得票数 21
我正在尝试使用selenium/python编辑chrome浏览器的搜索和主页。在导航到chrome://settings/searchEngines并将ID为'addSearchEngine‘的'add’按钮定位到‘add’按钮后，我在运行.click函数时得到一个错误。我如何正确定位这个元素，或者有没有其他方法可以用python更新chromes search/startpage？
我猜这个元素被困在一个iframe中，但是我在使用dev工具的页面上找不到一个，xpath注意到以下关于绝对xpath的内容：“它可能是来自不同src的iframe的子元素&它目前不受支
浏览 2提问于2019-07-30得票数 0
我正在使用Protractor创建一个框架来测试Angular网页。我之所以使用TypeScript创建一个Page对象模型，只是因为它的语法对我来说比JavaScript更有意义。这更多的是一种偏好的东西。
当我运行我的自动化脚本时，我使用tsc命令将TypeScript中的所有内容转换为JavaScript，因为我的config文件遇到了错误。在运行tsc命令之后，我运行config.js文件，这将运行我的所有.js文件，包括页面对象文件和脚本文件。问题是Protractor在读取config文件后生成全局值-因此它会抱怨某些语法，比如import，因为JavaScript中没有使用这种语
浏览 1提问于2017-10-07得票数 0
在我的Protractor项目中，执行npm test命令时会出现以下错误
21:55:20] E/runner - Unable to start a WebDriver session.
[21:55:20] E/launcher - Error: SessionNotCreatedError: Unable to create new service: ChromeDriverService
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:2
浏览 1提问于2019-06-13得票数 0
回答已采纳
我已经使用LitHTML和我自己的基于块的库创建了自定义元素来进行状态管理。现在，我偶然发现了这样一种情况:在一个元素中，虽然在其他一些元素中很漂亮，但对于parentNode和parentElement返回null。我不知道为什么？ ? 在什么情况下parentNode和parentElement为空？
浏览 44提问于2020-11-28得票数 1
回答已采纳
3回答
是否可以查看是否存在Shadow DOM元素？我不太关心操纵它，甚至不是真的针对它。我理解封装的原因。但我希望能够根据Shadow DOM元素是否存在来设置常规DOM中其他元素的样式。
有点像：
if ( $('#element-id #shadow-root').length ) {
// true
}
或者，如果不是阴影根，则至少包含一个特定的元素，如div的id。因此，如果div存在，那么很明显Shadow DOM元素就在页面上。
我知道事情不会那么简单...根据我所做的一些研究，有像>>>和/deep/这样的东西，但它们的支持似乎很低/没有/被
浏览 1提问于2016-02-13得票数 15
回答已采纳
2回答
试着用打字本运行量角器，但得到了以下错误
C:\MyFiles\NewTechonologies\Protractor\TypeScript\Test>npm install
npm ERR! not a package C:\Users\skp\AppData\Roaming\npm\node_modules\protractor\bin\protractor
npm ERR! addLocal Could not install C:\Users\skp\AppData\Roaming\npm\node_modules\protractor\bin\protractor
npm ER
浏览 1提问于2017-06-07得票数 0
回答已采纳
ReactJS应用程序不允许在shadow-root中查找元素。
我可以在我的AngularJS应用程序中使用/deep/来访问该元素，但这不适用于React应用程序。
我们能够找到元素，直到$("#root .px-app-nav")这一点
浏览 5提问于2018-05-11得票数 0
我觉得很傻，因为我不能让最基本的量角器测试开始工作。给定量角器5.4.1我有一个spec.js
describe('my example tests', () => {
const EC = protractor.ExpectedConditions;
it('tests google', async () => {
await browser.waitForAngularEnabled(false);
await browser.get("https://google.com");
a
浏览 3提问于2020-02-18得票数 0
回答已采纳
3回答
我正在升级到使用Typescript 2.0和Protractor 4.0.5。我正在从typescript 1.8和protractor 3.8升级一个项目。我遇到了一堆问题，我在这里分享一下：
我的package.json是：
{
"dependencies": {
"core-js": "2.2.2",
"rxjs": "5.0.0-beta.6",
"web-request": "^1.0.3",
"zone.js": "0.6.12"
},
浏览 0提问于2016-10-25得票数 3
1回答
在用npm测试在visual代码中运行量角器测试时，出现了跟随错误，似乎是node_modules/@types/jasmine/index.d.ts的问题，如何消除这个错误？
C:\MyFiles\NewTechonologies\Protractor\TypeScript\Test>npm test
> example-typescript@1.0.0 pretest C:\MyFiles\NewTechonologies\Protractor\TypeScript\Test
> npm run tsc
> example-typescript@1.0.0 t
浏览 0提问于2017-06-08得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
