পপিটারে পাঠ্য সহ উপাদানটিতে কীভাবে ক্লিক করবেন

Question 1

পাঠ্যের সাহায্যে উপাদানটিতে ক্লিক করার কোনও পদ্ধতি আছে (এপিআই তে খুঁজে পায়নি)?

উদাহরণস্বরূপ আমার এইচটিএমএল রয়েছে:

<div class="elements">
    <button>Button text</button>
    <a href=#>Href text</a>
    <div>Div text</div>
</div>

এবং আমি এমন উপাদানটিতে ক্লিক করতে চাই যেখানে পাঠ্যটি মোড়ানো আছে (উপাদানগুলির ভিতরে বোতামে ক্লিক করুন), যেমন:

Page.click('Button text', '.elements')

Question 2

সংক্ষিপ্ত উত্তর

এই এক্সপথ এক্সপ্রেশনটি একটি বোতামটি জিজ্ঞাসা করবে যেখানে "বোতামের পাঠ্য" পাঠ্য রয়েছে:

const [button] = await page.$x("//button[contains(., 'Button text')]");
if (button) {
    await button.click();
}

<div class="elements">পার্শ্ববর্তী বোতামগুলির সম্মান করতে, নিম্নলিখিত কোডটি ব্যবহার করুন:

const [button] = await page.$x("//div[@class='elements']/button[contains(., 'Button text')]");

ব্যাখ্যা

পাঠ্য নোড ( text()) ব্যবহার কেন কিছু ক্ষেত্রে ভুল তা ব্যাখ্যা করতে, আসুন একটি উদাহরণ দেখুন:

<div>
    <button>Start End</button>
    <button>Start <em>Middle</em> End</button>
</div>

প্রথমে ব্যবহারের সময় ফলাফলগুলি যাচাই করা যাক contains(text(), 'Text'):

//button[contains(text(), 'Start')]দুটি নোডই প্রত্যাবর্তন করবে (আশানুরূপ হিসাবে)
//button[contains(text(), 'End')]দুটি গ্রন্থ ( এবং ) সহ একটি তালিকা ফেরত হিসাবে কেবল একটি নোড (প্রথম) text()ফেরত দেবে , তবে কেবল প্রথমটি পরীক্ষা করবেStart Endcontains
//button[contains(text(), 'Middle')]শিশু নোডের পাঠ্য অন্তর্ভুক্ত না করায় কোনও ফলাফল ফেরত দেবে নাtext()

এখানে এক্সপথ এক্সপ্রেশন contains(., 'Text')রয়েছে যা এটির সন্তানের নোডগুলি সহ উপাদানটিতে কাজ করে:

//button[contains(., 'Start')]দুটি বোতামই ফিরে আসবে
//button[contains(., 'End')]আবার দুটি বোতামই ফিরে আসবে
//button[contains(., 'Middle')]একটি ফিরে আসবে (শেষ বোতাম)

সুতরাং বেশিরভাগ ক্ষেত্রে, এটি এক্সপথ এক্সপ্রেশন .পরিবর্তে ব্যবহার করার জন্য আরও বেশি text()অর্থবোধ করে।

Question 3

আপনি পৃষ্ঠা সহ একটি এক্সপ্যাথ নির্বাচনকারী ব্যবহার করতে পারেন $ x (এক্সপ্রেশন) :

const linkHandlers = await page.$x("//a[contains(text(), 'Some text')]");

if (linkHandlers.length > 0) {
  await linkHandlers[0].click();
} else {
  throw new Error("Link not found");
}

পরীক্ষা করে দেখুন clickByTextএই সারকথা সম্পূর্ণ উদাহরণস্বরূপ। এটি এক্সেপথ এক্সপ্রেশনগুলির সাথে কিছুটা জটিল escap

Question 4

আপনি যে পাঠ্য সামগ্রী দ্বারা ফিল্টার করা হয়েছে সেগুলি page.evaluate()থেকে প্রাপ্ত উপাদানগুলিতে ক্লিক করতেও ব্যবহার করতে document.querySelectorAll()পারেন:

await page.evaluate(() => {
  [...document.querySelectorAll('.elements button')].find(element => element.textContent === 'Button text').click();
});

বিকল্পভাবে, আপনি page.evaluate()কোনও উপাদানটির পাঠ্য সামগ্রীর উপর ভিত্তি করে document.evaluate()এবং এটি সম্পর্কিত কোনও XPath এক্সপ্রেশন ব্যবহার করতে পারেন :

await page.evaluate(() => {
  const xpath = '//*[@class="elements"]//button[contains(text(), "Button text")]';
  const result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);

  result.iterateNext().click();
});

Question 5

": রয়েছে (পাঠ্য)" এর মতো উন্নত সিএসএস নির্বাচক ব্যবহার করতে সক্ষম হতে দ্রুত সমাধান তৈরি করেছেন

সুতরাং এই লাইব্রেরি ব্যবহার করে আপনি ঠিক পারেন

const select = require ('puppeteer-select');

const element = await select(page).getElement('button:contains(Button text)');
await element.click()

Question 6

এখানে আমার সমাধান:

let selector = 'a';
    await page.$$eval(selector, anchors => {
        anchors.map(anchor => {
            if(anchor.textContent == 'target text') {
                anchor.click();
                return
            }
        })
    });

Question 7

সমাধানটি হ'ল

(await page.$$eval(selector, a => a
            .filter(a => a.textContent === 'target text')
))[0].click()

Question 8

পাঠ্য নির্বাচক বা একটি সমন্বয়কারী বিকল্পের জন্য কোনও সমর্থিত সিএসএস নির্বাচক সিনট্যাক্স নেই, এর জন্য আমার কাজটি হবে:

await page.$$eval('selector', selectorMatched => {
    for(i in selectorMatched)
      if(selectorMatched[i].textContent === 'text string'){
          selectorMatched[i].click();
          break;//Remove this line (break statement) if you want to click on all matched elements otherwise the first element only is clicked  
        }
    });

Question 9

এখানে অনেকগুলি উত্তর প্রস্তাব করা হচ্ছে containsতবে আমি এই অপ্রচলিত কোনও ওপির ব্যবহারের ক্ষেত্রে কোনও প্রেরণা দেখছি না, যা সমস্ত উপস্থিতির দ্বারা একটি টার্গেটের স্ট্রিং "Button text"এবং একটি উপাদানগুলির সাথে একটি সঠিক মিল <button>Button text</button>।

আমি আরও সুনির্দিষ্টভাবে ব্যবহার করতে পছন্দ করব [text()="Button text"], যা বোতামটি যখন একটি মিথ্যা পজিটিভ এড়ায়, বলুন <button>Button text and more stuff</button>:

const [el] = await page.$x('//*[@class="elements"]//a[text()="Button text"]');
el && (await el.click());

এটি এই উত্তরের বিপরীত দৃশ্যের পূর্বাভাস দেয় যা যতটা সম্ভব অনুমতিপ্রাপ্ত হওয়ার চেষ্টা করে।

অনেক উত্তর .elementsপিতাম শ্রেণীর প্রয়োজনীয়তাও মিস করে ।

Question 10

আমি বাধ্য ছিলাম:

await this.page.$eval(this.menuSelector, elem => elem.click());