WebDriverIO 6 – $ works fine, $ doesn't work in iframe

Question

I use WebDriverIO and try to access and click 2nd li tag inside iframe like this; HTML Image:
. It's no iframe-id, li-id.

Now it works the following code

describe('research test', () => {
    it ('click object in iframe test', () => {
        browser.url('http://localhost/test/html/index.html');
        browser.pause(2000);
        browser.switchToFrame(0);
        $$('[class="inside-list-menu"]')[1].click(); 
        browser.pause(5000);
    });
});

But I want to change code of the following part

 $$ ('[class = "inside-list-menu"]') [1] .click ();

To

 $ ('[class = "inside-list-menu"]') [1] .click ();

but it failed.

I want to know

1. Why $ doesn't work?

2. Other way 2nd li tag is able to click start with $.

I'm using WebDriverIO version: 6. 14. 5 // Browser: Chrome // OS: Windows 10

Answer 1

There is a significant difference between $$ and $. To understand that better, please try to understand findElement and findElements from here .

In short, $$ returns an array of elements while $ returns first element that matches the selector.

Based on the return type of $$, you will select an element from array of elements using its index ( [1] in your case). The return type of $ is an element and when you use index to select it, it is fundamentally wrong.