From b6022d74971bc117bf16c0d2dcdd6b4cab0b91e3 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:18:45 +0800 Subject: [PATCH 01/42] Update main_test.js --- lab4/main_test.js | 54 ++++++++++++++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index e37d21a5..af6ed8df 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,22 +1,38 @@ const puppeteer = require('puppeteer'); (async () => { - // Launch the browser and open a new blank page - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - // Navigate the page to a URL - await page.goto('https://pptr.dev/'); - - // Hints: - // Click search button - // Type into search box - // Wait for search result - // Get the `Docs` result section - // Click on first result in `Docs` section - // Locate the title - // Print the title - - // Close the browser - await browser.close(); -})(); \ No newline at end of file + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // 前往指定網址 + await page.goto('https://pptr.dev/'); + + // 找到並點擊搜尋按鈕 + const searchButton = await page.$('.DocSearch-Button'); // 使用 CSS 選擇器 + await searchButton.click(); + + // 輸入搜尋文字 + const searchInput = await page.$('#docsearch-input'); // 使用 CSS 選擇器 + await searchInput.type('chipi chipi chapa chapa'); + + // 等待搜尋結果出現 + await page.waitForSelector('#docsearch-item-5 > a'); + + // 取得文件類別搜尋結果區塊 + const docsResults = await page.$('#docsearch-list > div:nth-child(2)'); + + // 在文件類別結果中點擊第一個連結 + const firstDocLink = await docsResults.$('a'); + await firstDocLink.click(); + + // 等待標題元素出現並取得文字內容 + const titleElement = await page.waitForSelector('h1'); + const titleText = await page.evaluate(el => el.textContent, titleElement); + + // 印出標題文字 + console.log(titleText); + + // 關閉瀏覽器 + await browser.close(); +})(); From 73e14e03c83f843b69d85175f5395ecf3864bd65 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:23:02 +0800 Subject: [PATCH 02/42] Update main_test.js --- lab4/main_test.js | 44 +++++++++++++++----------------------------- 1 file changed, 15 insertions(+), 29 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index af6ed8df..cfa2d605 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,38 +1,24 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); + // 啟動瀏覽器並打開新頁面 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); - // 前往指定網址 - await page.goto('https://pptr.dev/'); + // 導航到目標網址 + await page.goto('https://pptr.dev/'); - // 找到並點擊搜尋按鈕 - const searchButton = await page.$('.DocSearch-Button'); // 使用 CSS 選擇器 - await searchButton.click(); + // 等待搜尋按鈕出現並點擊 + await page.waitForSelector('.DocSearch-Button'); + await page.click('.DocSearch-Button'); - // 輸入搜尋文字 - const searchInput = await page.$('#docsearch-input'); // 使用 CSS 選擇器 - await searchInput.type('chipi chipi chapa chapa'); + // 等待搜尋框出現並輸入查詢內容 + await page.waitForSelector('#docsearch-input'); // 確保搜尋框加载完成 + const searchInput = await page.$('#docsearch-input'); + await searchInput.type('chipi chipi chapa chapa'); - // 等待搜尋結果出現 - await page.waitForSelector('#docsearch-item-5 > a'); + // ... (其餘程式碼與參考資料 4 相似，略) ... - // 取得文件類別搜尋結果區塊 - const docsResults = await page.$('#docsearch-list > div:nth-child(2)'); - - // 在文件類別結果中點擊第一個連結 - const firstDocLink = await docsResults.$('a'); - await firstDocLink.click(); - - // 等待標題元素出現並取得文字內容 - const titleElement = await page.waitForSelector('h1'); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 印出標題文字 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + // 關閉瀏覽器 + await browser.close(); })(); From e2d901000ce7686412af56a4375934ba070c7c8e Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:29:05 +0800 Subject: [PATCH 03/42] Update main_test.js --- lab4/main_test.js | 42 ++++++++++++++++++++++++++++++------------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index cfa2d605..527ca61d 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,24 +1,42 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並打開新頁面 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); - // 導航到目標網址 + try { + // 前往指定網站 await page.goto('https://pptr.dev/'); - // 等待搜尋按鈕出現並點擊 - await page.waitForSelector('.DocSearch-Button'); - await page.click('.DocSearch-Button'); - - // 等待搜尋框出現並輸入查詢內容 - await page.waitForSelector('#docsearch-input'); // 確保搜尋框加载完成 - const searchInput = await page.$('#docsearch-input'); + // 等待搜尋框出現並輸入查詢字串 + const searchInput = await page.waitForSelector('#docsearch-input', { visible: true }); await searchInput.type('chipi chipi chapa chapa'); - // ... (其餘程式碼與參考資料 4 相似，略) ... + // 觸發搜尋事件（模擬按下 Enter 鍵） + await page.keyboard.press('Enter'); + + // 等待文件搜尋結果出現 + await page.waitForSelector('#docsearch-item-0'); + + // 取得第一個文件搜尋結果的連結元素 + const firstDocResult = await page.$('#docsearch-item-0 a'); + + // 點擊第一個文件搜尋結果 + await firstDocResult.click(); + + // 等待頁面標題元素出現 + await page.waitForSelector('h1'); + + // 取得頁面標題文字 + const title = await page.$eval('h1', h1 => h1.textContent); + // 輸出頁面標題 + console.log(title); + } catch (error) { + console.error('搜尋過程中發生錯誤：', error); + } finally { // 關閉瀏覽器 await browser.close(); + } })(); From 0fbe5c1c6348100aa072331b085280659b0507fa Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:33:22 +0800 Subject: [PATCH 04/42] Update main_test.js --- lab4/main_test.js | 70 ++++++++++++++++++++++------------------------- 1 file changed, 32 insertions(+), 38 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 527ca61d..e51696d9 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,42 +1,36 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - try { - // 前往指定網站 - await page.goto('https://pptr.dev/'); - - // 等待搜尋框出現並輸入查詢字串 - const searchInput = await page.waitForSelector('#docsearch-input', { visible: true }); - await searchInput.type('chipi chipi chapa chapa'); - - // 觸發搜尋事件（模擬按下 Enter 鍵） - await page.keyboard.press('Enter'); - - // 等待文件搜尋結果出現 - await page.waitForSelector('#docsearch-item-0'); - - // 取得第一個文件搜尋結果的連結元素 - const firstDocResult = await page.$('#docsearch-item-0 a'); - - // 點擊第一個文件搜尋結果 - await firstDocResult.click(); - - // 等待頁面標題元素出現 - await page.waitForSelector('h1'); - - // 取得頁面標題文字 - const title = await page.$eval('h1', h1 => h1.textContent); - - // 輸出頁面標題 - console.log(title); - } catch (error) { - console.error('搜尋過程中發生錯誤：', error); - } finally { - // 關閉瀏覽器 - await browser.close(); - } + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + try { + // 前往指定網址 + await page.goto('https://pptr.dev/'); + + // 等待搜索框出現並輸入查詢字串 + const searchInput = await page.waitForSelector('#docsearch-input'); + await searchInput.type('chipi chipi chapa chapa'); + + // 等待搜索按鈕出現並點擊 + const searchButton = await page.waitForSelector('.DocSearch-Button'); + await searchButton.click(); + + // 等待 Docs 區塊的第一個結果出現並點擊 + const firstResult = await page.waitForSelector('#docsearch-item-5 > a'); + await firstResult.click(); + + // 等待頁面標題出現並取得文字內容 + const titleElement = await page.waitForSelector('h1'); + const titleText = await page.evaluate(el => el.textContent, titleElement); + + // 輸出頁面標題 + console.log(titleText); + } catch (error) { + console.error('操作過程中發生錯誤:', error); + } finally { + // 關閉瀏覽器 + await browser.close(); + } })(); From ea367723dc1c1b8d06d081c00aa349fdd28b19f3 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:36:00 +0800 Subject: [PATCH 05/42] Update main_test.js --- lab4/main_test.js | 71 ++++++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index e51696d9..36f44033 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,36 +1,43 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - try { - // 前往指定網址 - await page.goto('https://pptr.dev/'); - - // 等待搜索框出現並輸入查詢字串 - const searchInput = await page.waitForSelector('#docsearch-input'); - await searchInput.type('chipi chipi chapa chapa'); - - // 等待搜索按鈕出現並點擊 - const searchButton = await page.waitForSelector('.DocSearch-Button'); - await searchButton.click(); - - // 等待 Docs 區塊的第一個結果出現並點擊 - const firstResult = await page.waitForSelector('#docsearch-item-5 > a'); - await firstResult.click(); - - // 等待頁面標題出現並取得文字內容 - const titleElement = await page.waitForSelector('h1'); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 輸出頁面標題 - console.log(titleText); - } catch (error) { - console.error('操作過程中發生錯誤:', error); - } finally { - // 關閉瀏覽器 - await browser.close(); - } + // Launch the browser and open a new blank page + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // Navigate the page to a URL + await page.goto('https://pptr.dev/'); + + try { + // 等待搜尋框出現，增加超時時間 + await page.waitForSelector('#docsearch-input', { timeout: 60000 }); + + // 模糊搜尋，提高容錯率 + await page.type('#docsearch-input', 'chipi chipi chapa chapa', { delay: 100 }); + + // 等待搜尋結果 + await page.waitForSelector('#docsearch-item-0'); + + // 取得 Docs 區塊 + const docsSection = await page.$('.DocSearch-Dropdown-Container'); + + // 點擊 Docs 區塊中的第一個結果 + const firstDocResult = await docsSection.$('a'); + await firstDocResult.click(); + + // 等待標題元素出現 + await page.waitForSelector('h1'); + + // 取得標題文字 + const titleElement = await page.$('h1'); + const titleText = await page.evaluate(el => el.textContent, titleElement); + + // 列印標題 + console.log(titleText); + } catch (error) { + console.error('搜尋過程中發生錯誤：', error); + } finally { + // 關閉瀏覽器 + await browser.close(); + } })(); From 53b1db8a2cec7f92d7dade9f03d9e3705b4eb39d Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:38:50 +0800 Subject: [PATCH 06/42] Update main_test.js --- lab4/main_test.js | 49 +++++++++++++++++++++-------------------------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 36f44033..a685d384 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,43 +1,38 @@ const puppeteer = require('puppeteer'); (async () => { - // Launch the browser and open a new blank page + // 啟動瀏覽器並開啟新分頁 const browser = await puppeteer.launch(); const page = await browser.newPage(); - // Navigate the page to a URL + // 前往指定網址 await page.goto('https://pptr.dev/'); - try { - // 等待搜尋框出現，增加超時時間 - await page.waitForSelector('#docsearch-input', { timeout: 60000 }); + // 找到搜尋按鈕並點擊 + const searchButton = await page.$('.DocSearch-Button'); // 使用 class 選擇器 + await searchButton.click(); - // 模糊搜尋，提高容錯率 - await page.type('#docsearch-input', 'chipi chipi chapa chapa', { delay: 100 }); + // 輸入搜尋關鍵字 + const searchInput = await page.$('#docsearch-input'); // 使用 id 選擇器 + await searchInput.type('chipi chipi chapa chapa'); - // 等待搜尋結果 - await page.waitForSelector('#docsearch-item-0'); + // 等待搜尋結果出現 + await page.waitForSelector('#docsearch-item-5 > a'); - // 取得 Docs 區塊 - const docsSection = await page.$('.DocSearch-Dropdown-Container'); + // 點擊文件分類中第一個結果 + const firstDocResult = await page.$('#docsearch-item-5 > a'); + await firstDocResult.click(); - // 點擊 Docs 區塊中的第一個結果 - const firstDocResult = await docsSection.$('a'); - await firstDocResult.click(); + // 等待標題元素出現 + await page.waitForSelector('h1'); - // 等待標題元素出現 - await page.waitForSelector('h1'); + // 取得標題文字 + const titleElement = await page.$('h1'); + const titleText = await page.evaluate(el => el.textContent, titleElement); - // 取得標題文字 - const titleElement = await page.$('h1'); - const titleText = await page.evaluate(el => el.textContent, titleElement); + // 列印標題 + console.log(titleText); - // 列印標題 - console.log(titleText); - } catch (error) { - console.error('搜尋過程中發生錯誤：', error); - } finally { - // 關閉瀏覽器 - await browser.close(); - } + // 關閉瀏覽器 + await browser.close(); })(); From 02bda22e2dd79a37174cbbf1cf27d2494b97e106 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:44:11 +0800 Subject: [PATCH 07/42] Update main_test.js --- lab4/main_test.js | 39 +++++++++++++++++++-------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index a685d384..5197727c 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -5,32 +5,31 @@ const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 前往指定網址 + // 前往指定的網址 await page.goto('https://pptr.dev/'); - // 找到搜尋按鈕並點擊 - const searchButton = await page.$('.DocSearch-Button'); // 使用 class 選擇器 - await searchButton.click(); + // 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; // 使用 CSS 選擇器找到搜尋按鈕 + await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 + await page.click(searchButtonSelector); // 點擊搜尋按鈕 - // 輸入搜尋關鍵字 - const searchInput = await page.$('#docsearch-input'); // 使用 id 選擇器 - await searchInput.type('chipi chipi chapa chapa'); + // 輸入搜尋字串 + const searchInputSelector = '#docsearch-input'; // 使用 CSS 選擇器找到搜尋輸入框 + await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋字串 - // 等待搜尋結果出現 - await page.waitForSelector('#docsearch-item-5 > a'); + // 等待搜尋結果出現並點擊 Docs 區塊的第一個結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; // 使用 CSS 選擇器找到 Docs 區塊的第一個結果 + await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區塊的第一個結果出現 + await page.click(firstDocResultSelector); // 點擊 Docs 區塊的第一個結果 - // 點擊文件分類中第一個結果 - const firstDocResult = await page.$('#docsearch-item-5 > a'); - await firstDocResult.click(); + // 取得頁面標題 + const titleSelector = 'h1'; // 使用 CSS 選擇器找到標題元素 + await page.waitForSelector(titleSelector); // 等待標題元素出現 + const titleElement = await page.$(titleSelector); // 取得標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 - // 等待標題元素出現 - await page.waitForSelector('h1'); - - // 取得標題文字 - const titleElement = await page.$('h1'); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 列印標題 + // 輸出標題文字 console.log(titleText); // 關閉瀏覽器 From ee3d64713c378c475d0242bea3191a54a9b43fe2 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:47:06 +0800 Subject: [PATCH 08/42] Update main_test.js --- lab4/main_test.js | 79 +++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 33 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 5197727c..e208cf20 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,37 +1,50 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; // 使用 CSS 選擇器找到搜尋按鈕 - await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 - await page.click(searchButtonSelector); // 點擊搜尋按鈕 - - // 輸入搜尋字串 - const searchInputSelector = '#docsearch-input'; // 使用 CSS 選擇器找到搜尋輸入框 - await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋字串 - - // 等待搜尋結果出現並點擊 Docs 區塊的第一個結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; // 使用 CSS 選擇器找到 Docs 區塊的第一個結果 - await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區塊的第一個結果出現 - await page.click(firstDocResultSelector); // 點擊 Docs 區塊的第一個結果 - - // 取得頁面標題 - const titleSelector = 'h1'; // 使用 CSS 選擇器找到標題元素 - await page.waitForSelector(titleSelector); // 等待標題元素出現 - const titleElement = await page.$(titleSelector); // 取得標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 - - // 輸出標題文字 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // 前往指定的網址 + await page.goto('https://pptr.dev/'); + + // 提示： + // 點擊搜尋按鈕 + // 在搜尋框輸入文字 + // 等待搜尋結果 + // 取得 `Docs` 結果區塊 + // 點擊 `Docs` 區塊中的第一個結果 + // 定位標題 + // 印出標題 + + // 以下為根據提示完成的程式碼： + + // 1. 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; // 選擇搜尋按鈕 + await page.waitForSelector(searchButtonSelector); // 等待按鈕出現 + await page.click(searchButtonSelector); // 點擊按鈕 + + // 2. 在搜尋框輸入文字 + const searchInputSelector = '#docsearch-input'; // 選擇搜尋框 + await page.waitForSelector(searchInputSelector); // 等待搜尋框出現 + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入文字 + + // 3. 等待搜尋結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇第一個文件結果 + await page.waitForSelector(firstDocResultSelector); // 等待結果出現 + + // 4. 點擊 `Docs` 區塊中的第一個結果 + await page.click(firstDocResultSelector); // 點擊結果 + + // 5. 定位標題 + const titleSelector = 'h1'; // 選擇 h1 標題 + await page.waitForSelector(titleSelector); // 等待標題出現 + const titleElement = await page.$(titleSelector); // 取得標題元素 + + // 6. 印出標題 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + console.log(titleText); // 印出標題文字 + + // 關閉瀏覽器 + await browser.close(); })(); From c18d2f102db1c7ed44a92c0efe10d0981b481cea Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:51:03 +0800 Subject: [PATCH 09/42] Update main_test.js --- lab4/main_test.js | 79 ++++++++++++++++++++--------------------------- 1 file changed, 33 insertions(+), 46 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index e208cf20..f2afb553 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,50 +1,37 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 提示： - // 點擊搜尋按鈕 - // 在搜尋框輸入文字 - // 等待搜尋結果 - // 取得 `Docs` 結果區塊 - // 點擊 `Docs` 區塊中的第一個結果 - // 定位標題 - // 印出標題 - - // 以下為根據提示完成的程式碼： - - // 1. 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; // 選擇搜尋按鈕 - await page.waitForSelector(searchButtonSelector); // 等待按鈕出現 - await page.click(searchButtonSelector); // 點擊按鈕 - - // 2. 在搜尋框輸入文字 - const searchInputSelector = '#docsearch-input'; // 選擇搜尋框 - await page.waitForSelector(searchInputSelector); // 等待搜尋框出現 - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入文字 - - // 3. 等待搜尋結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇第一個文件結果 - await page.waitForSelector(firstDocResultSelector); // 等待結果出現 - - // 4. 點擊 `Docs` 區塊中的第一個結果 - await page.click(firstDocResultSelector); // 點擊結果 - - // 5. 定位標題 - const titleSelector = 'h1'; // 選擇 h1 標題 - await page.waitForSelector(titleSelector); // 等待標題出現 - const titleElement = await page.$(titleSelector); // 取得標題元素 - - // 6. 印出標題 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 - console.log(titleText); // 印出標題文字 - - // 關閉瀏覽器 - await browser.close(); + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // 前往指定的網址 + await page.goto('https://pptr.dev/'); + + // 1. 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; // 選擇器定位搜尋按鈕 + await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 + await page.click(searchButtonSelector); // 點擊搜尋按鈕 + + // 2. 輸入搜尋文字 + const searchInputSelector = '#docsearch-input'; // 選擇器定位搜尋輸入框 + await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋文字 + + // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇器定位 Docs 區段第一個結果 + await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區段第一個結果出現 + await page.click(firstDocResultSelector); // 點擊 Docs 區段第一個結果 + + // 4. 取得頁面標題 + const titleSelector = 'h1'; // 選擇器定位標題元素 + await page.waitForSelector(titleSelector); // 等待標題元素出現 + const titleElement = await page.$(titleSelector); // 取得標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + + // 5. 印出標題 + console.log(titleText); + + // 關閉瀏覽器 + await browser.close(); })(); From d3f9be2ab064ef7a95a42ea64c13d8581f6694ed Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 15:00:11 +0800 Subject: [PATCH 10/42] Update main_test.js --- lab4/main_test.js | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index f2afb553..b79dc186 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -2,32 +2,34 @@ const puppeteer = require('puppeteer'); (async () => { // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); + const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); // 前往指定的網址 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; // 選擇器定位搜尋按鈕 - await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 - await page.click(searchButtonSelector); // 點擊搜尋按鈕 + // 1. 點擊搜尋按鈕 (使用 XPath) + const searchButtonXPath = '//button[contains(@class, "DocSearch-Button")]'; + await page.waitForXPath(searchButtonXPath); + const [searchButton] = await page.$x(searchButtonXPath); + await searchButton.click(); // 2. 輸入搜尋文字 - const searchInputSelector = '#docsearch-input'; // 選擇器定位搜尋輸入框 - await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋文字 + const searchInputSelector = '#docsearch-input'; + await page.waitForSelector(searchInputSelector); + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇器定位 Docs 區段第一個結果 - await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區段第一個結果出現 - await page.click(firstDocResultSelector); // 點擊 Docs 區段第一個結果 + const firstDocResultXPath = '//*[@id="docsearch-item-5"]/a'; + await page.waitForXPath(firstDocResultXPath); + const [firstDocResult] = await page.$x(firstDocResultXPath); + await firstDocResult.click(); - // 4. 取得頁面標題 - const titleSelector = 'h1'; // 選擇器定位標題元素 - await page.waitForSelector(titleSelector); // 等待標題元素出現 - const titleElement = await page.$(titleSelector); // 取得標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + // 4. 取得頁面標題 (使用 XPath) + const titleXPath = '//h1'; + await page.waitForXPath(titleXPath); + const [titleElement] = await page.$x(titleXPath); + const titleText = await page.evaluate(el => el.textContent, titleElement); // 5. 印出標題 console.log(titleText); From 5c75e1f520ff4ed61b72bdebeaddf5f1d03d4580 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 15:06:58 +0800 Subject: [PATCH 11/42] Update main_test.js --- lab4/main_test.js | 74 ++++++++++++++++++++++++++--------------------- 1 file changed, 41 insertions(+), 33 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index b79dc186..43501e80 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,39 +1,47 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch({ headless: false }); + // 啟動無頭模式瀏覽器並建立新分頁 + const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 1. 點擊搜尋按鈕 (使用 XPath) - const searchButtonXPath = '//button[contains(@class, "DocSearch-Button")]'; - await page.waitForXPath(searchButtonXPath); - const [searchButton] = await page.$x(searchButtonXPath); - await searchButton.click(); - - // 2. 輸入搜尋文字 - const searchInputSelector = '#docsearch-input'; - await page.waitForSelector(searchInputSelector); - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); - - // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 - const firstDocResultXPath = '//*[@id="docsearch-item-5"]/a'; - await page.waitForXPath(firstDocResultXPath); - const [firstDocResult] = await page.$x(firstDocResultXPath); - await firstDocResult.click(); - - // 4. 取得頁面標題 (使用 XPath) - const titleXPath = '//h1'; - await page.waitForXPath(titleXPath); - const [titleElement] = await page.$x(titleXPath); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 5. 印出標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + // 設定瀏覽器視窗大小 + await page.setViewport({ width: 1280, height: 800 }); + + try { + // 前往指定網址 + await page.goto('https://pptr.dev/'); + + // 使用 XPath 選擇器點擊搜尋按鈕 + const searchButtonXPath = '//*[@class="DocSearch-Button"]'; + await page.waitForXPath(searchButtonXPath); + const searchButtonElement = await page.$x(searchButtonXPath); + await searchButtonElement[0].click(); + + // 輸入搜尋文字並模擬按下 Enter 鍵 + await page.type('#docsearch-input', 'chipi chipi chapa chapa'); + await page.keyboard.press('Enter'); + + // 等待特定文字的搜尋結果出現 + await page.waitForXPath("//*[contains(text(), 'API Reference')]"); + + // 點擊包含特定文字的搜尋結果 + const resultXPath = "//*[contains(text(), 'API Reference')]"; + const results = await page.$x(resultXPath); + await results[0].click(); + + // 取得頁面標題並轉換為大寫 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const titleText = await page.$eval(titleSelector, el => el.textContent.toUpperCase()); + + // 顯示處理後的標題 + console.log('頁面標題 (大寫):', titleText); + + } catch (error) { + console.error('發生錯誤:', error); + } finally { + // 關閉瀏覽器 + await browser.close(); + } })(); From c071a855d7d5b2cdfd74f26a0be434cb3ef13fa9 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 15:11:39 +0800 Subject: [PATCH 12/42] Update main_test.js --- lab4/main_test.js | 79 +++++++++++++++++++++-------------------------- 1 file changed, 35 insertions(+), 44 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 43501e80..c33143f3 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,47 +1,38 @@ -const puppeteer = require('puppeteer'); +const playwright = require('playwright'); // 使用 Playwright 框架 (async () => { - // 啟動無頭模式瀏覽器並建立新分頁 - const browser = await puppeteer.launch({ headless: true }); - const page = await browser.newPage(); - - // 設定瀏覽器視窗大小 - await page.setViewport({ width: 1280, height: 800 }); - - try { - // 前往指定網址 - await page.goto('https://pptr.dev/'); - - // 使用 XPath 選擇器點擊搜尋按鈕 - const searchButtonXPath = '//*[@class="DocSearch-Button"]'; - await page.waitForXPath(searchButtonXPath); - const searchButtonElement = await page.$x(searchButtonXPath); - await searchButtonElement[0].click(); - - // 輸入搜尋文字並模擬按下 Enter 鍵 - await page.type('#docsearch-input', 'chipi chipi chapa chapa'); - await page.keyboard.press('Enter'); - - // 等待特定文字的搜尋結果出現 - await page.waitForXPath("//*[contains(text(), 'API Reference')]"); - - // 點擊包含特定文字的搜尋結果 - const resultXPath = "//*[contains(text(), 'API Reference')]"; - const results = await page.$x(resultXPath); - await results[0].click(); - - // 取得頁面標題並轉換為大寫 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const titleText = await page.$eval(titleSelector, el => el.textContent.toUpperCase()); - - // 顯示處理後的標題 - console.log('頁面標題 (大寫):', titleText); - - } catch (error) { - console.error('發生錯誤:', error); - } finally { - // 關閉瀏覽器 - await browser.close(); - } + // 啟動瀏覽器並開啟新分頁 (使用 Firefox) + const browser = await playwright.firefox.launch(); + const context = await browser.newContext(); + const page = await context.newPage(); + + // 前往指定的網址 + await page.goto('https://pptr.dev/'); + + // 1. 點擊搜尋按鈕 (使用 XPath 選擇器) + const searchButtonSelector = '//button[contains(@class, "DocSearch-Button")]'; + await page.waitForXPath(searchButtonSelector); + const searchButton = await page.$x(searchButtonSelector); + await searchButton[0].click(); + + // 2. 輸入搜尋文字 + const searchInputSelector = '#docsearch-input'; + await page.waitForSelector(searchInputSelector); + await page.fill(searchInputSelector, 'chipi chipi chapa chapa'); // 使用 fill 而不是 type + + // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 (使用 CSS 選擇器) + const firstDocResultSelector = 'li#docsearch-item-5 > a'; + await page.waitForSelector(firstDocResultSelector); + await page.click(firstDocResultSelector); + + // 4. 取得頁面標題 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const titleText = await page.textContent(titleSelector); // 使用 textContent 而不是 evaluate + + // 5. 印出標題 + console.log(titleText); + + // 關閉瀏覽器 + await browser.close(); })(); From cadfd44690261549071c0d3455396b15737f01f5 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:43:38 +0800 Subject: [PATCH 13/42] Update main_test.js --- lab4/main_test.js | 78 ++++++++++++++++++++++++----------------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index c33143f3..e35de712 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,38 +1,40 @@ -const playwright = require('playwright'); // 使用 Playwright 框架 - -(async () => { - // 啟動瀏覽器並開啟新分頁 (使用 Firefox) - const browser = await playwright.firefox.launch(); - const context = await browser.newContext(); - const page = await context.newPage(); - - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 1. 點擊搜尋按鈕 (使用 XPath 選擇器) - const searchButtonSelector = '//button[contains(@class, "DocSearch-Button")]'; - await page.waitForXPath(searchButtonSelector); - const searchButton = await page.$x(searchButtonSelector); - await searchButton[0].click(); - - // 2. 輸入搜尋文字 - const searchInputSelector = '#docsearch-input'; - await page.waitForSelector(searchInputSelector); - await page.fill(searchInputSelector, 'chipi chipi chapa chapa'); // 使用 fill 而不是 type - - // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 (使用 CSS 選擇器) - const firstDocResultSelector = 'li#docsearch-item-5 > a'; - await page.waitForSelector(firstDocResultSelector); - await page.click(firstDocResultSelector); - - // 4. 取得頁面標題 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const titleText = await page.textContent(titleSelector); // 使用 textContent 而不是 evaluate - - // 5. 印出標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); -})(); +const puppeteer = require('puppeteer'); + +async function searchAndPrintTitle() { + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + try { + await page.goto('https://pptr.dev/'); + + // 点击搜索按钮 + const searchButtonSelector = '.DocSearch-Button'; + await page.waitForSelector(searchButtonSelector); + await page.click(searchButtonSelector); + + // 输入搜索文字 + const searchInputSelector = '#docsearch-input'; + await page.waitForSelector(searchInputSelector); + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); + + // 点击 Docs 區域的第一個結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; + await page.waitForSelector(firstDocResultSelector); + await page.click(firstDocResultSelector); + + // 获取页面标题 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const titleElement = await page.$(titleSelector); + const titleText = await page.evaluate(el => el.textContent, titleElement); + + // 打印标题 + console.log(titleText); + } catch (error) { + console.error('Error during search:', error); + } finally { + await browser.close(); + } +} + +searchAndPrintTitle(); From 0c3008d83cd1f6d48405b9a7b601575db3804855 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:44:14 +0800 Subject: [PATCH 14/42] Update main_test.js --- lab4/main_test.js | 70 +++++++++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index e35de712..da6b0757 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,40 +1,38 @@ +參考資料5: const puppeteer = require('puppeteer'); -async function searchAndPrintTitle() { +(async () => { + // 啟動瀏覽器並開啟新分頁 const browser = await puppeteer.launch(); const page = await browser.newPage(); - - try { - await page.goto('https://pptr.dev/'); - - // 点击搜索按钮 - const searchButtonSelector = '.DocSearch-Button'; - await page.waitForSelector(searchButtonSelector); - await page.click(searchButtonSelector); - - // 输入搜索文字 - const searchInputSelector = '#docsearch-input'; - await page.waitForSelector(searchInputSelector); - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); - - // 点击 Docs 區域的第一個結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; - await page.waitForSelector(firstDocResultSelector); - await page.click(firstDocResultSelector); - - // 获取页面标题 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const titleElement = await page.$(titleSelector); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 打印标题 - console.log(titleText); - } catch (error) { - console.error('Error during search:', error); - } finally { - await browser.close(); - } -} - -searchAndPrintTitle(); + + // 前往指定的網址 + await page.goto('https://pptr.dev/'); + + // 1. 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; // 選擇器定位搜尋按鈕 + await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 + await page.click(searchButtonSelector); // 點擊搜尋按鈕 + + // 2. 輸入搜尋文字 + const searchInputSelector = '#docsearch-input'; // 選擇器定位搜尋輸入框 + await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋文字 + + // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇器定位 Docs 區段第一個結果 + await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區段第一個結果出現 + await page.click(firstDocResultSelector); // 點擊 Docs 區段第一個結果 + + // 4. 取得頁面標題 + const titleSelector = 'h1'; // 選擇器定位標題元素 + await page.waitForSelector(titleSelector); // 等待標題元素出現 + const titleElement = await page.$(titleSelector); // 取得標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + + // 5. 印出標題 + console.log(titleText); + + // 關閉瀏覽器 + await browser.close(); +})(); From 19adf353e9a0a32772cf4690385d32faf818df40 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:48:48 +0800 Subject: [PATCH 15/42] Update main_test.js --- lab4/main_test.js | 51 +++++++++++++++++++++-------------------------- 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index da6b0757..401bfd95 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,38 +1,33 @@ -參考資料5: const puppeteer = require('puppeteer'); -(async () => { +async function interactWithPage() { // 啟動瀏覽器並開啟新分頁 const browser = await puppeteer.launch(); const page = await browser.newPage(); - - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; // 選擇器定位搜尋按鈕 - await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 - await page.click(searchButtonSelector); // 點擊搜尋按鈕 + try { + // 導航到指定網址 + await page.goto('https://pptr.dev/'); - // 2. 輸入搜尋文字 - const searchInputSelector = '#docsearch-input'; // 選擇器定位搜尋輸入框 - await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋文字 + // 搜尋 + await page.waitForSelector('.DocSearch-Button'); // 等待搜尋按鈕出現 + await page.click('.DocSearch-Button'); // 點擊搜尋按鈕 + await page.type('#docsearch-input', 'chipi chipi chapa chapa'); // 輸入搜尋文字 - // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇器定位 Docs 區段第一個結果 - await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區段第一個結果出現 - await page.click(firstDocResultSelector); // 點擊 Docs 區段第一個結果 + // 點擊 Docs 區段的第一個結果 + await page.waitForSelector('#docsearch-item-5 > a'); + await page.click('#docsearch-item-5 > a'); - // 4. 取得頁面標題 - const titleSelector = 'h1'; // 選擇器定位標題元素 - await page.waitForSelector(titleSelector); // 等待標題元素出現 - const titleElement = await page.$(titleSelector); // 取得標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + // 獲取標題 + await page.waitForSelector('h1'); + const title = await page.$eval('h1', element => element.textContent); + console.log(title); + } catch (error) { + console.error('操作過程中發生錯誤:', error); + } finally { + // 關閉瀏覽器 + await browser.close(); + } +} - // 5. 印出標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); -})(); +interactWithPage(); From bfbe77ab8fd3ef5199c337e0bc5498f2ae0ec2f6 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:53:57 +0800 Subject: [PATCH 16/42] Update main_test.js --- lab4/main_test.js | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 401bfd95..9496ca35 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,33 +1,38 @@ const puppeteer = require('puppeteer'); -async function interactWithPage() { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); +async function getPageInfo() { + // 啟動瀏覽器 (背景模式) + const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); try { - // 導航到指定網址 + // 前往指定網址 await page.goto('https://pptr.dev/'); - // 搜尋 - await page.waitForSelector('.DocSearch-Button'); // 等待搜尋按鈕出現 - await page.click('.DocSearch-Button'); // 點擊搜尋按鈕 - await page.type('#docsearch-input', 'chipi chipi chapa chapa'); // 輸入搜尋文字 + // 等待標題元素載入 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); - // 點擊 Docs 區段的第一個結果 - await page.waitForSelector('#docsearch-item-5 > a'); - await page.click('#docsearch-item-5 > a'); + // 取得標題元素 + const titleElement = await page.$(titleSelector); + + // 透過 evaluate 函式取得標題文字 + const titleText = await page.evaluate(el => el.textContent, titleElement); + + // 印出標題 + console.log(titleText); + + // 取得網頁 HTML 內容 + const htmlContent = await page.content(); + + // 進行其他操作，例如解析 HTML 內容... - // 獲取標題 - await page.waitForSelector('h1'); - const title = await page.$eval('h1', element => element.textContent); - console.log(title); } catch (error) { - console.error('操作過程中發生錯誤:', error); + console.error('Error during processing:', error); } finally { // 關閉瀏覽器 await browser.close(); } } -interactWithPage(); +getPageInfo(); From 1b55cc2ff93cf2a37e4e5f4b8d6cb1df8b193b8c Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:55:51 +0800 Subject: [PATCH 17/42] Update main_test.js --- lab4/main_test.js | 61 +++++++++++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 23 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 9496ca35..df73dc84 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,38 +1,53 @@ const puppeteer = require('puppeteer'); -async function getPageInfo() { - // 啟動瀏覽器 (背景模式) - const browser = await puppeteer.launch({ headless: true }); +async function searchAndPrintTitle() { + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); const page = await browser.newPage(); try { - // 前往指定網址 + // 前往指定的網址 await page.goto('https://pptr.dev/'); - // 等待標題元素載入 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - - // 取得標題元素 - const titleElement = await page.$(titleSelector); - - // 透過 evaluate 函式取得標題文字 - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 印出標題 - console.log(titleText); - - // 取得網頁 HTML 內容 - const htmlContent = await page.content(); - - // 進行其他操作，例如解析 HTML 內容... + // 搜尋關鍵字 + await searchForTerm(page, 'chipi chipi chapa chapa'); + // 取得並列印標題 + const title = await getPageTitle(page); + console.log(title); } catch (error) { - console.error('Error during processing:', error); + console.error('執行過程中發生錯誤：', error); } finally { // 關閉瀏覽器 await browser.close(); } } -getPageInfo(); +async function searchForTerm(page, term) { + // 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; + await page.waitForSelector(searchButtonSelector); + await page.click(searchButtonSelector); + + // 輸入搜尋文字 + const searchInputSelector = '#docsearch-input'; + await page.waitForSelector(searchInputSelector); + await page.type(searchInputSelector, term); + + // 點擊 Docs 區段的第一個結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; + await page.waitForSelector(firstDocResultSelector); + await page.click(firstDocResultSelector); +} + +async function getPageTitle(page) { + // 等待標題元素出現 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + + // 取得標題文字 + const titleElement = await page.$(titleSelector); + return await page.evaluate(el => el.textContent, titleElement); +} + +searchAndPrintTitle(); From e930381774900df7c5c68c25e5f8b1f4cf4c474f Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 09:13:29 +0800 Subject: [PATCH 18/42] Update main_test.js --- lab4/main_test.js | 80 ++++++++++++++++++++--------------------------- 1 file changed, 34 insertions(+), 46 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index df73dc84..6037d327 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,53 +1,41 @@ const puppeteer = require('puppeteer'); -async function searchAndPrintTitle() { +(async () => { // 啟動瀏覽器並開啟新分頁 const browser = await puppeteer.launch(); const page = await browser.newPage(); - try { - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 搜尋關鍵字 - await searchForTerm(page, 'chipi chipi chapa chapa'); - - // 取得並列印標題 - const title = await getPageTitle(page); - console.log(title); - } catch (error) { - console.error('執行過程中發生錯誤：', error); - } finally { - // 關閉瀏覽器 - await browser.close(); - } -} - -async function searchForTerm(page, term) { + // 前往指定的網址 + await page.goto('https://pptr.dev/'); + + // 找到搜尋框並輸入 "chipi chipi chapa chapa" + const searchBox = await page.$('#search'); // 使用 CSS 選擇器找到搜尋框 + await searchBox.type('chipi chipi chapa chapa'); + // 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; - await page.waitForSelector(searchButtonSelector); - await page.click(searchButtonSelector); - - // 輸入搜尋文字 - const searchInputSelector = '#docsearch-input'; - await page.waitForSelector(searchInputSelector); - await page.type(searchInputSelector, term); - - // 點擊 Docs 區段的第一個結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; - await page.waitForSelector(firstDocResultSelector); - await page.click(firstDocResultSelector); -} - -async function getPageTitle(page) { - // 等待標題元素出現 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - - // 取得標題文字 - const titleElement = await page.$(titleSelector); - return await page.evaluate(el => el.textContent, titleElement); -} - -searchAndPrintTitle(); + const searchButton = await page.$('.DocSearch-Button'); // 使用 CSS 選擇器找到搜尋按鈕 + await searchButton.click(); + + // 等待搜尋結果出現 + await page.waitForSelector('.DocSearch-Hit-source'); + + // 取得 "Docs" 結果區塊 + const docsSection = await page.$('.DocSearch-Hit-source'); + + // 點擊 "Docs" 區塊中的第一個結果 + const firstResult = await docsSection.$('a'); + await firstResult.click(); + + // 等待頁面載入完成 + await page.waitForSelector('h1'); + + // 取得標題 + const titleElement = await page.$('h1'); // 使用 CSS 選擇器找到標題元素 + const title = await page.evaluate(el => el.textContent, titleElement); + + // 輸出標題 + console.log(title); + + // 關閉瀏覽器 + await browser.close(); +})(); From b7cf73297313d68b34acc3f43a0161443665e42c Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 09:15:17 +0800 Subject: [PATCH 19/42] Update main_test.js --- lab4/main_test.js | 53 +++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 6037d327..2291c7de 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,41 +1,40 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); + // 啟動瀏覽器並開啟新頁面 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); - // 前往指定的網址 - await page.goto('https://pptr.dev/'); + // 前往指定的網址 + await page.goto('https://pptr.dev/'); - // 找到搜尋框並輸入 "chipi chipi chapa chapa" - const searchBox = await page.$('#search'); // 使用 CSS 選擇器找到搜尋框 - await searchBox.type('chipi chipi chapa chapa'); + // 方法一：使用CSS選擇器 + // 點擊搜尋框 + await page.click('#search'); - // 點擊搜尋按鈕 - const searchButton = await page.$('.DocSearch-Button'); // 使用 CSS 選擇器找到搜尋按鈕 - await searchButton.click(); + // 輸入搜尋字串 + await page.type('#search', 'chipi chipi chapa chapa'); - // 等待搜尋結果出現 - await page.waitForSelector('.DocSearch-Hit-source'); + // 等待搜尋結果出現 + await page.waitForSelector('.DocSearch-Hit-source'); - // 取得 "Docs" 結果區塊 - const docsSection = await page.$('.DocSearch-Hit-source'); + // 取得所有文件搜尋結果 + const docsResults = await page.$$('.DocSearch-Hit-source'); - // 點擊 "Docs" 區塊中的第一個結果 - const firstResult = await docsSection.$('a'); - await firstResult.click(); + // 點擊第一個文件搜尋結果 + await docsResults[0].click(); - // 等待頁面載入完成 - await page.waitForSelector('h1'); + // 取得標題元素 + const titleElement = await page.$('.postHeaderTitle'); + const title = await page.evaluate(el => el.textContent, titleElement); - // 取得標題 - const titleElement = await page.$('h1'); // 使用 CSS 選擇器找到標題元素 - const title = await page.evaluate(el => el.textContent, titleElement); + // 顯示標題 + console.log(title); - // 輸出標題 - console.log(title); + // 方法二：使用XPath選擇器 + // //*[@id="__docusaurus"]//input[@type="search"] + // //*[@id="__docusaurus"]//article[1]//h1 - // 關閉瀏覽器 - await browser.close(); + // 關閉瀏覽器 + await browser.close(); })(); From 0997cf760627ed70f90a74aceed83640b497a702 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 09:19:43 +0800 Subject: [PATCH 20/42] Update main_test.js --- lab4/main_test.js | 47 ++++++++++++++++------------------------------- 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 2291c7de..eede5d98 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,40 +1,25 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新頁面 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); - // 前往指定的網址 - await page.goto('https://pptr.dev/'); + // 前往指定網址 + await page.goto('https://pptr.dev/'); - // 方法一：使用CSS選擇器 - // 點擊搜尋框 - await page.click('#search'); + // 輸入搜尋字詞並等待結果 + await page.type('#search', 'chipi chipi chapa chapa'); + await page.waitForSelector('.DocSearch-Hit-source'); - // 輸入搜尋字串 - await page.type('#search', 'chipi chipi chapa chapa'); + // 取得文件區塊的第一個結果並點擊 + const docsResult = await page.$('.DocSearch-Hit-source'); + await docsResult.click(); - // 等待搜尋結果出現 - await page.waitForSelector('.DocSearch-Hit-source'); + // 獲取標題並印出 + const title = await page.title(); + console.log(title); - // 取得所有文件搜尋結果 - const docsResults = await page.$$('.DocSearch-Hit-source'); - - // 點擊第一個文件搜尋結果 - await docsResults[0].click(); - - // 取得標題元素 - const titleElement = await page.$('.postHeaderTitle'); - const title = await page.evaluate(el => el.textContent, titleElement); - - // 顯示標題 - console.log(title); - - // 方法二：使用XPath選擇器 - // //*[@id="__docusaurus"]//input[@type="search"] - // //*[@id="__docusaurus"]//article[1]//h1 - - // 關閉瀏覽器 - await browser.close(); + // 關閉瀏覽器 + await browser.close(); })(); From b29a2bd30092693ff3b35d595de8aa3574623355 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:24:10 +0800 Subject: [PATCH 21/42] Update main_test.js --- lab4/main_test.js | 48 +++++++++++++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index eede5d98..d49c6dba 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,25 +1,41 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); + // 啟動瀏覽器並開啟一個新的空白頁面 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); - // 前往指定網址 - await page.goto('https://pptr.dev/'); + // 導航頁面到指定的 URL + await page.goto('https://pptr.dev/'); - // 輸入搜尋字詞並等待結果 - await page.type('#search', 'chipi chipi chapa chapa'); - await page.waitForSelector('.DocSearch-Hit-source'); + // 找到搜索框並輸入 "chipi chipi chapa chapa" + const searchBox = await page.$('input[type="search"]'); + await searchBox.type('chipi chipi chapa chapa'); - // 取得文件區塊的第一個結果並點擊 - const docsResult = await page.$('.DocSearch-Hit-source'); - await docsResult.click(); + // 點擊搜索按鈕 (Alternative: 按下 Enter 鍵) + // await page.click('button[type="submit"]'); // 原本的點擊方法 + await searchBox.press('Enter'); // 使用 Enter 鍵進行搜索 - // 獲取標題並印出 - const title = await page.title(); - console.log(title); + // 等待搜索結果出現 + await page.waitForSelector('.DocSearch-Hit-source'); - // 關閉瀏覽器 - await browser.close(); + // 找到 "Docs" 結果區塊 + const docsSection = await page.$('.DocSearch-Hit-source:nth-child(1)'); + + // 點擊 "Docs" 區塊中的第一個結果 + const firstResult = await docsSection.$('a'); + await firstResult.click(); + + // 等待頁面加载完成 + await page.waitForSelector('h1'); + + // 找到標題元素並提取標題文字 + const titleElement = await page.$('h1'); + const title = await page.evaluate(el => el.textContent, titleElement); + + // 打印標題 + console.log(title); + + // 關閉瀏覽器 + await browser.close(); })(); From bb8e46e9d807729dadd6d9acf6c2badca88a6fca Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:29:10 +0800 Subject: [PATCH 22/42] Update main_test.js --- lab4/main_test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index d49c6dba..53b18f5b 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -2,7 +2,7 @@ const puppeteer = require('puppeteer'); (async () => { // 啟動瀏覽器並開啟一個新的空白頁面 - const browser = await puppeteer.launch(); + browser = await puppeteer.launch(); const page = await browser.newPage(); // 導航頁面到指定的 URL From 0b364569f1e80bf269ccd61c4559816b55bc15f9 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:30:21 +0800 Subject: [PATCH 23/42] Update main_test.js --- lab4/main_test.js | 39 ++++++++++++++++----------------------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 53b18f5b..ba03b52f 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,39 +1,32 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟一個新的空白頁面 - browser = await puppeteer.launch(); + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 導航頁面到指定的 URL + // 前往指定的網址 await page.goto('https://pptr.dev/'); - // 找到搜索框並輸入 "chipi chipi chapa chapa" - const searchBox = await page.$('input[type="search"]'); - await searchBox.type('chipi chipi chapa chapa'); + // 輸入搜尋文字 + await page.type('#search-box input[type="search"]', 'chipi chipi chapa chapa'); - // 點擊搜索按鈕 (Alternative: 按下 Enter 鍵) - // await page.click('button[type="submit"]'); // 原本的點擊方法 - await searchBox.press('Enter'); // 使用 Enter 鍵進行搜索 + // 使用 XPath 定位搜尋按鈕並點擊 + const searchButton = await page.$x('//*[@id="search-box"]/button'); + await searchButton[0].click(); - // 等待搜索結果出現 + // 等待搜尋結果出現 await page.waitForSelector('.DocSearch-Hit-source'); - // 找到 "Docs" 結果區塊 - const docsSection = await page.$('.DocSearch-Hit-source:nth-child(1)'); + // 使用 XPath 定位第一個 Docs 搜尋結果並點擊 + const firstDocResult = await page.$x('//*[@class="DocSearch-Hit-source"][1]/a'); + await firstDocResult[0].click(); - // 點擊 "Docs" 區塊中的第一個結果 - const firstResult = await docsSection.$('a'); - await firstResult.click(); + // 使用 XPath 定位標題元素並取得標題文字 + const titleElement = await page.$x('//*[@class="postHeaderTitle-root"]/span'); + const title = await page.evaluate(element => element.textContent, titleElement[0]); - // 等待頁面加载完成 - await page.waitForSelector('h1'); - - // 找到標題元素並提取標題文字 - const titleElement = await page.$('h1'); - const title = await page.evaluate(el => el.textContent, titleElement); - - // 打印標題 + // 輸出標題 console.log(title); // 關閉瀏覽器 From 4586424cbdd5da4aa69b15b2ef9987d660ddd6f9 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:32:10 +0800 Subject: [PATCH 24/42] Update main_test.js --- lab4/main_test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index ba03b52f..a2a024ad 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -9,8 +9,7 @@ const puppeteer = require('puppeteer'); await page.goto('https://pptr.dev/'); // 輸入搜尋文字 - await page.type('#search-box input[type="search"]', 'chipi chipi chapa chapa'); - + await page.type('.DocSearch-Input', 'chipi chipi chapa chapa'); // 使用 XPath 定位搜尋按鈕並點擊 const searchButton = await page.$x('//*[@id="search-box"]/button'); await searchButton[0].click(); From fd45324a8e0e9bfc146a46272cb0a071a66ac1de Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:35:27 +0800 Subject: [PATCH 25/42] Update main_test.js --- lab4/main_test.js | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index a2a024ad..7f518655 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -5,29 +5,26 @@ const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 前往指定的網址 + // 前往指定網址 await page.goto('https://pptr.dev/'); - // 輸入搜尋文字 - await page.type('.DocSearch-Input', 'chipi chipi chapa chapa'); - // 使用 XPath 定位搜尋按鈕並點擊 - const searchButton = await page.$x('//*[@id="search-box"]/button'); - await searchButton[0].click(); + // 1. 點擊搜尋按鈕 (簡化: 直接聚焦搜尋框) + const inputSelector = '.DocSearch-Input'; + await page.waitForSelector(inputSelector); + await page.focus(inputSelector); // 直接聚焦，跳過點擊按鈕 - // 等待搜尋結果出現 - await page.waitForSelector('.DocSearch-Hit-source'); + // 2. 輸入搜尋詞彙 + await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 100 }); // 輸入速度加快 - // 使用 XPath 定位第一個 Docs 搜尋結果並點擊 - const firstDocResult = await page.$x('//*[@class="DocSearch-Hit-source"][1]/a'); - await firstDocResult[0].click(); + // 3. 等待搜尋結果並點擊第一個結果 (簡化: 使用 evaluate 處理) + const titleSelector = '#__docusaurus > div.main-wrapper > div > div > div > div > article > div.theme-doc-markdown.markdown > div.admonition.note > p:nth-child(2)'; + const title = await page.evaluate((selector) => { + return document.querySelector(selector).textContent; + }, titleSelector); - // 使用 XPath 定位標題元素並取得標題文字 - const titleElement = await page.$x('//*[@class="postHeaderTitle-root"]/span'); - const title = await page.evaluate(element => element.textContent, titleElement[0]); - - // 輸出標題 + // 4. 輸出標題 console.log(title); - // 關閉瀏覽器 + // 5. 關閉瀏覽器 await browser.close(); })(); From 574729ada9b1952c5f7ba377a7ca30d7355a14e3 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:37:36 +0800 Subject: [PATCH 26/42] Update main_test.js --- lab4/main_test.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 7f518655..a8de6b7b 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -8,21 +8,18 @@ const puppeteer = require('puppeteer'); // 前往指定網址 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 (簡化: 直接聚焦搜尋框) - const inputSelector = '.DocSearch-Input'; - await page.waitForSelector(inputSelector); - await page.focus(inputSelector); // 直接聚焦，跳過點擊按鈕 + // 1. 點擊搜尋按鈕 (簡化: 使用 CSS 選擇器直接點擊) + await page.click('.DocSearch-Button'); - // 2. 輸入搜尋詞彙 - await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 100 }); // 輸入速度加快 + // 2. 輸入搜尋文字 (簡化: 使用 CSS 選擇器直接輸入) + await page.type('.DocSearch-Input', 'chipi chipi chapa chapa', { delay: 50 }); // 稍微延遲輸入 - // 3. 等待搜尋結果並點擊第一個結果 (簡化: 使用 evaluate 處理) - const titleSelector = '#__docusaurus > div.main-wrapper > div > div > div > div > article > div.theme-doc-markdown.markdown > div.admonition.note > p:nth-child(2)'; - const title = await page.evaluate((selector) => { - return document.querySelector(selector).textContent; - }, titleSelector); + // 3. 等待並點擊第一個搜尋結果 (簡化: 使用更精確的選擇器) + await page.waitForSelector('.DocSearch-Hit-source'); // 等待結果出現 + await page.click('.DocSearch-Hit-source'); // 點擊第一個結果的來源 (通常是標題) - // 4. 輸出標題 + // 4. 取得並印出標題 (簡化: 使用 h1 標籤選擇器) + const title = await page.$eval('h1', el => el.textContent); console.log(title); // 5. 關閉瀏覽器 From b52bc0eb7e245e4408f39e0db48bdb75f7843afa Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:42:00 +0800 Subject: [PATCH 27/42] Update main_test.js --- lab4/main_test.js | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index a8de6b7b..fd9d6f30 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -8,20 +8,31 @@ const puppeteer = require('puppeteer'); // 前往指定網址 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 (簡化: 使用 CSS 選擇器直接點擊) - await page.click('.DocSearch-Button'); + try { + // 1. 點擊搜尋按鈕 + const searchSelector = '.DocSearch-Button'; + await page.waitForSelector(searchSelector); // 等待按鈕出現，避免錯誤 + await page.click(searchSelector); - // 2. 輸入搜尋文字 (簡化: 使用 CSS 選擇器直接輸入) - await page.type('.DocSearch-Input', 'chipi chipi chapa chapa', { delay: 50 }); // 稍微延遲輸入 + // 2. 在搜尋框中輸入 'chipi chipi chapa chapa' + const inputSelector = '.DocSearch-Input'; + await page.waitForSelector(inputSelector); // 等待輸入框出現，避免錯誤 + await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 100 }); // 輸入文字，調整延遲以適應網路速度 - // 3. 等待並點擊第一個搜尋結果 (簡化: 使用更精確的選擇器) - await page.waitForSelector('.DocSearch-Hit-source'); // 等待結果出現 - await page.click('.DocSearch-Hit-source'); // 點擊第一個結果的來源 (通常是標題) + // 3. 等待並點擊第一個搜尋結果 + const itemSelector = '#docsearch-item-0'; // 使用更穩定的選擇器 + await page.waitForSelector(itemSelector); + await page.click(itemSelector); - // 4. 取得並印出標題 (簡化: 使用 h1 標籤選擇器) - const title = await page.$eval('h1', el => el.textContent); - console.log(title); - - // 5. 關閉瀏覽器 - await browser.close(); + // 4. 獲取並列印標題 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const title = await page.$eval(titleSelector, el => el.textContent); + console.log(title); + } catch (error) { + console.error('Error during test execution:', error); + } finally { + // 關閉瀏覽器 + await browser.close(); + } })(); From 48ee657a831fd3f4658d41ea881b86f3ca18624d Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:44:49 +0800 Subject: [PATCH 28/42] Update main_test.js --- lab4/main_test.js | 51 ++++++++++++++++++++++++----------------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index fd9d6f30..2bcf615a 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -5,34 +5,35 @@ const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 前往指定網址 + // 導航到指定網址 await page.goto('https://pptr.dev/'); - try { - // 1. 點擊搜尋按鈕 - const searchSelector = '.DocSearch-Button'; - await page.waitForSelector(searchSelector); // 等待按鈕出現，避免錯誤 - await page.click(searchSelector); + // 1. 點擊搜尋按鈕 + // 使用更穩定的選擇器，等待搜尋框出現後再點擊按鈕 + await page.waitForSelector('.DocSearch-Input'); // 確保搜尋框已載入 + const searchSelector = '.DocSearch-Button'; + await page.waitForSelector(searchSelector); + await page.click(searchSelector); - // 2. 在搜尋框中輸入 'chipi chipi chapa chapa' - const inputSelector = '.DocSearch-Input'; - await page.waitForSelector(inputSelector); // 等待輸入框出現，避免錯誤 - await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 100 }); // 輸入文字，調整延遲以適應網路速度 + // 2. 在搜尋框中輸入 'chipi chipi chapa chapa' + const inputSelector = '.DocSearch-Input'; + await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 500 }); // 輸入速度調整 - // 3. 等待並點擊第一個搜尋結果 - const itemSelector = '#docsearch-item-0'; // 使用更穩定的選擇器 - await page.waitForSelector(itemSelector); - await page.click(itemSelector); + // 3. 等待搜尋結果並點擊第一個結果 + // 使用更通用的選擇器，避免特定 ID 導致錯誤 + const itemSelector = '.DocSearch-Hit-source'; // 選擇所有搜尋結果 + await page.waitForSelector(itemSelector); + const firstResult = await page.$$(itemSelector); // 取得所有結果元素 + await firstResult[0].click(); // 點擊第一個結果 - // 4. 獲取並列印標題 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const title = await page.$eval(titleSelector, el => el.textContent); - console.log(title); - } catch (error) { - console.error('Error during test execution:', error); - } finally { - // 關閉瀏覽器 - await browser.close(); - } + // 4. 定位標題並列印 + // 使用更精確的選擇器，確保取得正確的標題 + const titleSelector = '.postHeaderTitle'; + await page.waitForSelector(titleSelector); + const titleElement = await page.$(titleSelector); + const title = await page.evaluate(el => el.textContent, titleElement); + console.log(title); + + // 5. 關閉瀏覽器 + await browser.close(); })(); From b2f69bb67dd328e9efde5a3a6c04aa0c627ca311 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:48:00 +0800 Subject: [PATCH 29/42] Update main_test.js --- lab4/main_test.js | 32 ++++++++++---------------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 2bcf615a..5fcaa2f5 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -5,33 +5,21 @@ const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 導航到指定網址 + // 前往指定網址 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 - // 使用更穩定的選擇器，等待搜尋框出現後再點擊按鈕 - await page.waitForSelector('.DocSearch-Input'); // 確保搜尋框已載入 - const searchSelector = '.DocSearch-Button'; - await page.waitForSelector(searchSelector); - await page.click(searchSelector); + // 1. 點擊搜尋按鈕 (使用更簡潔的寫法) + await page.click('.DocSearch-Button'); - // 2. 在搜尋框中輸入 'chipi chipi chapa chapa' - const inputSelector = '.DocSearch-Input'; - await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 500 }); // 輸入速度調整 + // 2. 輸入搜尋詞彙 (使用更簡潔的寫法，並加入延遲避免過快輸入) + await page.type('.DocSearch-Input', 'chipi chipi chapa chapa', { delay: 100 }); - // 3. 等待搜尋結果並點擊第一個結果 - // 使用更通用的選擇器，避免特定 ID 導致錯誤 - const itemSelector = '.DocSearch-Hit-source'; // 選擇所有搜尋結果 - await page.waitForSelector(itemSelector); - const firstResult = await page.$$(itemSelector); // 取得所有結果元素 - await firstResult[0].click(); // 點擊第一個結果 + // 3. 等待搜尋結果並點擊第一個結果 (使用更簡潔的寫法) + await page.waitForSelector('#docsearch-item-5 a'); + await page.click('#docsearch-item-5 a'); - // 4. 定位標題並列印 - // 使用更精確的選擇器，確保取得正確的標題 - const titleSelector = '.postHeaderTitle'; - await page.waitForSelector(titleSelector); - const titleElement = await page.$(titleSelector); - const title = await page.evaluate(el => el.textContent, titleElement); + // 4. 取得標題並印出 (使用更簡潔的寫法) + const title = await page.$eval('h1', el => el.textContent); console.log(title); // 5. 關閉瀏覽器 From ed901ed2919863fcb3b53f3e8ffccbf138330841 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:50:53 +0800 Subject: [PATCH 30/42] Update main_test.js --- lab4/main_test.js | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 5fcaa2f5..b0bd8397 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -8,18 +8,32 @@ const puppeteer = require('puppeteer'); // 前往指定網址 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 (使用更簡潔的寫法) - await page.click('.DocSearch-Button'); + // 1. 點擊搜尋按鈕 + // 使用 XPath 選擇器定位搜尋按鈕，更具彈性 + const searchButtonXPath = '//*[@class="DocSearch-Button"]'; + await page.waitForXPath(searchButtonXPath); + const searchButton = await page.$x(searchButtonXPath); + await searchButton[0].click(); - // 2. 輸入搜尋詞彙 (使用更簡潔的寫法，並加入延遲避免過快輸入) - await page.type('.DocSearch-Input', 'chipi chipi chapa chapa', { delay: 100 }); + // 2. 輸入搜尋詞彙 'chipi chipi chapa chapa' + // 使用 CSS 選擇器定位搜尋框 + const inputSelector = '.DocSearch-Input'; + await page.waitForSelector(inputSelector); + await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 100 }); - // 3. 等待搜尋結果並點擊第一個結果 (使用更簡潔的寫法) - await page.waitForSelector('#docsearch-item-5 a'); - await page.click('#docsearch-item-5 a'); + // 3. 等待搜尋結果並點擊第一個結果 + // 使用 CSS 選擇器定位搜尋結果列表中的第一個項目 + const firstResultSelector = '.DocSearch-Hit-source'; + await page.waitForSelector(firstResultSelector); + const firstResult = await page.$(firstResultSelector); + await firstResult.click(); - // 4. 取得標題並印出 (使用更簡潔的寫法) - const title = await page.$eval('h1', el => el.textContent); + // 4. 定位標題並列印 + // 使用 CSS 選擇器定位 h1 標題 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const titleElement = await page.$(titleSelector); + const title = await page.evaluate(el => el.textContent, titleElement); console.log(title); // 5. 關閉瀏覽器 From bd475656dc0665acf69f346a9b804dd8020b8d98 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 13:57:59 +0800 Subject: [PATCH 31/42] Update main_test.js --- lab4/main_test.js | 64 ++++++++++++++++++++++++----------------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index b0bd8397..6c388209 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,41 +1,43 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 + // 啟動瀏覽器並開啟一個新的空白頁面 const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 前往指定網址 + // 導航到指定的網站 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 - // 使用 XPath 選擇器定位搜尋按鈕，更具彈性 - const searchButtonXPath = '//*[@class="DocSearch-Button"]'; - await page.waitForXPath(searchButtonXPath); - const searchButton = await page.$x(searchButtonXPath); - await searchButton[0].click(); - - // 2. 輸入搜尋詞彙 'chipi chipi chapa chapa' - // 使用 CSS 選擇器定位搜尋框 - const inputSelector = '.DocSearch-Input'; - await page.waitForSelector(inputSelector); - await page.type(inputSelector, 'chipi chipi chapa chapa', { delay: 100 }); - - // 3. 等待搜尋結果並點擊第一個結果 - // 使用 CSS 選擇器定位搜尋結果列表中的第一個項目 - const firstResultSelector = '.DocSearch-Hit-source'; - await page.waitForSelector(firstResultSelector); - const firstResult = await page.$(firstResultSelector); - await firstResult.click(); - - // 4. 定位標題並列印 - // 使用 CSS 選擇器定位 h1 標題 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const titleElement = await page.$(titleSelector); - const title = await page.evaluate(el => el.textContent, titleElement); - console.log(title); - - // 5. 關閉瀏覽器 + // 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; // 選擇搜尋按鈕 + await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 + await page.click(searchButtonSelector); // 點擊搜尋按鈕 + + // 輸入搜尋查詢字串 + const searchInputSelector = '.DocSearch-Input'; // 選擇搜尋輸入框 + await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入查詢字串 + + // 等待搜尋結果出現 + await page.waitForSelector('.DocSearch-Hit-source'); + + // 取得文件區塊中的第一個結果 + const firstDocResultSelector = '.DocSearch-Hit-source'; // 選擇第一個文件結果 + const firstResultElement = await page.$(firstDocResultSelector); + + // 點擊第一個文件結果 + await firstResultElement.click(); + + // 等待標題元素出現 + await page.waitForSelector('h1'); + + // 取得頁面的標題 + const titleElement = await page.$('h1'); // 選擇標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + + // 列印標題 + console.log(titleText); + + // 關閉瀏覽器 await browser.close(); })(); From daf7e27823023c0d4ebd933fccf71312110233d5 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:00:39 +0800 Subject: [PATCH 32/42] Update main_test.js --- lab4/main_test.js | 57 +++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 6c388209..864e1170 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,43 +1,38 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟一個新的空白頁面 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); + // 啟動瀏覽器並開啟一個新的空白頁面 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); - // 導航到指定的網站 - await page.goto('https://pptr.dev/'); + // 導航到指定的網站 + await page.goto('https://pptr.dev/'); - // 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; // 選擇搜尋按鈕 - await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 - await page.click(searchButtonSelector); // 點擊搜尋按鈕 + // 搜尋並點擊結果 - // 輸入搜尋查詢字串 - const searchInputSelector = '.DocSearch-Input'; // 選擇搜尋輸入框 - await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入查詢字串 + // 1. 使用 XPath 定位搜尋按鈕並點擊 + const searchButtonXPath = '//*[@class="DocSearch-Button"]'; + const searchButton = await page.$x(searchButtonXPath); + await searchButton[0].click(); - // 等待搜尋結果出現 - await page.waitForSelector('.DocSearch-Hit-source'); + // 2. 使用 XPath 定位搜尋輸入框並輸入文字 + const searchInputXPath = '//*[@class="DocSearch-Input"]'; + const searchInput = await page.$x(searchInputXPath); + await searchInput[0].type('chipi chipi chapa chapa'); - // 取得文件區塊中的第一個結果 - const firstDocResultSelector = '.DocSearch-Hit-source'; // 選擇第一個文件結果 - const firstResultElement = await page.$(firstDocResultSelector); + // 3. 等待搜尋結果出現，並使用 CSS 選擇器點擊第一個結果 + await page.waitForSelector('#docsearch-item-0 > a'); + const firstResult = await page.$('#docsearch-item-0 > a'); + await firstResult.click(); - // 點擊第一個文件結果 - await firstResultElement.click(); + // 4. 使用 CSS 選擇器定位標題並取得文字 + await page.waitForSelector('h1'); + const titleElement = await page.$('h1'); + const titleText = await page.evaluate(el => el.textContent, titleElement); - // 等待標題元素出現 - await page.waitForSelector('h1'); + // 5. 列印標題 + console.log(titleText); - // 取得頁面的標題 - const titleElement = await page.$('h1'); // 選擇標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 - - // 列印標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + // 關閉瀏覽器 + await browser.close(); })(); From ca5beae865d8ff4f1cc57600ed5cd7d44743e489 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:04:12 +0800 Subject: [PATCH 33/42] Update main_test.js --- lab4/main_test.js | 68 +++++++++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 864e1170..d3454739 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,38 +1,38 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟一個新的空白頁面 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - // 導航到指定的網站 - await page.goto('https://pptr.dev/'); - - // 搜尋並點擊結果 - - // 1. 使用 XPath 定位搜尋按鈕並點擊 - const searchButtonXPath = '//*[@class="DocSearch-Button"]'; - const searchButton = await page.$x(searchButtonXPath); - await searchButton[0].click(); - - // 2. 使用 XPath 定位搜尋輸入框並輸入文字 - const searchInputXPath = '//*[@class="DocSearch-Input"]'; - const searchInput = await page.$x(searchInputXPath); - await searchInput[0].type('chipi chipi chapa chapa'); - - // 3. 等待搜尋結果出現，並使用 CSS 選擇器點擊第一個結果 - await page.waitForSelector('#docsearch-item-0 > a'); - const firstResult = await page.$('#docsearch-item-0 > a'); - await firstResult.click(); - - // 4. 使用 CSS 選擇器定位標題並取得文字 - await page.waitForSelector('h1'); - const titleElement = await page.$('h1'); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 5. 列印標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + // 啟動瀏覽器並開啟一個新的空白頁面 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // 導航到指定的網站 + await page.goto('https://pptr.dev/'); + + // 點擊搜尋按鈕 (Alternative solution using XPath) + const searchButtonXPath = '//*[@class="DocSearch-Button"]'; + const searchButtonElement = await page.$x(searchButtonXPath); + await searchButtonElement[0].click(); + + // 輸入搜尋查詢字串 + const searchInputSelector = '#docsearch-input'; + await page.waitForSelector(searchInputSelector); + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); + + // 等待搜尋結果並點擊文件區塊中的第一個結果 (Alternative solution using page.evaluate) + await page.waitForSelector('#docsearch-item-5 > a'); + await page.evaluate(() => { + document.querySelector('#docsearch-item-5 > a').click(); + }); + + // 取得頁面的標題 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const titleElement = await page.$(titleSelector); + const titleText = await page.evaluate(el => el.textContent, titleElement); + + // 列印標題 + console.log(titleText); + + // 關閉瀏覽器 + await browser.close(); })(); From e3d672e025e3464a764f54d5212fe345830cfd2b Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:07:12 +0800 Subject: [PATCH 34/42] Update main_test.js --- lab4/main_test.js | 44 ++++++++++++++++++++------------------------ 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index d3454739..f2c2c329 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -8,31 +8,27 @@ const puppeteer = require('puppeteer'); // 導航到指定的網站 await page.goto('https://pptr.dev/'); - // 點擊搜尋按鈕 (Alternative solution using XPath) - const searchButtonXPath = '//*[@class="DocSearch-Button"]'; - const searchButtonElement = await page.$x(searchButtonXPath); - await searchButtonElement[0].click(); - - // 輸入搜尋查詢字串 - const searchInputSelector = '#docsearch-input'; - await page.waitForSelector(searchInputSelector); - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); - - // 等待搜尋結果並點擊文件區塊中的第一個結果 (Alternative solution using page.evaluate) - await page.waitForSelector('#docsearch-item-5 > a'); - await page.evaluate(() => { - document.querySelector('#docsearch-item-5 > a').click(); - }); - - // 取得頁面的標題 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const titleElement = await page.$(titleSelector); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 列印標題 + // 1. 點擊搜尋按鈕 (使用 CSS 選擇器) + await page.waitForSelector('.DocSearch-Button'); // 等待搜尋按鈕出現 + await page.click('.DocSearch-Button'); // 點擊搜尋按鈕 + + // 2. 輸入搜尋查詢字串 (使用 CSS 選擇器) + await page.waitForSelector('.DocSearch-Input'); // 等待搜尋輸入框出現 + await page.type('.DocSearch-Input', 'chipi chipi chapa chapa'); // 輸入查詢字串 + + // 3. 等待搜尋結果並點擊文件區塊中的第一個結果 (使用 CSS 選擇器) + await page.waitForSelector('.DocSearch-Hit-source'); // 等待文件結果區塊出現 + const firstResult = await page.$('.DocSearch-Hit-source'); // 選擇第一個文件結果 + await firstResult.click(); // 點擊第一個文件結果 + + // 4. 取得頁面的標題 (使用 CSS 選擇器) + await page.waitForSelector('h1'); // 等待標題元素出現 + const titleElement = await page.$('h1'); // 選擇標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + + // 5. 列印標題 console.log(titleText); - // 關閉瀏覽器 + // 6. 關閉瀏覽器 await browser.close(); })(); From 08b1c32ae12ccfefeab3e4c5f3179aa7c46dc213 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:12:34 +0800 Subject: [PATCH 35/42] Update main_test.js From fcccd9bf6110c451b235de52f11b9ef16ba6aacd Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:47:17 +0800 Subject: [PATCH 36/42] Update main_test.js --- lab4/main_test.js | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index f2c2c329..e52546a5 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,34 +1,37 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟一個新的空白頁面 + // 啟動瀏覽器並開啟新分頁 const browser = await puppeteer.launch(); const page = await browser.newPage(); - // 導航到指定的網站 + // 前往指定的網址 await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 (使用 CSS 選擇器) - await page.waitForSelector('.DocSearch-Button'); // 等待搜尋按鈕出現 - await page.click('.DocSearch-Button'); // 點擊搜尋按鈕 + // 等待搜尋按鈕出現並點擊 + const searchButtonSelector = '.DocSearch-Button'; + await page.waitForSelector(searchButtonSelector); + await page.click(searchButtonSelector); - // 2. 輸入搜尋查詢字串 (使用 CSS 選擇器) - await page.waitForSelector('.DocSearch-Input'); // 等待搜尋輸入框出現 - await page.type('.DocSearch-Input', 'chipi chipi chapa chapa'); // 輸入查詢字串 + // 等待搜尋輸入框出現並輸入查詢字串 + const searchInputSelector = '#docsearch-input'; + await page.waitForSelector(searchInputSelector); + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); - // 3. 等待搜尋結果並點擊文件區塊中的第一個結果 (使用 CSS 選擇器) - await page.waitForSelector('.DocSearch-Hit-source'); // 等待文件結果區塊出現 - const firstResult = await page.$('.DocSearch-Hit-source'); // 選擇第一個文件結果 - await firstResult.click(); // 點擊第一個文件結果 + // 等待第一個文件結果出現並點擊 + const firstDocResultSelector = '#docsearch-item-5 > a'; + await page.waitForSelector(firstDocResultSelector); + await page.click(firstDocResultSelector); - // 4. 取得頁面的標題 (使用 CSS 選擇器) - await page.waitForSelector('h1'); // 等待標題元素出現 - const titleElement = await page.$('h1'); // 選擇標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + // 等待標題元素出現並取得標題文字 + const titleSelector = 'h1'; + await page.waitForSelector(titleSelector); + const titleElement = await page.$(titleSelector); + const titleText = await page.evaluate(el => el.textContent, titleElement); - // 5. 列印標題 + // 印出標題 console.log(titleText); - // 6. 關閉瀏覽器 + // 關閉瀏覽器 await browser.close(); })(); From 7455f495e96cd80db5a6542d5368fcf9c54cb6bc Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:48:38 +0800 Subject: [PATCH 37/42] Update main_test.js --- lab4/main_test.js | 66 +++++++++++++++++++++++------------------------ 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index e52546a5..f2afb553 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,37 +1,37 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); - const page = await browser.newPage(); - - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 等待搜尋按鈕出現並點擊 - const searchButtonSelector = '.DocSearch-Button'; - await page.waitForSelector(searchButtonSelector); - await page.click(searchButtonSelector); - - // 等待搜尋輸入框出現並輸入查詢字串 - const searchInputSelector = '#docsearch-input'; - await page.waitForSelector(searchInputSelector); - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); - - // 等待第一個文件結果出現並點擊 - const firstDocResultSelector = '#docsearch-item-5 > a'; - await page.waitForSelector(firstDocResultSelector); - await page.click(firstDocResultSelector); - - // 等待標題元素出現並取得標題文字 - const titleSelector = 'h1'; - await page.waitForSelector(titleSelector); - const titleElement = await page.$(titleSelector); - const titleText = await page.evaluate(el => el.textContent, titleElement); - - // 印出標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + // 啟動瀏覽器並開啟新分頁 + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // 前往指定的網址 + await page.goto('https://pptr.dev/'); + + // 1. 點擊搜尋按鈕 + const searchButtonSelector = '.DocSearch-Button'; // 選擇器定位搜尋按鈕 + await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 + await page.click(searchButtonSelector); // 點擊搜尋按鈕 + + // 2. 輸入搜尋文字 + const searchInputSelector = '#docsearch-input'; // 選擇器定位搜尋輸入框 + await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋文字 + + // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 + const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇器定位 Docs 區段第一個結果 + await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區段第一個結果出現 + await page.click(firstDocResultSelector); // 點擊 Docs 區段第一個結果 + + // 4. 取得頁面標題 + const titleSelector = 'h1'; // 選擇器定位標題元素 + await page.waitForSelector(titleSelector); // 等待標題元素出現 + const titleElement = await page.$(titleSelector); // 取得標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + + // 5. 印出標題 + console.log(titleText); + + // 關閉瀏覽器 + await browser.close(); })(); From 7182498a2ee0074d1b7b2f551101e6968e44f385 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:50:26 +0800 Subject: [PATCH 38/42] Update main_test.js --- lab4/main_test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index f2afb553..b0e0f9e2 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -2,7 +2,8 @@ const puppeteer = require('puppeteer'); (async () => { // 啟動瀏覽器並開啟新分頁 - const browser = await puppeteer.launch(); + let browser + browser = await puppeteer.launch(); const page = await browser.newPage(); // 前往指定的網址 From 9b6098bfbaf010cf464f9ae2edc16f7f2e457e99 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 14:52:28 +0800 Subject: [PATCH 39/42] Update main_test.js --- lab4/main_test.js | 63 ++++++++++++++++++++++------------------------- 1 file changed, 30 insertions(+), 33 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index b0e0f9e2..5f418662 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,38 +1,35 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟新分頁 + // 啟動瀏覽器並開啟一個新的空白頁面 let browser - browser = await puppeteer.launch(); - const page = await browser.newPage(); - - // 前往指定的網址 - await page.goto('https://pptr.dev/'); - - // 1. 點擊搜尋按鈕 - const searchButtonSelector = '.DocSearch-Button'; // 選擇器定位搜尋按鈕 - await page.waitForSelector(searchButtonSelector); // 等待搜尋按鈕出現 - await page.click(searchButtonSelector); // 點擊搜尋按鈕 - - // 2. 輸入搜尋文字 - const searchInputSelector = '#docsearch-input'; // 選擇器定位搜尋輸入框 - await page.waitForSelector(searchInputSelector); // 等待搜尋輸入框出現 - await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // 輸入搜尋文字 - - // 3. 等待搜尋結果並點擊 Docs 區段的第一個結果 - const firstDocResultSelector = '#docsearch-item-5 > a'; // 選擇器定位 Docs 區段第一個結果 - await page.waitForSelector(firstDocResultSelector); // 等待 Docs 區段第一個結果出現 - await page.click(firstDocResultSelector); // 點擊 Docs 區段第一個結果 - - // 4. 取得頁面標題 - const titleSelector = 'h1'; // 選擇器定位標題元素 - await page.waitForSelector(titleSelector); // 等待標題元素出現 - const titleElement = await page.$(titleSelector); // 取得標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 - - // 5. 印出標題 - console.log(titleText); - - // 關閉瀏覽器 - await browser.close(); + browser = await puppeteer.launch(); + const page = await browser.newPage(); + + // 導航到指定的網站 + await page.goto('https://pptr.dev/'); + + // 1. 點擊搜尋按鈕 (使用 CSS 選擇器) + await page.waitForSelector('.DocSearch-Button'); // 等待搜尋按鈕出現 + await page.click('.DocSearch-Button'); // 點擊搜尋按鈕 + + // 2. 輸入搜尋查詢字串 (使用 CSS 選擇器) + await page.waitForSelector('.DocSearch-Input'); // 等待搜尋輸入框出現 + await page.type('.DocSearch-Input', 'chipi chipi chapa chapa'); // 輸入查詢字串 + + // 3. 等待搜尋結果並點擊文件區塊中的第一個結果 (使用 CSS 選擇器) + await page.waitForSelector('.DocSearch-Hit-source'); // 等待文件結果區塊出現 + const firstResult = await page.$('.DocSearch-Hit-source'); // 選擇第一個文件結果 + await firstResult.click(); // 點擊第一個文件結果 + + // 4. 取得頁面的標題 (使用 CSS 選擇器) + await page.waitForSelector('h1'); // 等待標題元素出現 + const titleElement = await page.$('h1'); // 選擇標題元素 + const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 + + // 5. 列印標題 + console.log(titleText); + + // 6. 關閉瀏覽器 + await browser.close(); })(); From 93f45a8719d5fe442ed1d695795a03edf8c02986 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 15:11:26 +0800 Subject: [PATCH 40/42] Update main_test.js --- lab4/main_test.js | 52 +++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 5f418662..69e5cdbf 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -1,35 +1,35 @@ const puppeteer = require('puppeteer'); (async () => { - // 啟動瀏覽器並開啟一個新的空白頁面 - let browser - browser = await puppeteer.launch(); + // Launch browser and open a new page + const browser = await puppeteer.launch(); const page = await browser.newPage(); - - // 導航到指定的網站 + + // Navigate to the target URL await page.goto('https://pptr.dev/'); - // 1. 點擊搜尋按鈕 (使用 CSS 選擇器) - await page.waitForSelector('.DocSearch-Button'); // 等待搜尋按鈕出現 - await page.click('.DocSearch-Button'); // 點擊搜尋按鈕 - - // 2. 輸入搜尋查詢字串 (使用 CSS 選擇器) - await page.waitForSelector('.DocSearch-Input'); // 等待搜尋輸入框出現 - await page.type('.DocSearch-Input', 'chipi chipi chapa chapa'); // 輸入查詢字串 - - // 3. 等待搜尋結果並點擊文件區塊中的第一個結果 (使用 CSS 選擇器) - await page.waitForSelector('.DocSearch-Hit-source'); // 等待文件結果區塊出現 - const firstResult = await page.$('.DocSearch-Hit-source'); // 選擇第一個文件結果 - await firstResult.click(); // 點擊第一個文件結果 - - // 4. 取得頁面的標題 (使用 CSS 選擇器) - await page.waitForSelector('h1'); // 等待標題元素出現 - const titleElement = await page.$('h1'); // 選擇標題元素 - const titleText = await page.evaluate(el => el.textContent, titleElement); // 取得標題文字 - - // 5. 列印標題 + // Locate and click the search button (obfuscated selector) + const searchBtnSelector = '.DocSearch-Button'; + await page.waitForSelector(searchBtnSelector, { timeout: 2000 }); // Reduced timeout for speed + await page.click(searchBtnSelector); + + // Type the search phrase into the search box (obfuscated selector) + const searchInputSelector = '.DocSearch-Input'; + await page.waitForSelector(searchInputSelector, { timeout: 2000 }); + await page.type(searchInputSelector, 'chipi chipi chapa chapa'); + + // Wait for and click the first search result in the Docs section (obfuscated selector) + const firstResultSelector = '#docsearch-item-5 > a'; + await page.waitForSelector(firstResultSelector, { timeout: 3000 }); + await page.click(firstResultSelector); + + // Extract and print the title + const titleSelector = 'h1'; // Maintained clear selector for readability + await page.waitForSelector(titleSelector); + const titleElement = await page.$(titleSelector); + const titleText = await page.evaluate(el => el.textContent, titleElement); console.log(titleText); - // 6. 關閉瀏覽器 + // Close the browser await browser.close(); -})(); +})(); From 60cf78b120f1d761c13f3ad704cfaa58e5ec03da Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 15:12:35 +0800 Subject: [PATCH 41/42] Update main_test.js --- lab4/main_test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 69e5cdbf..14589651 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -2,7 +2,8 @@ const puppeteer = require('puppeteer'); (async () => { // Launch browser and open a new page - const browser = await puppeteer.launch(); + let browser + browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate to the target URL From 7cd1562d959a6bf0aff709cfd71561e69505ef27 Mon Sep 17 00:00:00 2001 From: n19971019 <137515554+n19971019@users.noreply.github.com> Date: Thu, 18 Apr 2024 15:17:37 +0800 Subject: [PATCH 42/42] Update main_test.js --- lab4/main_test.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/lab4/main_test.js b/lab4/main_test.js index 14589651..134f94ca 100644 --- a/lab4/main_test.js +++ b/lab4/main_test.js @@ -20,15 +20,13 @@ const puppeteer = require('puppeteer'); await page.type(searchInputSelector, 'chipi chipi chapa chapa'); // Wait for and click the first search result in the Docs section (obfuscated selector) - const firstResultSelector = '#docsearch-item-5 > a'; - await page.waitForSelector(firstResultSelector, { timeout: 3000 }); - await page.click(firstResultSelector); - + await page.waitForSelector('.DocSearch-Hit-source'); + const firstResult = await page.$('.DocSearch-Hit-source', { timeout: 3000 }); + await firstResult.click() // Extract and print the title - const titleSelector = 'h1'; // Maintained clear selector for readability - await page.waitForSelector(titleSelector); - const titleElement = await page.$(titleSelector); - const titleText = await page.evaluate(el => el.textContent, titleElement); + await page.waitForSelector('h1') + const titleElement = await page.$('h1'); + const titleText = await page.evaluate(el => el.textContent, titleElement); console.log(titleText); // Close the browser