Develop Reference

Is it possible to give name to Quasar Uploader in <form>

I have a <form> where I am using Vue.js and Quasar, and submits in as a HTML form in asp .net core 3.1
The problem is when I am using Quasar Uploader (https://quasar.dev/vue-components/uploader).
The functionality works fine, but when I submit the form (post i C# and .net core).
I cant get the the file in the controller.
As you can see from this example: https://codepen.io/cbrown___/pen/GRZwpxw
When the Uploader is rendered it does not have the attribute name. From the example above you have this input:
<input tabindex="-1" type="file" title="" class="q-uploader__input overflow-hidden absolute-full">.
I guess that is why I cant get it from my Controller. How can I solve this when I am using .net Core 3.1 to submit this form?
And I see no good solutinos in letting people upload files through my API before the record is created.
Is it a option here I do not see?
EDIT:
The <input> is on the plus-icon. So by using inspect elements you should be able to see that no name occurs.
EXAMPLE CODE:
HTML
<div id="q-app">
<div class="q-pa-md">
<div class="q-gutter-sm row items-start">
<q-uploader
url="http://localhost:4444/upload"
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
color="teal"
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="No thumbnails"
color="amber"
text-color="black"
no-thumbnails
style="max-width: 300px"
></q-uploader>
</div>
</div>
</div>
JS:
new Vue({
el: '#q-app'
})

If any body else need this I ended up with using this:
:name="'file_description[' + index + ']'"
That way each one got one name...and from another array I knew how many file_description it would be.

Select radio button with dynamic Id, using CSS selector or Xpath

I'm using C# in Visual Studio to select multiple yes or no questions. Below is the first button to select "yes". The id is not static so can't use that, and I'm not sure which path (CSS or Xpath) is the most efficient for this route.
<div class="row form-group">
<label class="form-label col-md-4 col-lg-3">Was everything satisfactory?</label>
<div class="col-md-7 col-lg-8"><fieldset class="form-group form-radio-group" id="__BVID__385">
<div tabindex="-1" role="group"><div role="radiogroup" tabindex="-1" class="" id="__BVID__386">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="true" id="__BVID__387" name="__BVID__386">
<label class="custom-control-label" for="__BVID__387">Yes</label>
</div>
</div>
</div>

Its best to use Xpath when you have dynamic CSS Ids, name.
Based on your requirement ('select multiple yes or no questions') you should have a relation b/w Questions and option.
you can make a Xpath relationship between two elements like in below samples.
//label[contains(.,'Was everything satisfactory?')]/following-sibling::div/fieldset/div/div/div/label[.='Yes' or .='No']
Or
//label[.='Yes' or .='No']/ancestor::div/parent::body/label[contains(.,'Was everything satisfactory')]
Update these Xpaths as per your requirement

If you are better of using XPath or CSS selector comes down to the element at hand and personal preferences. The article linked by E. Wiest has some good points.
In your concrete case, you can either use a CSS selector like :checked
input[type='radio']:checked
if you want to select the subsequent label for instance
input[type='radio']:checked+label
Or some XPath as suggested
//label[contains(text(), "Yes")]/preceding::input
Personally, I also consider XPath to be more powerful but a CSS selector is usually equally adequate.

I cant Locate the Xpath of Pseudo Comment

I just want to know how to get the Xpath Of pseudo Element Actually the thing is that in This I want to .CLick() on this Div Its role Is button so i tried just To xpath with Div Class name it is locating the element but Not clicking i have to Click On this ::after But i cant Get the Xpath Because it is a Pseudo Element
<div id=":l6" class="T-I J-J5-Ji amD T-I-awG T-I-ax7 T-I-Js-Gs L3"
role="button" tabindex="0"
data-tooltip="Older"
aria-label="Older"
style="user-select: none;"
xpath="1">
<span class="amF"
aria-hidden="true">
</span>
<img class="amJ T-I-J3"
src="images/cleardot.gif" alt="">
::after
</div>

What I have read "The Selenium API doesn't support pseudo-elements".
So you can use try using Actions.
I have a sample (I don't have the full path you can add) here with CssSelector:
Actions action = new Actions(Session.Driver);
action.MoveToElement(FindElement(By.CssSelector("div.img::after"))).ContextClick().Build().Perform();
As a last resort, you can use JavaScript with ExecuteScript something like this:
var afterElem = driver.FindElement(By.CssSelector("div.img"));
var buttonAfter = driver.ExecuteScript(
"return window.getComputedStyle(arguments[0],'::after');"
, afterElem);
buttonAfter.click();
You will need to play with the CssSelector Or use an XPath.
Hope this helps you!

Cannot check a checkbox control using Selenium with C#

I'm trying to check a simple input type=checkbox using Selenium with C#, this is the HTML code I'm using:
<div _ngcontent-c5="" class="check-item">
<input _ngcontent-c5="" class="custom ng-untouched ng-pristine ng-valid" id="captcha" type="checkbox">
<label _ngcontent-c5="" for="captcha" translate="">Text</label>
</div>
I've tried almost all possible approaches like XPath, ID, Class name with no success, this seems to be an Angular label or something like that
Thanks in advance!

Have you tried By.CssSelector("[for='captcha']");? This is a css selector for labels that point to an input with an id.

Webdriver Selenium different behavior on different computers

I wrote some code to do repetitive tasks with the Webdriver in C#.
My code works well on my PC but it is grabbing a different element on my boss's PC.
The element I'm looking for:
var InventMgmt = driver.FindElement(By.XPath("//*[#id='ROOT/Inventory Management']/div/span"));
This element is from a WebApp my company is using and it's the same across the network.
The problem is that the Webdriver is clicking a completely different element that is not listed in my code.
Both PCs are using the same Corporate OS (Windows 10), with the same browser versions.
After reviewing my code and Inspecting Element in my boss's browser, I'm starting to believe the issue can only be coming from my boss's PC...what could cause this kind of issue?
Here's the innerHTML of the elements I'm looking for and the one that are actually being clicked:
Trying to click the "Inventory Management" span:
<div id="ROOT/Inventory Management" class="x-panel x-panel-noborder x-tree x-panel-collapsed" style="width: auto;">
<div class="x-panel-header x-panel-header-noborder x-unselectable x-accordion-hd" id="ext-gen186" tabindex="0" role="tab" aria-expanded="false" style="cursor: pointer;">
<span class="x-panel-header-text" id="ext-gen190">Inventory Management</span>
</div>
</div>
Element being clicked is the div with id "ROOT/Support Table":
<div id="ROOT/Support Table" class="x-panel x-panel-noborder x-tree" style="width: auto;">
<div class="x-panel-header x-panel-header-noborder x-unselectable x-accordion-hd" id="ext-gen248" tabindex="0" role="tab" aria-expanded="true" style="cursor: pointer;">
<span class="x-panel-header-text" id="ext-gen252">Support Table</span>
</div>
</div>

You may want to check your browser 'Zoom Level'. It should be 100% for your automation to work as expected. I ran into a similar situation once.
I recommend restricting the driver from starting if zoom levels are not 100.
InternetExplorerOptions ieOptions = new InternetExplorerOptions();
ieOptions.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
ieOptions.IgnoreZoomLevel = false;
IWebDriver driver = new InternetExplorerDriver(IEDriverFolder, ieOptions);