英文:
puppeteer: type inside input field which is in multiple shadowRoot's
问题
我有一个名为address-search的Web组件，其中包含输入字段，而这个组件位于另一个名为move-property的Web组件内部。我正在我的Angular应用程序中使用move-property，现在我想在address-search的输入字段中键入并调用Google Map API或某个函数。
我的代码
import * as puppeteer from 'puppeteer';
const delay = (milliseconds: number | undefined) =>
new Promise((resolve) => setTimeout(resolve, milliseconds));
describe('workspace-project App', () => {
let browser: puppeteer.Browser;
it('检查标记是否在DOM中', async () => {
browser = await puppeteer.launch({
headless: false,
});
const page = await browser.newPage();
await page.goto('http://localhost:4200');
const comp = await page.evaluate(() => (document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles > move-property-tile')?.shadowRoot?.querySelector('nest-tile > nest-btn') as HTMLElement)?.click());
delay(4000);
const comp2 = await page.evaluate(() => document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles > div')?.innerHTML);
delay(4000);
const comp3 = await page.evaluate(() => document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles > div > move-property')?.shadowRoot?.querySelector('nest-popup > div.address-input > address-search'));
if (comp3 !== null && comp3 !== undefined) {
await (comp3 as unknown as typeof page).type('form > #address', "LL");
} else {
null;
}
console.log(comp3);
await browser.close();
});
});
DOM SS
我尝试过的
我知道我可以使用puppeteer的page.type()方法，但它与shadowRoot不兼容。我尝试获取父组件的shadowRoot，然后尝试使用comp.type()，但它会报错，因为type是页面的方法。
Puppeteer版本：19.7.2
Angular版本：14
我的期望
使用puppeteer在Angular应用程序中键入深度嵌套的输入字段。
英文:
I have a web component address-search which has input field and this component is inside another web component move-property and i am using the move-property in my angular app , now I want to type in the input field of address-search and call google Map-Api or some function
My code
import * as puppeteer from 'puppeteer';
const delay = (milliseconds: number | undefined) =>
new Promise((resolve) => setTimeout(resolve, milliseconds));
describe('workspace-project App', () => {
let browser: puppeteer.Browser;
it('Test to check if tag is on the DOM or not ', async () => {
browser = await puppeteer.launch({
headless: false,
});
const page = await browser.newPage();
await page.goto('http://localhost:4200');
const comp = await page.evaluate(() => (document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles >move-property-tile')?.shadowRoot?.querySelector('nest-tile > nest-btn') as HTMLElement)?.click());
delay(4000);
const comp2 = await page.evaluate(() => document.querySelector('body > app-root > main > nest-container > app-home > nest-tiles >div')?.innerHTML);
// expect(comp2).not.toBeNull()
delay(4000);
const comp3 = await page.evaluate(() => document.querySelector('body > app-root > main > nest-container> app-home > nest-tiles >div>move-property')?.shadowRoot?.querySelector('nest-popup > div.address-input>address-search'));
comp3 !== null && comp3 !== undefined ? await (comp3 as unknown as typeof page).type('form > #address', "LL") : null
console.log(comp3);
await browser.close();
});});
DOM SS
What I tried
I know I can use puppeteer page.type() method but it's not working with shadowRoot and I tried getting the shadowRoot of parent component and try comp.type() but it say error type is not a function as because its a function for page only
Puppeteer version: 19.7.2
Angular version : 14
What i expect
Type in the input field which is multiple shadowRoot deep, using puppeteer in angular app
答案1
得分: 0
所以我找到了答案
async function typeInInput(inputElement) {
inputElement.setAttribute('type', 'text');
inputElement.focus();
inputElement.value = '';
const numberString = "Some Text";
for (let i = 0; i < numberString.length; i++) {
const digit = numberString[i];
const keyboardEvent = new KeyboardEvent('keydown', { key: digit });
inputElement.dispatchEvent(keyboardEvent);
inputElement.value += digit;
const inputEvent = new InputEvent('input', {
inputType: 'insertText',
data: digit,
});
inputElement.dispatchEvent(inputEvent);
const changeEvent = new Event('change');
inputElement.dispatchEvent(changeEvent);
await new Promise(resolve => setTimeout(resolve, 50));
}
}
我们只需要用我们的目标元素调用这个函数
英文:
So i found the answer
async function typeInInput(inputElement) {
inputElement.setAttribute('type', 'text');
inputElement.focus();
inputElement.value = '';
const numberString = "Some Text";
for (let i = 0; i < numberString.length; i++) {
const digit = numberString[i];
const keyboardEvent = new KeyboardEvent('keydown', { key: digit });
inputElement.dispatchEvent(keyboardEvent);
inputElement.value += digit;
const inputEvent = new InputEvent('input', {
inputType: 'insertText',
data: digit,
});
inputElement.dispatchEvent(inputEvent);
const changeEvent = new Event('change');
inputElement.dispatchEvent(changeEvent);
await new Promise(resolve => setTimeout(resolve, 50));
}
}
We just need to call this function with our target element
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论