在 Playwright 中使用關鍵字數組並循環遍歷腳本

Question

所以，我試圖用 Playwright 的幾個搜索短語來抓取幾個搜索引擎。 使用一個查詢運行腳本是有效的。

在職的：

  const { chromium } = require('playwright');

  (async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 250 });
  const context = await browser.newContext()
  const page = await context.newPage();

  const keyWord = ('Arsenal');

  await page.goto('https://duckduckgo.com/');
  await page.fill('//input[@name="q"]',keyWord);
  await page.keyboard.press('Enter');

  const getOne =  ('  (//h2[@class="result__title"])[9]    ');
  await page.waitForSelector(getOne)
  const pushOne = await page.$(getOne);
  const One = await pushOne.evaluate(element => element.innerText);
  console.log(One);

  await page.goto('https://yandex.com/');
  await page.fill('//input[@aria-label="Request"]', keyWord);
  await page.keyboard.press('Enter');

  const getTwo =  ('  //li[@data-first-snippet] //div[@class="organic__url-text"]    ');
  await page.waitForSelector(getTwo)
  const pushTwo = await page.$(getTwo);
  const Two = await pushTwo.evaluate(element => element.innerText);
  console.log(Two);

  await browser.close()
  })()

但是，當我使用帶有短語 (keyWordlist) 的數組時，我無法運行腳本。 已經四處尋找使用帶有“For”和“Foreach”循環的數組，但無法修復它。 我想通過不同的搜索引擎運行不同的關鍵字並列出結果。 對於將獲得 6 個結果的兩個搜索引擎中的 3 個關鍵字。

  const { chromium } = require('playwright');

  (async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 250 });
  const context = await browser.newContext()
  const page = await context.newPage();


  let kewWordlist = ['Arsenal', 'Liverpool', 'Ajax']
  
  for (var i=0; i<=kewWordlist.length; i++) {
        // for (const i in kewWordlist){
        async () => {
              
              const keyWord = kewWordlist[i];

              await page.goto('https://duckduckgo.com/');
              await page.fill('//input[@name="q"]',keyWord);
              // await page.fill('//input[@name="q"]',[i]);
              // await page.fill('//input[@name="q"]',`${keyWord}`);
              await page.keyboard.press('Enter');


              const getOne =  ('  (//h2[@class="result__title"])[9]    ');
              await page.waitForSelector(getOne)
              const pushOne = await page.$(getOne);
              const One = await pushOne.evaluate(element => element.innerText);
              console.log(One);


              // await page.goto('https://yandex.com/');
              // await page.fill('//input[@aria-label="Request"]', keyWord);
              // await page.keyboard.press('Enter');

              // const getTwo =  ('  //li[@data-first-snippet] //div[@class="organic__url-text"]    ');
              // await page.waitForSelector(getTwo)
              // const pushTwo = await page.$(getTwo);
              // const Two = await pushTwo.evaluate(element => element.innerText);
              // console.log(Two);

        }}
        await browser.close()
  })()

如果有人對如何解決這個問題有一些指示，非常有義務。

Answer 1

也許結果選擇器需要一些調整，但我認為這就是您要找的：

test.only('search search engines', async({page, context}) => {

    const search = [
        {
            name: 'yandex',
            url: 'https://yandex.com/',
            elementFill: '//input[@aria-label="Request"]',
            elementResult: '//li[@data-first-snippet] //div[@class="organic__url-text"]'
        },
        {
            name: 'google',
            url: 'https://www.google.nl',
            elementFill: '//input[@name="q"]',
            elementResult: '(//h2[@class="result__title"])[9]'
        },
        {
            name: '',
            url: 'https://duckduckgo.com/',
            elementFill: '//input[@name="q"]',
            elementResult: '(//h2[@class="result__title"])[9]'
        }
    ]
    const kewWordlist = ['Arsenal', 'Liverpool', 'Ajax']

    for (let i = 0; i < search.length; i++) {
        const searchName = search[i].name
        const searchResult = search[i].elementResult
        const searchFill = search[i].elementFill

        const searchPage = await context.newPage()
        await searchPage.waitForLoadState()
        await searchPage.goto(`${search[i].url}`)

        for (let i = 0; i < kewWordlist.length; i++) {
            await searchPage.fill(searchFill,kewWordlist[i])
            await searchPage.keyboard.press('Enter')
            await searchPage.waitForSelector(searchResult)
            const result = await page.$(searchResult)
            console.log(`${searchName}: ${result} `)
        }
    }
})

