Filling the form fields with log result in Puppeteer - javascript

So right now I have a grabResult.js page that I use to grab a result:
module.exports = async function grabResult(page) {
const name = await page.$eval(
'divtograbname',
(el) => el.innerText
);
const price = await page.$eval(
'divtograbprice',
(el) => el.innerText
);
return { name, price };
};
Using the below code on my main app.js page I can output the log result successfully:
while (true) {
const result = await grabResult(page);
console.log(result);
The above is outputting both: name and price
The next step is I'm trying to put name and price into the fields on my website.
I know how to fill the form field with my desired value:
await page.$eval('input[name=wc_name]', 'mydesiredvalue');
Basically, I'm trying to fill my form fields with my grabbed name and price values.
I have tried:
await page.$eval('input[name=wc_name]', 'name');
await page.$eval('input[name=wc_price]', 'price');
The above just fill the fields with text: 'name' and 'price'. It can't identify the return values from my grabResult page.
I have also tried
await page.$eval('input[name=wc_name]', $name);
await page.$eval('input[name=wc_price]', $price);
I have even tried this to see if it fill both into one:
await page.$eval('input[name=wc_name]', console.log(result));
Can't make it work.
I know I'm missing something here. I'm not a coder. Just trying to combine few blocks into one.
Help would be appreciated.

You are getting back something called an object, it looks like this:
{
name: 'name_value',
price: 1
}
name and price are properties. In order to get the property price, you can type my_object_name.price, so in your example result.price.
Then in Puppeteer, you usually fill values with page.type() method:
await page.type('input[name=wc_name]', result.name);
await page.type('input[name=wc_price]', result.price);
This should work fine.

Related

Testcafe - Populate input field based on dropdown selection

I'm not an expert in Javascript by any means and just getting my head round testcafe which I'm really enjoying.
However as a simple test I'm trying to populate a input field based on what was selected from a dropdown. Really simple, it's a Title field, so Mr, Mrs, etc.. Based on if 'Mr' was selected then populate with male name. If 'Mrs' then populate will female name.
However I'm unable to read the value chosen once it has been selected to pass into my If...else statement and it always goes to the default last option. Can somebody help me?
My code:
import { Selector } from 'testcafe';
const TitleSelect = Selector('#title');
const TitleOption = TitleSelect.find('option');
const FirstName = Selector('#firstname');
fixture `Getting Started`
.page //any page with a Title dropdown and Firstname input field;
test('My first test', async t => {
await t
.click(TitleSelect)
.click(TitleOption.withText('Mrs'))
if (TitleOption === 'Mr') {
await t
.wait(1000)
.typeText(FirstName, "Wayne")
} else if (TitleOption === 'Mrs') {
await t
.wait(1000)
.typeText(FirstName, "Waynetta")
} else {
await t
.typeText(FirstName, "something else");
}
await t
.takeScreenshot({
path: 'If_else_statment.jpg',
fullPage: true
})
.wait(2000)
;
});
You can use the following code to get the input's state:
const value = await TitleSelect.value;
For more information, please refer to
https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#obtain-element-state

Assert empty textbox in testcafe

I am validating if the text box is empty or not. I am not sure what am I doing wrong here.
Page Object method
async getTextVal(){
await this.t.selectText(this.editor) //selecting the text box
return this.editor.innerText; //fetching the value in the textbox
}
TestCase
await t.expect(element.getTextVal()).eql(''); //assert statement
the getTextVal works fine if there is a value present. But checking empty value it fails
try
Page Object method
async getTextVal(){
await this.t.selectText(this.editor) //selecting the text box
return await this.editor.innerText; //fetching the value in the textbox
}
TestCase
await t.expect(await element.getTextVal()).eql(''); //assert statement
Also, without a method just a selector this can be done like so:
await t.expect(selector.innerText).eql('');
You can also setup your selector in a page object file:
import { Selector, t } from "testcafe";
class PageObjectFile {
constructor() {
// input field, this could be many different styles of selectors / frameworks
this.inputField = Selector('.class-input-element');
this.inputFieldTwo = Selector('#id-input-element');
}
}
export default PageObjectFile;
And your test file like this:
import PageObjectFile from "/PageObjectFile";
let pageObjectFile = new PageObjectFile();
fixture `Tests input field is empty`
.page(`https://examplepage.com`)
test(`User see's an empty input field`, async t => {
await t.expect(pageObjectFile.inputField.innerText).eql('');
});

Firestore transaction: set id of the first document to the second document

I'm trying to add two documents to two different collections.
say coll1 & coll2.
I add a document to coll1 => I get the document id which I would like to set it to the coll2 document as id, I can simply write two add's but I'm trying to get these done in a transaction, so that if one fails both fail.
I could not get that done using this link
Below is the code I've, which needs to be turned to transations/batched:
await db.runTransaction(
async function (transaction) {
const coll1 = {
text: 'This is collection 1 text',
}
const coll1Doc = await db
.collection('coll1')
.add(coll1)
// I tried transaction.set(db.collection('coll1').doc(), coll1) but this doesn't return the doc or the docId which we need in the next step.
// Similay batch.set is also not returning the newly added/edited doc or its Id.
if (coll1Doc && coll1Doc.id) {
const coll1Id = coll1Doc.id
const coll2 = {
text: 'This is collection 2 text',
}
await db
.collection('coll2')
.doc(coll1Id)
.set(coll2)
}
}
)
Firestore document IDs are generated inside your application code, and are statistically guaranteed to be unique. So your add() call, essentially takes these two steps:
Generate a new unique ID
Create a DocumentReference for that ID
Set the data in that DocumentReference
With that knowledge, you can build a DocumentReference yourself based on an ID that you get without using the transaction object.
const coll1Doc = db
.collection('coll1')
.doc();
const id1 = coll1Doc.id;
await coll1Doc.set(coll1);
Now you can use id1 in the second write operation.

How can I do more optimal async/await using inside loop?

I want to do more optimal my code. I summeries to following code.I have a data access layer named
ICDataAccess.I making that get all inventorys firts line.Then I get locations of inventory response and I want to get all barcodes with locations information from ServiceCaller data access.Then this barcodes adds to each inventory of inventorys array.How can i do more optimal.Is there a logic error. Help me please...
const ic = await this.ICDataAccess.getActiveIC({ warehouse, locations, status: statuses }); // An object array
await Promise.all(ic.map(async (item) => {
const inventory = item;
const response = await ServiceCaller.filterStore({ ids: inventory.locations, fields: 'barcode' }); // An object array
inventory.barcodes = response.map(res =>res.barcode);
}));

Insert JSON Fails Node-Postgres

I am trying to insert an array of JSON into Postgres. Everything appears to run successfully (the table gets created), but there is no data inserted, and no error given. I am using the async/await method for transactions, but I can't understand what is failing.
(async() => {
const client = await pool.connect()
let val= [
{"table_pk":1,"NAME":"my Great Name","ROLE":"name1"},
{"table_pk":2,"NAME":"new Name","ROLE":"name1"},
{"table_pk":3,"NAME":"someone's funny name","ROLE":"name1"}
]
try {
await client.query('BEGIN');
await client.query('DROP TABLE IF EXISTS myTable')
await client.query(`CREATE TABLE myTable(table_pk INTEGER PRIMARY KEY, name TEXT, role TEXT)`)
await client.query(`INSERT INTO myTable SELECT * FROM jsonb_populate_recordset(NULL::myTable, $1::jsonb)`,[JSON.stringify(val)]);
await client.query('COMMIT');
}
catch (e) {
await client.query('ROLLBACK');
throw e
}
finally {
client.release();
}
})().catch(e => console.error(e.stack))
EDIT
Updated the code to account for missing INSERT, now rows will insert, but not all the data.
The INSERT failed because JSONB is case sensitive when it comes to column names. I had Upper Case column names in the val data and they should have been lower. Thanks to #vitaly-t for pointing out the missing INSERT in my original post.

Categories

Resources