E2E: Rewrite mysql tests to playwright (#83424)

* E2E: Rewrite mysql tests to playwright

* Fix lint

* Add more selectors and address comments

* Scope locators when locating text

* Don't run it 20 times

* Update new-datasource-variable to assert mysql

packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx

@@ -16,6 +16,7 @@ import { isString } from 'lodash';
 import React from 'react';
 
 import { dateTime, toOption } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Button, DateTimePicker, Input, Select } from '@grafana/ui';
 
 const buttonLabels = {
@@ -124,6 +125,7 @@ export const settings: Settings = {
       <Select
         id={conjProps?.id}
         aria-label="Conjunction"
+        data-testid={selectors.components.SQLQueryEditor.filterConjunction}
         menuShouldPortal
         options={conjProps?.conjunctionOptions ? Object.keys(conjProps?.conjunctionOptions).map(toOption) : undefined}
         value={conjProps?.selectedConjunction}
@@ -139,6 +141,7 @@ export const settings: Settings = {
         id={fieldProps?.id}
         width={25}
         aria-label="Field"
+        data-testid={selectors.components.SQLQueryEditor.filterField}
         menuShouldPortal
         options={fieldProps?.items.map((f) => {
           // @ts-ignore
@@ -175,6 +178,7 @@ export const settings: Settings = {
       <Select
         options={operatorProps?.items.map((op) => ({ label: op.label, value: op.key }))}
         aria-label="Operator"
+        data-testid={selectors.components.SQLQueryEditor.filterOperator}
         menuShouldPortal
         value={operatorProps?.selectedKey}
         onChange={(val) => {

packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx

@@ -3,6 +3,7 @@ import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { EditorField, Stack } from '@grafana/experimental';
 import { Button, Select, useStyles2 } from '@grafana/ui';
 
@@ -115,6 +116,7 @@ export function SelectRow({ sql, format, columns, onSqlChange, functions }: Sele
             <EditorField label="Column" width={25}>
               <Select
                 value={getColumnValue(item)}
+                data-testid={selectors.components.SQLQueryEditor.selectColumn}
                 options={columnsWithAsterisk}
                 inputId={`select-column-${index}-${uniqueId()}`}
                 menuShouldPortal
@@ -127,6 +129,7 @@ export function SelectRow({ sql, format, columns, onSqlChange, functions }: Sele
               <Select
                 value={item.name ? toOption(item.name) : null}
                 inputId={`select-aggregation-${index}-${uniqueId()}`}
+                data-testid={selectors.components.SQLQueryEditor.selectAggregation}
                 isClearable
                 menuShouldPortal
                 allowCustomValue
@@ -138,6 +141,7 @@ export function SelectRow({ sql, format, columns, onSqlChange, functions }: Sele
               <Select
                 value={item.alias ? toOption(item.alias) : null}
                 inputId={`select-alias-${index}-${uniqueId()}`}
+                data-testid={selectors.components.SQLQueryEditor.selectAlias}
                 options={timeSeriesAliasOpts}
                 onChange={onAliasChange(item, index)}
                 isClearable