Unable to select checkbox using javascript in browser console

2022-01-21 17:18 DwarakJ imported from Stackoverflow

i am automating our application using a tool that supports javascript.Navigated to the page at browser console, i am trying to select the checkbox inside a web component using document.queryselector method but i am not able to succeed in checking the box.

tried .checked = true, select and submitform.

i am relatively new in this company and to the tool, so need some tip.

2 answers

answered 2022-01-21 17:26 Isaac Rodriguez
You are using querySelectorAll() that return an array, so you need to specify the position of the array that you want to change. Actually in the image show that the function return an array with 2 elements.

answered 2022-01-21 17:33 Srimurugan Subramanian

You can use for loop or need to specify the position.

var checkboxes = document.querySelectorAll('selector');
for (var i = 0, len = checkboxes.length; i < len; i++) {
//work with checkboxes[i].checked = true;
}

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
Vue web component prop not being set through html attribute
I've got a vue web component with a numeric prop on it, and through some testing have found that doing something like this doesn't work in setting the prop value...
```
<script src="https://unpkg.com/vue@2"></script>
<script src="./mycomponents.js"></script>

<my-component myProp="40"></my-component>
```
But this will...
```
<script src="https://unpkg.com/vue@2"></script>
<script src="./mycomponents.js"></script>

<my-component id="mycmp"></my-component>

<script type="module">
const myComponent = document.getElementById("mycmp");
myComponent.myProp = 40;
</script>
```
Example component code:
```
<template>
    <p>{{myProp}}</p>
</template>

<script>
export default {
    name: 'MyComponent',
    props: {
        myProp: {
            type: Number,
            default: 0
        }
    }
}
</script>
```
I'm guessing maybe this is a timing thing, like when doing it through the html attributes the component hasn't finished being properly initialised yet? Though all the examples I saw of other people using vue web-components seemed to suggest that this should be a pretty basic use case. Hopefully it's just me doing something dumb.

Any help greatly appreciated!

Active nav item with custom html elements

I'm building a nav component using html custom elements like so:

HTML

<app-navbar></app-navbar>
<template>
<style>
    ul {
        display: flex;
        list-style: none;
        gap: 20px;
    }
    a {
        padding: 10px;
        text-decoration: none;
    }
    .active {
        color: white;
        background-color: red;
    }
</style>
<nav>
    <ul>
        <li><a href="/page-one.html">Nav item 1</a></li>
        <li><a href="/page-two.html">Nav item 2</a></li>
        <li><a href="/page-three.html">Nav item 3</a></li>
    </ul>
</nav>

class AppNavBar extends HTMLElement { 
 constructor() { 
  super();
  this.attachShadow({ mode: 'open' });
  const template = document.querySelector('template');
  this.shadowRoot.appendChild(template.content.cloneNode(true))
 }
}
window.customElements.define("app-navbar", AppNavBar)

And now I need to pass the active class onto the respective nav item. For example when click on <a href="/page-two.html">Nav item 2</a> I want that item to get the class .active and so on.

Update

Something like:

page-one.html

<app-navbar page-one-nav-item="active"></app-navbar>

page-two.html

<app-navbar page-two-nav-item="active"></app-navbar>

page-three.html

<app-navbar page-three-nav-item="active"></app-navbar>

Is this possible to achieve with html custom elements?

Thank you.

Import less style inside web component with webpack

I need to import styles from a less file inside a web component. I'm using webpack with less-loader. When I try to import the style from the less file, I get an error regarding variables used in the less.

