使用 C# 和 Selenium 在网页上的代码镜像文本框中输入多行 SQL 文本

Question

我正在尝试使用 Selenium 将 SQL 代码输入到代码镜像文本框中。对于这个问题，我将使用网站http://www.gudusoft.com/sqlflow/#/作为示例。

我的问题：

如果代码包含回车或换行，我无法将 MSSQL SQL 代码提交到代码文本框中。

作为一种解决方法，我在使用 JavaScript 函数将其写入文本框之前将其全部删除，但最终结果是非常丑陋的自动换行 SQL。

我还尝试在 Selenium webElement 对象上使用 SendKeys 方法将代码发送到文本框，但我不确定要“查找”哪个元素。使用 SendKeys 需要选择文本框，并且当我尝试对该对象调用 Click" 和 "SendKeys" 方法时，我经常收到一个错误，指出该元素不允许用户交互。

如果我能始终如一地找到可以与之交互的元素，例如 TextArea，我会尝试将剪贴板的内容粘贴到其中，而不是将大量击键发送到文本框。例如，以下内容通常会给我“无法与此对象交互”错误，但偶尔会起作用，这取决于文本框的当前内容，大概。

Clipboard.SetText(sql);
var txtbx = codeMirror.FindElement(By.CssSelector("textarea"));
txtbx.Click();
txtbx.SendKeys(OpenQA.Selenium.Keys.Control + "v");
       

我认为设置文本的最佳机会是使用 Execute 脚本方法在 CodeMirror 对象上执行 setValue JavaScript 方法，如下所示。同样，如果 SQL 没有 CR / LF 字符，这会起作用，但是如何更改我的代码以允许使用这些字符？

我看过很多关于这个的帖子，但我的 JavaScript 知识可能不足以让我得到最终结果。我希望有人可以使用以下代码重建一个工作示例。这是相对简短的说明。

创建一个 C# 项目（控制台应用程序、winForms 等）并添加以下 3 个 Nuget 包：

Selenium.Chrome.WebDriver
Selenium.WebDriver
Selenium.WebDriver.ChromeDriver

创建一个类“SeleniumHelperGudusoft”并粘贴以下代码：

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

namespace SqlSmoke.Classes
{
    public class SeleniumHelperGudusoft
    {
        private IWebDriver driver;

        public SeleniumHelperGudusoft()
        {
            var chromeDriverService = ChromeDriverService.CreateDefaultService();
            chromeDriverService.HideCommandPromptWindow = false;

            ChromeOptions options = new ChromeOptions();
            options.AddAdditionalCapability("useAutomationExtension", false);
            this.driver = new ChromeDriver(chromeDriverService, options);
        }

        public void NavigateToMain()
        {
            driver.Url = @"http://www.gudusoft.com/sqlflow/#/";
        }

        public void SetLanguageToMsSql()
        {
            string languageButtoncssSelector = "#Root > div > div.Main > div > div.Route.Row.x-start.y-stretch > div.SQLFlowEditor > div.SQLFlowEditorOperations.Row.x-start.y-center > div.DbVendor > div > div > svg";
            var languageButton = driver.FindElement(By.CssSelector(languageButtoncssSelector));
            languageButton.Click();

            string msSqlCssSelector = "#Root > div > div.Main > div > div.Route.Row.x-start.y-stretch > div.SQLFlowEditor > div.SQLFlowEditorOperations.Row.x-start.y-center > div.DbVendor > ul > li:nth-child(10)";
            var msSql = driver.FindElement(By.CssSelector(msSqlCssSelector));
            msSql.Click();
        }

        public void SetSqlText(string sql)
        {
            IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
            var codeMirror = driver.FindElement(By.ClassName("CodeMirror"));
            js.ExecuteScript("arguments[0].CodeMirror.setValue(\"" + sql + "\");", codeMirror); //<<<<----Fails here with the error message shown below in my post
        }

        public void ClickVisualizeButton()
        {
            string buttonCssSelector = "#Visualize > div";
            var button = driver.FindElement(By.CssSelector(buttonCssSelector));
            button.Click();
        }
    }
}

练习上面类中的代码，尝试粘贴两种不同的 SQL，一种没有换行符，一种有。

string sql;

var lineageHelper = new SeleniumHelperGudusoft();
lineageHelper.NavigateToMain();
lineageHelper.SetLanguageToMsSql();

sql = "SELECT COL1, nCOL2 FROM TABLE1"; //all on one line works
lineageHelper.SetSqlText(sql);
lineageHelper.ClickVisualizeButton();
                    
