Selenium - How to send input from div > input by id? - javascript

So I am having an issue where I am trying to input a text to a input field but I realized that there is two same id by the same id name and I am here looking for help on how to specifiy which div -> input I would like to use.
What I did so far was:
it('Entering First Name', function (done) {
browser.driver
.then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[#id="pp-cc-first-name-field"]'))), 50000, "Timed out finding 'First Name' element"))
.then(() => element(by.xpath('//input[#id="pp-cc-first-name-field"]')).sendKeys("hello world")
.then(() => done());
});
with using this HTML
So I am not sure what I am actually doing wrong in this case because right now it doesn't input anything and fails due to time out. I would like to wish to input any text to this specific element.
EDIT!
It looked like I had to switch to iframe due to there is a iframe loaded on the background which was the reason I wasn't able to actually write on the field. I had to use
browser.switchTo().frame(element(by.xpath("//iframe[#id='cc-integrated-payment-page-frame']")).getWebElement()))
to be able to write inside the fields.

The IDs of your elements are not the same, <div> has pp-cc-first-name-field value, and <input> pp-cc-first-name-field value.
Try to fix it as follows:
it('Entering First Name', function (done) {
browser.driver
.then(() => browser.wait(EC.visibilityOf(element(by.id('pp-cc-first-name'))), 50000, "Timed out finding 'First Name' element"))
.then(() => element(by.id('pp-cc-first-name')).sendKeys("hello world")
.then(() => done());
});

To input a character sequence within the input field you can use either of the following Locator Strategies:
Using css_selector:
input#pp-cc-first-name[name='First name'][placeholder='First name']
Using xpath:
//input[#id='pp-cc-first-name' and #name='First name'][#placeholder='First name']
Effectively, your modified code block will be:
it('Entering First Name', function (done) {
browser.driver
.then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[#id="pp-cc-first-name" and #name="First name"][#placeholder="First name"]'))), 10, "Timed out finding 'First Name' element"))
.then(() => element(by.xpath('//input[#id="pp-cc-first-name" and #name="First name"][#placeholder="First name"]')).sendKeys("hello world")
.then(() => done());
});

Related

Telegraf: unable to use Markdown style in reply with inlineButtons

The reply allowed html style with inline button but unfortunately it is not possible to use markdown style with inline button.
const inlineButtons = () => {
const inlineLinks = [
{
title: 'Google',
link: 'https://www.google.com/',
},
{
title: 'DuckDuckGo.com',
link: 'https://www.duckduckgo.com/',
},
];
const buttonLinks = inlineLinks.map(({ title, link }) =>
Markup.markdown().urlButton(title, link),
);
return Extra.markup(m => m.inlineKeyboard(buttonLinks, { columns: 1 }));
};
// Reply message
ctx.reply(
`<b>show_inline</b> *${show_inline}*`,
show_inline ? inlineButtons()
);
With the current code there is no style with in the message
There's Extra.markdown() and Extra.HTML()
Both ctx.reply() and ctx.replyWithHTML() works, the key point is the Extra.< Something >.markup
Try not mix replyWithHTML() with Extra.markdown() // Doesn't make sense
ANS:
ctx.replyWithHTML(
"<b>show_inline</b>",
Extra.HTML().markup(m =>
m.inlineKeyboard([
m.callbackButton("Single", "single"),
m.callbackButton("Range", "range")
])
)
);
Got my idea from https://github.com/telegraf/telegraf/issues/443
Edit:
For markdown, a single _ is invalid
<b>show_inline\</b> *${show_inline}*
Use Escape \\:
<b>show\\_inline</b> *${show_inline}*
Markup doesn't have a function called markdown()
(I use TS to check the functions they have)
I don't think you can style the inline keyboard text

Enzyme simulate with 1 node

I have the following test case in react-native.
it('changes text', () => {
wrapper.find(InputBox).simulate('change', { target: { value: 'text Given' } });
});
There are 2 InputBoxes so this gives me an error saying 'simulate should run on a single node, but found 2'.
How can I fix this issue?
You could make use of selectors such as first or at. For instance, say you want to select the first InputBox, you will write:
wrapper.find(InputBox).first().simulate('change', { target: { value: 'text Given' } });
In the same way you can use last to get the last of matched nodes or at(index) to select matches by index.

how to get field value on change for FormItem in antd

I am having a hard time with antd's form.
I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly.
say this is the item for which I want the values
<FormItem
{...formItemLayout}
label={fieldLabels.qcategoryid}
validateStatus={categoryError ? "error" : ""}
help={categoryError || ""}
>
{getFieldDecorator("qcategoryid", {
rules: [{ required: true, message: "Please select Category!" }],
onChange: this.handleCategoryChange
})(<Select>{categoryOptions}</Select>)}
</FormItem>
this is the categoryOptions
if (this.props.categories) {
categoryOptions = this.props.categories.map(item => (
<Select.Option
key={item.categoryid}
value={item.categoryid}
name={item.categoryname}
>
{item.categoryname}
</Select.Option>
));
}
I want both the name of the category and the id
so I created a handleCategoryChange which gets called onChange
and I am able to get the fields I want.
But, it seems that now, I have to click twice on the field to properly select it.
If I click it just once then it does show up in the console. but the field on the form still remains empty. when I click it again, then the field shows up in the form too.
So, what am I doing wrong here.
Ah,yes! Here's the handleCategoryChange function
handleCategoryChange = (value, e) => {
console.log("value is : ", value);
console.log("e : ", e);
this.props.form.setFieldsValue({ qcategoryid: value });
this.setState({
categorySelected: value,
categoryname: e.props.name
});
};
Just to make myself clear.
I need those values before I click submit.
not on submit.
maybe this will help Ant Design form API as of 22nd of May 2022
This was added in v4.20
const Demo = () => {
const [form] = Form.useForm();
const userName = Form.useWatch('username', form);
const { data: options } = useSWR(`/api/user/${userName}`, fetcher);
return (
<Form form={form}>
<Form.Item name="username">
<AutoComplete options={options} />
</Form.Item>
</Form>
);
};
I realize this is super late, but I think this might be what OP was looking for:
https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79
To set fields on a form dynamically, e.g. in a child via a callback, you could use
this.props.form.setFields({
user: {
value: values.user,
errors: [new Error('forbid ha')],
},
});
in a parent defined handleSelect method you called from the child on a selected value. you can alternatively use setFieldsValue if you dont want to pass an error field
Try this:
<FormItem
{...formItemLayout}
label={fieldLabels.qcategoryid}
validateStatus={categoryError ? "error" : ""}
help={categoryError || ""}
>
{getFieldDecorator("qcategoryid", {
rules: [{ required: true, message: "Please select Category!" }]
})(<Select onChange={this.handleCategoryChange}>{categoryOptions}</Select>)}
</FormItem>
And on the handleCategoryChange function
handleCategoryChange = (value, e) => {
this.setState({
categorySelected: value,
categoryname: e.props.name
});
};
Basically, changing the onChange from the getFieldDecorator helper to the Select, so it doesn't mess with antd's natural behavior, but gets the value and change on state
I've based this answer on the code to the registration form on their website. Specifically, the handleWebsiteChange function
https://ant.design/components/form/#components-form-demo-register
I have made a helper function to solve this problem, you have to pass the field
name you want to take out from the form and the form object.
const getFieldValue = (fieldName,form) => {
return Form.useWatch(fieldName,form);
}
console.log(getFieldValue("username"))
in above example I had to console updated username value.
demo
A quick response, and hopefully a quick solution. Rather than using onChange you may want to use onSelect/onDeselect handlers, per the documentation (https://ant.design/components/select/):
<Select onSelect={handleCategoryChange} .../>
I have found also that SELECT and other input components, due to their custom html nature operate differently, and so in my forms, I have often created them as dummy fields that are using to alter text/hidden inputs in order to achieve the desired behaviours in complex forms.
Either I am doing something wrong, or the ANT way is mildly annoying.
Hope this helps.

Priority-Web-SDK: Filtering a form

I am trying to understand how to use the setSearchFilter function in the Priority Web SDK. I can run formStart() followed by form.getRows(1) to get the entire form, but I only need ~5 of the over 100 rows.
login(configuration)
.then(() => formStart('ORDERS', null, null, 'demo',1))
.then(form => form.setSearchFilter({
or: 0,
ignorecase: 1,
QueryValues: [{
field: 'TOTPRICE',
fromval: '100',
op: '>'
}]
}))
.then(filter => filter.getRows(1))
.then(rows => console.log(rows))
.catch(err => console.log(err));
If I comment out the then-setSearchFilter line, I get the entire form. With it in, I get filter undefined.
This is for a phone app so how much data I download seems important.
As you can see in the documentation setSearchFilter doesn't return a filter object. After defining the filter each call to getRows will return rows according to the filter. You should call it like this: form.getRows not filter.getRows.
In addition, when defining a Filter you must define all of its members.

pouchdb put is still rejected with _rev

I'm using pouchDB for the first time, and as indicated in the docs I'm using put() so it will automatically handle revisions. However, when the code is running and there's an existing item with the same ID, it's still rejecting even when including a _rev.
Here's my code:
var db = new PouchDB('blog')
...
function saveCategory(category) {
var savedCategory = {
_id: 'category' + category.id,
_rev: '2-' + String(new Date().toISOString()),
name: category.name,
nicename: category.slug,
post_count: category.count,
description: category.description,
link: category.link,
parent: category.parent
}
return db.put(savedCategory).then((response) => {
$log.log(response)
}).catch((error) => {
$log.error('error saving category ',error)
})
}
This is not the purpose of the _rev field. It is always generated by the server and not by your code. To update a document you must pull the entire document (including the _rev field), update the desired fields, and then put the document. The value of _rev should be the same as when you got it from the server.
If you have a new record, you do not need to set _rev.
The pocketDB guide has a very useful section about this.

Categories

Resources