webpack config

   module: {
                rules: [{
                    test: /\.(css|less)$/,
                    use: [{
                        loader: MiniCssExtractPlugin.loader,
                        // loader: 'style-loader',
                    }, {
                        loader: 'css-loader',
                    }, {
                        loader: 'less-loader',
                        options: {
                            paths: [
                                path.resolve(__dirname, 'node_modules'),
                            ],
                        },
                    }],
           },
plugins: [new MiniCssExtractPlugin({
                chunkFilename: '[contenthash].css',
            })]

file I'm trying to import the style in

    import editorStyle from 'src/components/editor.less';
    
    const componentTemplate = document.createElement('template');
    componentTemplate.innerHTML = `
    <style>
    ${editorStyle}
    </style>
    <div class="editor-container"><div class="html-editor"></div></div>`;
    
    class EditorWebComponent extends HTMLElement {
        constructor() {
            super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(componentTemplate.content.cloneNode(true));
        this.editor = $(this.shadowRoot.querySelector('.html-editor'));
        this.init();
    }
}

The error:

[built] [failed] [1 error]

ERROR in ./src/components/editor.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ref--4-2!./src/components/editor.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


    background-color: transparent !important;
    color: @text-primary !important;
         ^
Variable @text-primary is undefined
      in ~\editor.less (line 4, column 11)

.Net Web API - 404 not found in postman

Hello Dearest Community,

I am getting a 404 not found on a custom route of my Web API. I am using .Net Core Web API setup. This is my controller :

namespace CRUD_App.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmployeeController : Controller
    {
        private readonly IConfiguration _configuration;
        private readonly IWebHostEnvironment _env;

        public EmployeeController(IConfiguration configuration, IWebHostEnvironment env)
        {
            this._configuration = configuration;
            this._env = env;
        }


        [HttpGet]
        public IActionResult Get()
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var dbList = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable();

            return Json(dbList);
        }

        [HttpPost]

        public IActionResult Post(Employee emp)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            int LastEmployeeId = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable().Count();

            emp.EmployeeId = LastEmployeeId + 1;

            dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").InsertOne(emp);

            return Json("Employee Added Successfully");
        }

        [HttpPut]
        public IActionResult Put(Employee emp)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var filter = Builders<Employee>.Filter.Eq("EmployeeId", emp.EmployeeId);

            var update = Builders<Employee>.Update.Set("EmployeeName", emp.EmployeeName)
                                                  .Set("Department", emp.Department)
                                                  .Set("DateOfJoining", emp.DateOfJoining)
                                                  .Set("PhotoFileName", emp.PhotoFileName);

            dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").UpdateOne(filter, update);

            return Json("Employee Updated Successfully");

        }

        [HttpDelete]
        public IActionResult Delete(int id)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var filter = Builders<Employee>.Filter.Eq("EmployeeId", id);

            dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").DeleteOne(filter);

            return Json("Employee Deleted Successfully");
        }

        [Route("GetById")]
        [HttpGet]
        public JsonResult GetById(int id)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var filter = Builders<Employee>.Filter.Eq("EmployeeId", id);

            var emp = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").Find(filter);

            return new JsonResult(emp);
        }
    }

The route that is causing the problem is the last one above meaning the one with [Route("GetById")].

Here is the screenshot of the result on postman :

Than you for your time !

sqllite 19: foreign key constraint faild in TDD Test in Asp.net webapi

I Test Add Goods in Project when debugging below inner Exception SqlliteException :SqlLite error 19: foreign key constraintfailed Note:my project it's a small shop with implementing WebApi then test with swagger or postman All Operation with successful and in BDD With SqlServer But TDD with InMemory can't passed them.

public class Goods : EntityBase
    {
        public string Name { get; set; }
        public int Count { get; set; }
        public int MinimumInventory { get; set; }
        public int SalesPrice { get; set; }
        public string UniqueCode { get; set; }

        public int EntryDocumentId { get; set; }
        public EntryDocument EntryDocuments { get; set; }

        public int SalesInvoiceId { get; set; }
        public SalesInvoice SalesInvoices { get; set; }

        public int CategoryId { get; set; }
        public Category Category { get; set; }

    }




public class Category :EntityBase
    {
        public Category()
        {
            Goods = new HashSet<Goods>();
        }
        
        public string Name { get; set; }

        public HashSet<Goods> Goods { get; set; }

    }

it's my tdd test