sql = "SELECT COL1, \r\nCOL2 FROM TABLE1"; 
lineageHelper.SetSqlText(sql); //<<<----- Fails here with the following error message
lineageHelper.ClickVisualizeButton();

我在第二次调用 SetSqlText 方法时收到以下错误：

js.ExecuteScript("arguments[0].CodeMirror.setValue(\"" + sql + "\");", codeMirror);

Message "javascript error: Invalid or unexpected token\n  (Session info: chrome=84.0.4147.105)" string

如何修改示例以将第二个查询输入到 CodeMirror 文本框中？

更新

代码镜像文档可以在这里找到：https : //codemirror.net/doc/manual.html

这是错误的完整调用堆栈：

OpenQA.Selenium.WebDriverException
  HResult=0x80131500
  Message=javascript error: Invalid or unexpected token
  (Session info: chrome=84.0.4147.105)
  Source=WebDriver
  StackTrace:
   at OpenQA.Selenium.Remote.RemoteWebDriver.UnpackAndThrowOnError(Response errorResponse)
   at OpenQA.Selenium.Remote.RemoteWebDriver.Execute(String driverCommandToExecute, Dictionary`2 parameters)
   at OpenQA.Selenium.Remote.RemoteWebDriver.ExecuteScriptCommand(String script, String commandName, Object[] args)
   at OpenQA.Selenium.Remote.RemoteWebDriver.ExecuteScript(String script, Object[] args)
   at MyNAME.Selenium.SeleniumHelperGudusoft.SetSqlText(String sql) in C:\Users\MYLANID\Desktop\SqlSmoke Code\MyNAME.Selenium\SeleniumHelper.cs:line 41
   at MyNAME.Selenium.Form1.button3_Click(Object sender, EventArgs e) in C:\Users\MYLANID\Desktop\SqlSmoke Code\MyNAME.Selenium\Form1.cs:line 201
   at System.Windows.Forms.Control.OnClick(EventArgs e)
   at System.Windows.Forms.Button.OnClick(EventArgs e)
   at System.Windows.Forms.Button.OnMouseUp(MouseEventArgs mevent)
   at System.Windows.Forms.Control.WmMouseUp(Message& m, MouseButtons button, Int32 clicks)
   at System.Windows.Forms.Control.WndProc(Message& m)
   at System.Windows.Forms.ButtonBase.WndProc(Message& m)
   at System.Windows.Forms.Button.WndProc(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
   at System.Windows.Forms.NativeWindow.DebuggableCallback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)
   at System.Windows.Forms.UnsafeNativeMethods.DispatchMessageW(MSG& msg)
   at System.Windows.Forms.Application.ComponentManager.System.Windows.Forms.UnsafeNativeMethods.IMsoComponentManager.FPushMessageLoop(IntPtr dwComponentID, Int32 reason, Int32 pvLoopData)
   at System.Windows.Forms.Application.ThreadContext.RunMessageLoopInner(Int32 reason, ApplicationContext context)
   at System.Windows.Forms.Application.ThreadContext.RunMessageLoop(Int32 reason, ApplicationContext context)
   at System.Windows.Forms.Application.Run(Form mainForm)
   at MyNAME.Selenium.Program.Main() in C:\Users\MYLANID\Desktop\SqlSmoke Code\MyNAME.Selenium\Program.cs:line 19

Answer 1

在 JavaScript 中设置值时，您可能需要重新转义回车符和换行符：

var sql = @"SELECT foo
FROM bar";
var jsString = sql.Replace("\r", "\\r")
                  .Replace("\n", "\\n");

js.ExecuteScript("arguments[0].CodeMirror.setValue(\"" + jsString + "\");", codeMirror);

生成的 JavaScript 行将是：

var sql = @"SELECT foo
FROM bar";
var jsString = sql.Replace("\r", "\\r")
                  .Replace("\n", "\\n");

js.ExecuteScript("arguments[0].CodeMirror.setValue(\"" + jsString + "\");", codeMirror);

请注意，SQL 字符串中的任何双引号也需要转义，以免过早结束 JavaScript 字符串：

var sql = @"SELECT foo AS '"bar"'
FROM baz";
var jsString = sql.Replace("\r", "\\r")
                  .Replace("\n", "\\n")
                  .Replace("\"", "\\\"");

js.ExecuteScript("arguments[0].CodeMirror.setValue(\"" + jsString + "\");", codeMirror);

所以产生的 JavaScript 是：

arguments[0].CodeMirror.setValue("SELECT foo\n\rFROM bar")