Develop Reference

How to check state of a switch toggle in Selenium using c#

I am trying to validate if a switch is 'on or 'off' using selenium but I cant seem to get it right. The toggle is set to the on position on loading the webpage but filter results in a table when it is off etc. It works fine i just check get my selenium tests to get its current state.
element.Selected; always returns false (regards of toggle position)
element.Enabled; always returns true (regards of toggle position)
string test = myToggle.GetAttribute("class"); returns the text "slider round" which doesn't help
string test1 = myToggle.GetAttribute("checked"); is null
string test2 = myToggle.GetAttribute("value"); is null
Here is the code:
<label class="switch">
<input type="checkbox" id="myToggle" checked />
<span class="slider round"></span>
</label>
The code that checks the toggle position and loads the table data:
if (Amt == currentAmt ) {
if ($("#myToggle").prop("checked") == true) {
loadMyProducts('NAN', $("#total").val());
}
My test at the moment looks like this
[FindsBy(How = How.XPath, Using = "//*[#id='divTestAcc']/div[1]/p[9]/label/span")]
public IWebElement myToggle { get; set; }
public Boolean CheckMyToogleIsOnorOFF()
{
string test = myToggle.GetAttribute("class");
Console.Write("checking "+ test);
// string test1 = myToggle.GetAttribute("checked");
//string test2 = myToggle.GetProperty("checked");
// .Selected always returns false
// .Enables always returns true
Boolean result;
result = myToggle.Enabled;
bool result1 = myToggle.Selected;
if (result == true)
{
Console.WriteLine("My toggle is enabled");
}
else
{
Console.WriteLine("My toggle is not enabled");
}
return result;
}

// is it checked?
var isChecked = driver.FindElement(By.XPath("//input[#type='checkbox']").Selected;
Using the .Selected attribute should achieve what you are trying to do. The reason I add the driver.FindElement statement is to ensure you are locating the correct element -- based on your problem description, I'm not sure if the element you located & tested against was the correct one.
As another user pointed out, if GetAttribute("class") returns slider round, then you are looking at the wrong element here. Ensure the input element has been located first.
Your XPath at your file header //*[#id='divTestAcc']/div[1]/p[9]/label/span will locate the span element, not the input -- input is the one with checked, so that's what we need to test against.

How do i add a value to a char close to cursor position using javascript?

i want to add a value selected from the dropdown to the character close to the cursor position.
What i am trying to do?
when i type #char the dropdown menu opens and when user selects the value from the dropdown it should add that value to whatever is in the input field.
consider i type in "i am #" in the input field
dropdown menu opens up with some values say username1, someuser, nousername
when i select say "someuser" then this input field string should be "i am someuser"
So the below code works if the # is the last character in the string meaning if user types i am # and no string after # it adds the selected value to the last #character
But doesnt work for this.
say i typein i am #yahoo and then go to the begining of the input field and enter hey # so the complete string in input field is like below
"hey # i am #yahoo" and the cursor is at the first # char in the string. now when i select value from dropdown menu this selected value gets added to the last #character in the string meaning the output is like below
"hey # i am someuser"
But the expected ouput is "hey someuser i am #yahoo"
Below is the code,
class Parent extends React.PureComponent {
replace_input_val = (value_in_input, selected_value) => {
const user_name = selected_value;
let input_val_without_#;
input_val_without_# = value_in_input.slice(0,
value_in_input.lastIndexOf('#'));
if (input_val_without_# > 0) {
return input_val_without_# + selected_value;
} else {
return selected_value;
}
}
handle_select_value = (selected_value) => {
const text =
this.replace_input_val(this.state.value_in_input,
selected_value);
this.setState({
value_in_input: text,
});
};
render = () => {
return (
<input
onChange={this.handle_input_change}
value={this.state.value_in_input}/>
<DropdownMenu
onChange={this.handle_select_value}/>
)
}
}
I want to add the selected value from dropdownmenu to the #char where the cursor position is at. How can i do it. could someone help me with this thanks.

how do I modify an element with text received from input, and how do I stop the disable input if a character terminator is used?

I'm learning jQuery and having trouble figuring something out.
What I need to do is display an alert or note (I used h3) to a user to input their name followed by # (the character terminator). Anything the user types prior to the # symbol should change the text of a span element with id userName, in the heading. After the # is typed no other text should able to be typed. I wanted to have to ghost writer effect of the user typing out their naming in the header, but I couldn't figure that out so I put an input field in. I'm trying to use the if statement to append the keyspressed to the id, or otherwise stop the text from being input.
This is what I have:
$(document).ready(function() {
$('input').on(function() {
$('input').keypress(function(evt) {
var keyPressed=String.fromCharCode(evt.which);
if (keyPressed !== '#')
{
$("userNameInput").append('userName');
}
else {
return false;
}
});
});
});
html:
<header>
<h1>Lab 6</h1>
<h2>Welcome, <span id="userName">User!</span></h2>
<h3>Please enter your name followed by # i.e. John#</h3>
<input id="userNameInput" type="text">
</header>

You had a bunch of issues... I think this is what you were going for though:
JSFiddle
HTML:
<h1>Lab 6</h1>
<h2>Welcome, <span id="userName">User</span>!</h2>
<h3>Please enter your name followed by # i.e. John#</h3>
<input id="userNameInput" type="text">
JS:
$(document).ready(function() {
var appendName = function(evt) {
var keyPressed = String.fromCharCode(evt.which);
if (keyPressed !== '#') {
$("#userName").text(this.value + keyPressed);
} else {
$(this).off();
}
};
$('#userNameInput').on("keypress", appendName);
});
You could also just disable the input field instead of turning off the listener if you wanted... just change $(this).off(); to $(this).prop("disabled",true);
Some problems that I noted in your code were... it looks like you were trying to just do a keypress event, but you had that nested in an on, and the on had no event type. This didn't really make sense but I assume you just wanted the keypress event listener.
This chunk here $("userNameInput").append('userName'); was saying to look for an <userNameInput> and append the string userName to it.
You ignored # but did nothing to stop any new input afterwards.

Set focus on form field and select the default text upon form load

I am working on an html form which employs jscript to perform functions such as loading form settings, loading the form with default values, data validation, among others. It then uses htm to display the page.
When the form loads the first field is populated with default data which is appropriate 99% of the time. I want the first field of the form to not only acquire focus upon load but also to have the default value (text) selected so that the 1% of users can easily begin typing without having to backspace through or highlight the text.
I've looked on a number of sites including stackoverflow and the most common suggestion is to add a line -- fieldid.select(); This line would immediately follow the focus line -- fieldid.focus(); Adding the select line had no effect at all. The field does receive focus but the cursor is blinking at the end of the default text and the text is not selected.
Here is the code snippet that I am using...
function windowLoad()
{
hideExtraFields();
loadFormSettings();
comboEventType.focus();
var params = getUseCaseParams();
if (params)
{
inputLocation.value = params.EventLocation;
comboEventType.value = "This is the default text";
comboEventSubtype.value = "this is the default subtext";
}
else
{
var unitData = getMyUnitData();
inputLocation.value = unitData.Position.LocationString;
comboEventType.value = "This is the default text";
comboEventSubtype.value = "this is the default subtext";
}
}

Make sure you are calling select() after you have already set your default values.
function windowLoad()
{
hideExtraFields();
loadFormSettings();
var params = getUseCaseParams();
if (params)
{
inputLocation.value = params.EventLocation;
comboEventType.value = "This is the default text";
comboEventSubtype.value = "this is the default subtext";
}
else
{
var unitData = getMyUnitData();
inputLocation.value = unitData.Position.LocationString;
comboEventType.value = "This is the default text";
comboEventSubtype.value = "this is the default subtext";
}
comboEventType.focus();
inputLocation.focus()
inputLocation.select()
}
Order matters here. Notice this works:
http://jsfiddle.net/g1zmprmx/
But this doesn't:
http://jsfiddle.net/bspga4gb/

Code is taking effect when it shouldn't be

I have a function where if the user clicks on a button, it will display a value in the textbox and it will perform a trigger to another function after a '#btn' button is clicked:
function addwindow(numberAnswer, gridValues, btn) {
$('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
$('#btn'+gridValues).trigger('click');
}
Now what I want to do is that:
if the user clicked on the "Add" button, then display the number from the "Number of Answers" column into the textbox or in other words perform this from the addwindow() function:
$('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
If the user has clicked on a #btn+gridValues button, then display the number in the textbox of the number of buttons which are currently turned on or in other words perform this code:
if ($('#mainNumberAnswerTxt').data('data-ignore') != true) {
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
}
The problem is that step 1 works fine, it does display the number from the "Number of Answers" column in the textbox after the user has clicked on the "Add" button.
The problem is step 2, it is not displaying the correct number on how many buttons are currently turned on after the user has clicked on the #btn+gridValues button.It just doesn't change the number in the textbox.
Does anyone know why this is happening and how thi can be fixed?
DEMO:
Here is a demo of the application. Please follow the steps below:
Step 1: On left hand side you will see a green plus button, click on it and it opens up a modal window.
Step 2: In modal window there is a search bar, type in "AAA" and submit search, you will see a bunch of rows appear.
Step 3: In the last row, you see under "Number of Answer" colum that it contains the number 4, click on the "Add" button within this row, the modal window will close.
You will see that the textbox displays the number 4 in the textbox which is fine as that was the number within the row under the "Number of Answers" column when you added the row.
But below is the problem:
Step 4: If you click on the "Open Grid" link and select button 3, you will see the letter buttons below change to A-C with only letter "B" turned on.
In the textbox it should display number 1 as only 1 button is turned on, but it doesn't display this number and that is the problem I am having.
How can this problem be fixed?

The problem comes from the fact taht you're setting the data-attribute to false on the $('#mainNumberAnswerTxt') but you're checking against the inputs (this in the click).
One solution would be to do the following test if ($('#mainNumberAnswerTxt').attr('data-ignore') != true)
EDIT
To ensure that the ignore process execute only once (when the grid is reloaded after the modal), you'll have to change what's inside the block after the test:
if ($('#mainNumberAnswerTxt').data('ignore') != true) {
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
} else {
/*reset the ignore flag*/
$('#mainNumberAnswerTxt').data('ignore',false);
}
EDIT2
The main problem is that your reaffecting the $('#mainNumberAnswerTxt').val(numberAnswer) after setting it. Your trying to ignore it through the ignoreattribute.
What i would adivse, would be to remove every occurence to that attribute and to change the following function
function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
var myNumbers = {};
myNumbers["A-C"] = "3";
myNumbers["A-D"] = "4";
myNumbers["A-E"] = "5";
myNumbers["A-F"] = "6";
myNumbers["A-G"] = "7";
gridValues = myNumbers[gridValues];
$('#mainNumberAnswerTxt').show();
$('#mainNumberAnswerTxt').val(numberAnswer).data('ignore',true);
$('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
$('#btn'+gridValues).trigger('click');
$('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
$(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
}
$.modal.close();
return false;
}
to :
function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
var myNumbers = {};
myNumbers["A-C"] = "3";
myNumbers["A-D"] = "4";
myNumbers["A-E"] = "5";
myNumbers["A-F"] = "6";
myNumbers["A-G"] = "7";
gridValues = myNumbers[gridValues];
$('#mainNumberAnswerTxt').show();
$('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
$('#btn'+gridValues).trigger('click');
/* moved the following line below the click simulation,
hence its value will be changed regardless of what happened during the click simulation*/
$('#mainNumberAnswerTxt').val(numberAnswer);
$('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
$(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
}
$.modal.close();
return false;
}
In order to modify the value after the visual changes took place.

Use data instead of attr - attr takes a string, data takes JavaScript objects.