[Fact]
        public void Add_adds_Goods_Properly()
        {
            _category = new Category
            {
                Name = "DummyCategory"
            };
            _context.Manipulate(_ => _.Categories.Add(_category));

            _addGoodsDto = new AddGoodsDto
            {
                Name = "ماست کاله",
                SalesPrice = 5000,
                MinimumInventory = 5,
                Count = 10,
                UniqueCode = "YK-142",
                CategoryId = _category.Id,
                
            };
         _sut.Add(_addGoodsDto);

            var expected = _context.Goods.FirstOrDefault();

            expected.Name.Should().Be(_addGoodsDto.Name);
            expected.SalesPrice.Should().Be(_addGoodsDto.SalesPrice);
            expected.MinimumInventory.Should().Be(_addGoodsDto.MinimumInventory);
            expected.Count.Should().Be(_addGoodsDto.Count);
            expected.UniqueCode.Should().Be(_addGoodsDto.UniqueCode);
            expected.Category.Id.Should().Be(_category.Id);
        }

Controller Method Get : Get specify attributes from a Class

my question is simple, I´m try to do a controller that pass some attributes of a Model

This is the method:

[HttpGet("getAllUserInfo")]
public async Task<ActionResult<object>> GetAll() {
    var test = await _context.Users.ToListAsync(); //here I have the all Info of all users

    //In the return I want pass some attributes of user, creating a new object (ex: The user have a password but I don´t want to show that)
    return Ok(new { test.getType().Name, test.getType().Mail });
    //this above is the part of the code I don´t understand
    }

Is there any alternative to this scenario or what are the possible ideas to make this possible?

Sorry if there are any spelling mistakes in the title and document, but I think the idea where I have difficulty understanding is there

How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?

I am trying to make a news app and this version 6 of react-router-dom is not working.. can anybody tell me how to fix it?

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React, { Component } from "react";
import NavBar from "./components/NavBar";
import News from "./components/News";
export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <NavBar />
          <Routes>
          <Route exact path="/"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
          <Route exact path="/business"><News key="business" pageSize={this.pageSize} country="in" category="business"/></Route> 
          <Route exact path="/entertainment"><News key="entertainment" pageSize={this.pageSize} country="in" category="entertainment"/></Route> 
          <Route exact path="/general"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
          <Route exact path="/health"><News key="health" pageSize={this.pageSize} country="in" category="health"/></Route> 
          <Route exact path="/science"><News key="science" pageSize={this.pageSize} country="in" category="science"/></Route> 
          <Route exact path="/sports"><News key="sports" pageSize={this.pageSize} country="in" category="sports"/></Route> 
          <Route exact path="/technology"><News key="technology" pageSize={this.pageSize} country="in" category="technology"/></Route> 
          </Routes>
        </Router>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

How to select a value from the populated list using document query selector in browser console?

I am trying to automate my application using a JavaScript function. Below is a screenshot of the what the dropdown looks like in the application and I would like to select one of the option using the document.querySelector() method.

I need some help on that. A CSS selector for the option is also shared below.

document.querySelector("body > app-root > app-qc-route > app-qc > div > app-workspace-outlet > app-workspace-split-layout > ap-split-pane > div:nth-child(1) > app-workspace-outlet > app-workspace-vertical-layout > app-workspace-outlet:nth-child(1) > app-workspace-split-layout > ap-split-pane > div:nth-child(2) > app-workspace-outlet > app-workspace-tabs-panel > ap-tab-view > ap-tab-content:nth-child(4) > app-qc-marker-tab > div > ap-scroll-area > app-marker-form > div > ap-json-forms").shadowRoot.querySelector("ap-dispatch-renderer > ap-layout-renderer").shadowRoot.querySelector("div > div:nth-child(1) > ap-dispatch-renderer > ap-autocomplete-control-renderer").shadowRoot.querySelector("#\\\\\\#\\\\\\/properties\\\\\\/name").shadowRoot.querySelector("#option-0")

CSS pseudoclass usage

I want to combine a:link and a:visited at once. What is best method?

I am thinking of a:link+visited. This doesn't work though! What to do then? What is the right way?

Related questions

Unable to select checkbox using javascript in browser console

2 answers

See also questions close to this topic