Answer 2

你的循環不工作的原因是你有一個異步 function 里面你從來沒有調用過。 您可以通過以下幾種方法 go 關於此：

您可以使用您的第一個版本，讓它接受要搜索的單詞，然后在數組的每個元素上運行它：

const searchOneKeyword = async (keyWord) => {
  const browser = await chromium.launch({ headless: false, slowMo: 250 });
  const context = await browser.newContext()
  const page = await context.newPage();

  // rest of code
}

const kewWordList = ['Arsenal', 'Liverpool', 'Ajax']

keyWordList.forEach((k) => {
  searchOneKeyword(k)
})

或者，如果您想保留相同的瀏覽器實例，您可以在 function 中循環執行此操作：

const search = async (words) => {
  const browser = await chromium.launch({ headless: false, slowMo: 250 });
  const context = await browser.newContext()
  const page = await context.newPage();

  for (const keyWord of words) {
    await page.goto('https://duckduckgo.com/');
    await page.fill('//input[@name="q"]',keyWord);
    await page.keyboard.press('Enter');

    const getOne =  ('  (//h2[@class="result__title"])[9]    ');
    await page.waitForSelector(getOne)
    const pushOne = await page.$(getOne);
    const One = await pushOne.evaluate(element => element.innerText);
    console.log(One);

    // etc.
  }

  await browser.close()
}

search(keyWordList)

在這兩種情況下，您都在記錄，但從不返回任何內容，因此如果您之后需要另一個 function 中的數據，則必須更改它。 例子：

const search = async (words) => {
  const browser = await chromium.launch({ headless: false, slowMo: 250 });
  const context = await browser.newContext()
  const page = await context.newPage();

  const results = await Promise.all(words.map((keyWord) => {
    await page.goto('https://duckduckgo.com/');
    await page.fill('//input[@name="q"]',keyWord);
    await page.keyboard.press('Enter');

    // etc.
    
    return [ One, Two ]
  }))

  await browser.close()
  return results
}

search(keyWordList).then((results) => { console.log(results.flat()) })

Answer 3

我花了幾個小時試圖根據您的建議使腳本正常工作。 不幸的是沒有結果。 我收到諸如“等待僅在異步函數中有效”和“檢測到無法訪問的代碼”之類的錯誤。 搜索其他示例，尋找一些靈感，但沒有找到。 如果您或其他人有建議，請分享：這是我現在擁有的代碼：

  const { chromium } = require('playwright');

  let keyWordList = ['Arsenal', 'Liverpool', 'Ajax']

  const search = async function words()  {
        const browser = await chromium.launch({ headless: false, slowMo: 250 });
        const context = await browser.newContext()
        const page = await context.newPage();
        }
        
        const results = await Promise.all(words.map(keyWord))

        //DUCKDUCKGO
        await page.goto('https://duckduckgo.com/');
        await page.fill('//input[@name="q"]',keyWord);
        await page.keyboard.press('Enter');
      
        const getOne =  ('  (//h2[@class="result__title"])[9]    ');
        await page.waitForSelector(getOne)
        const pushOne = await page.$(getOne);
        const One = await pushOne.evaluate(element => element.innerText);

        //YANDEX
        await page.goto('https://yandex.com/');
        await page.fill('//input[@aria-label="Request"]', keyWord);
        await page.keyboard.press('Enter');
  
        const getTwo =  ('  //li[@data-first-snippet] //div[@class="organic__url-text"]    ');
        await page.waitForSelector(getTwo)
        const pushTwo = await page.$(getTwo);
        const Two = await pushTwo.evaluate(element => element.innerText);
        console.log(Two);

        return [ One , Two ]
        return results
        
        search(keyWordList).then((results) => { console.log(results.flat())
              await browser.close();
  })