Develop Reference

How can I verify if a checkbox is selected using TestCafe?

import { Selector } from 'testcafe';
fixture("TestCafe Example")
.page("http://devexpress.github.io/testcafe/example");
test("Fill out and submit form", async t => {
await t.typeText("#developer-name", "Harun Jonuzi");
//I Want to verify if these Checkboxes are Selected
await t
.click("#remote-testing")
.click("#reusing-js-code")
.click("#background-parallel-testing");
await t.click("#macos");
const preferredInterface = Selector("#preferred-interface");
await t
.click(preferredInterface)
.click(preferredInterface.find("option").withText("JavaScript API"));
const submitButton = Selector("#submit-button");
await t
.expect(submitButton.hasAttribute("disabled")).notOk();
await t.click(submitButton);
const headerInfo = Selector("#article-header");
await t.expect(headerInfo.innerText).eql("Thank you, Harun Jonuzi!");
})
My question is commented out on the 6th line of the code as you can see it.
I am trying o figure out how to add an assertion to verify that the checkboxes are actually checked, but I am new to TestCafe, just wanted to see If I can get some help from here.

You can use the checked property of the DOMNodeState Object, for example:
await t
.click("#remote-testing")
.expect(Selector('#remote-testing').checked).eql(true);

Unable to get isDisabled() to work in Playwright

I need to check that a button is disabled (checking for a last page of a table). There are two with the same id (top and bottom of the table).
const nextPageButtons = await this.page.$$('button#_btnNext'); // nextPageButtons.length is 2, chekced via console.log
const nextPageButtonState = await nextPageButtons[0].isDisabled();
But when I do the above I get: elementHandle.isDisabled: Unable to adopt element handle from a different document.
Why doesn't this work?

So, this works:
const nextPageButtons = await this.page.$$('button#_btnNext');
const nextPageButton1 = await nextPageButtons[0];
const nextPageButton1State = await nextPageButtonsState.isDisabled();

Puppeteer returning undefined (JS) using xPath

I'm trying to scrape this element: on this website.
My JS code:
const puppeteer = require("puppeteer");
const url = 'https://magicseaweed.com/Bore-Surf-Report/1886/'
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const title = await page.$x('/html/body/div[1]/div[2]/div[2]/div/div[2]/div[2]/div[2]/div/div/div[1]/div/header/h3/div[1]/span[1]')
let text = await page.evaluate(res => res.textContext, title[0])
console.log(text) // UNDEFINED
text is undefined. What is the problem here? Thanks.

I think you need to fix 1 or 2 issues on your code.
textContent vs textContext
xpath
For the content you want the xpath should be:
const title = await page.$x('/html/body/div[1]/div[2]/div[2]/div/div[2]/div[2]/div[2]/div/div/div[1]/div/div[1]/div[1]/div/div[2]/ul[1]/li[1]/text()')
And to get the content of this:
const text = await page.evaluate(el => {
return el.textContent.trim()
}, title[0])
Notice you need send title[0] as an argument to the page function.
OR
if you don't need to use xpath, it seems you could get directly using class name to find the element:
const rating = await page.evaluate(() => {
return $('.rating.rating-large.clearfix > li.rating-text')[0].textContent.trim()
})

Xpath doesn't recognize anchor tag?

I'm running some Node.js code to scrape a website and return some text from this part of the html:
And here's the code I'm using to get it
const fs = require('mz/fs');
const xpath = require('xpath');
const parse5 = require('parse5');
const xmlser = require('xmlserializer');
const dom = require('xmldom').DOMParser;
const axios = require('axios');
(async () => {
const response = await axios.get('https://www.aritzia.com/en/product/sculpt-knit-tank-%28arjun-knit-top%29/66139.html?dwvar_66139_color=17388');
const html = response.data;
const document = parse5.parse(html.toString());
const xhtml = xmlser.serializeToString(document);
const doc = new dom().parseFromString(xhtml);
const select = xpath.useNamespaces({"x": "http://www.w3.org/1999/xhtml"});
const nodes = select("//x:div[contains(#class, 'pdp-product-brand')]/*/text()", doc);
console.log(nodes.length ? nodes[0].nodeValue : nodes.length)
})();
The code above works as expected -- it prints Babaton.
But when I swap out the xpath above for one that includes a instead of * (i.e. //x:div[contains(#class, 'pdp-product-brand')]/a/text()) it instead tells me that nodes.length === 0.
I would expect it to give the same result because the div that it's pointing to does in fact have a child anchor tag (see screenshot above). I'm just confused why it doesn't work with a and was wondering if anybody else knew the answer. Thanks!

Testcafe get text from element

I'm trying to get a text from a modal on Chrome. Using the console, I can get the inner text as follows:
document.querySelector('.my-form > a').innerText
// returns http://a-url.com
Now, on my test, I can evaluate the element using
const myText = Selector('.my-form > a').innerText;
await t
.expect(myText).contains('url');
and I can even click on that URL
await t.click(myText);
but I cannot put that inner text to a variable, for instance. I tried using a ClientFunction from this post
const getUrl = ClientFunction(() => document.querySelector('.my-form > a').innerText);
test('My Test', async t => {
const text = await getUrl();
console.log(text);
});
// this results in
// TypeError: Cannot read property 'innerText' of null
and tried using a plain Selector as this post suggests
const text = Selector('.my-form > a').innerText;
const inner = await text.textContent;
console.log(inner);
// prints: undefined
How to extract a text from an element? I understand that t.selectText is limited in this scenario, right?

From the documentation you want:
const text = await Selector('.my-form > a').innerText;

That will do the trick:
const paragraph = Selector("p").withText("possible entries");
const extractEntries = await paragraph.textContent;