草庐IT

javascript - PhantomJS 并单击表单按钮

coder 2024-07-28 原文

我有一个非常简单的 HTML 表单，我试图用各种数据对其进行测试。我使用 IE 对象在 MS Access/VBA 中编写了原型(prototype)概念验证。它运行良好，但完成的测试产品必须使用 PhantomJS。我已经让页面接口(interface)正常工作，并且表单填充得很好。我卡住的地方是触发提交按钮。我梳理过 S.O.并尝试了所有建议，但没有任何效果。我正在使用 PhantomJS 1.9.7 并使用直接的 JavaScript 测试脚本。

我尝试了各种 JavaScript 技术来触发提交按钮。为了满足“只使用 JQuery”的人群，我也试过了。什么都不起作用。当我在测试脚本末尾呈现表单时，我看到表单中填充了数据，耐心等待单击 按钮。

这是我尝试过的总结:

  1. document.getElementById('btnSearch').click();
  2. $("btnSearch").click();
  3. var el = document.getElementById('btnSearch');//获取搜索按钮对象
    $(el).click();
  4. document.getElementById('Form1').submit();
  5. 尝试创建一个点击事件并从按钮对象触发它(在下面的代码中)
  6. 尝试创建一个点击事件并从 body 对象触发它，该对象的坐标是相关按钮内的一个点

这是表格: (请不要对缺少 CSS、使用表格等发表评论/辩论。我对创建网站的人没有发言权或影响力。)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
    <HEAD>
        <title>Da Site</title>
    </HEAD>
    <body>
    <form name="Form1" method="post" action="Default.aspx" id="Form1">
    <TABLE id="Table2" cellSpacing="2" cellPadding="1" border="0">
      <TR>
        <TD>Street Address:</TD>
        <TD><input name="Address" type="text" maxlength="100" id="Address" /></TD>
      </TR>
      <TR>
        <TD>City:</TD>
        <TD><input name="City" type="text" maxlength="100" id="City" style="width:232px;"/></TD>
      </TR>
      <TR>
        <TD>State:</TD>
        <TD><select name="State" id="State">
                    <option value=""></option>
                    <option value="AL">AL - Alabama</option>
                    <option value="AK">AK - Alaska</option>
                    [The rest of the other states]
                    <option value="WI">WI - Wisconsin</option>
                    <option value="WY">WY - Wyoming</option>
                    <option value="PR">PR - Puerto Rico</option>
            </select>
        </TD>
      </TR>
      <TR>
        <TD>Zip Code:</TD>
        <TD><input name="ZipCode" type="text" maxlength="5" id="ZipCode" /></TD>
      </TR>
      <tr>
        <td><input type="submit" name="btnSearch" value="Search" id="btnSearch" />
            <input type="submit" name="btnReset" value="Reset" id="btnReset" />
        </td>
      </tr>
    </TABLE>
    </form>
    </body>
</HTML>

这是驱动表单的 JavaScript:

var maxtimeOutMillis = 3000;
var start;
var finish;

var page = require('webpage').create();

// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
page.onConsoleMessage = function(msg) {
                                      console.log(msg);
                                      };

page.open('http://www.MadeUpURL.com/', function(status) {

  page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {

  if (status !== 'success') {
    console.log('Unable to access network');
  } else {
         page.render('before.png');  // Renders the blank form
         page.evaluate(
              function () {
                          // page.render('Sample.png');
                          document.getElementById('Address').value = '123 Somewhere Drive';
                          document.getElementById('City').value = 'Somewhere';
                          document.getElementById('State').selectedIndex = 36;
                          document.getElementById('ZipCode').value = '12345';

         // I've done a page.render() here and it shows the form fully and correctly populated

                          // Now let's submit the form...
                          var el = document.getElementById('btnSearch');   // Get the "search" button object

                          // Tried the usual suspects
                          document.getElementById('btnSearch').click();
                          $("btnSearch").click();
                          $(el).click();
                          document.getElementById('Form1').submit();

                          // Tried creating a click event and firing it from the button object
                          var ev = document.createEvent("MouseEvent");
                          ev.initMouseEvent("click",
                                            true /* bubble */,
                                            true /* cancelable */,
                                            window,
                                            null,
                                            0, 0, 0, 0, /* coordinates */
                                            false, false, false, false, /* modifier keys */
                                            0 /*left click*/,
                                            null);
                          el.dispatchEvent(ev);

                          // Tried calculating the location of the button itself (which works) and fire the click event from the <Body> object
                          var obj = document.getElementById('btnSearch');
                          var x = obj.offsetLeft;
                          var y = obj.offsetTop;

                          while (obj.offsetParent) {
                            x = x + obj.offsetParent.offsetLeft;
                            y = y + obj.offsetParent.offsetTop;
                            if (obj == document.getElementsByTagName("body")[0])
                              {
                                break;
                              }
                              else
                              {
                                obj = obj.offsetParent;
                              }
                            }

                          x = x + 5; // Tried with and without this +5 delta
                          y = y + 5; // Tried with and without this +5 delta

                          console.log('X = ' + x);
                          console.log('Y = ' + y);

                          var ev = document.createEvent("MouseEvent");
                          ev.initMouseEvent("click",
                                            true /* bubble */,
                                            true /* cancelable */,
                                            window,
                                            null,
                                            0, 0, x, y, /* coordinates */
                                            false, false, false, false, /* modifier keys */
                                            0 /*left click*/,
                                            null);
                          document.body.dispatchEvent(ev);

                          });
         start = new Date().getTime();
         finish = new Date().getTime();
         console.log('Time before: ' + start);
         // Check to see if results are defined (or times out)
         while ( (finish - start < maxtimeOutMillis) &&  !( page.evaluate( function() {return document.getElementById('TheAnswer');})))
           {
           finish = new Date().getTime();
           }
         console.log('Time after: ' + finish);
         if ( page.evaluate( function() {return document.getElementById('TheAnswer');}))
           {
           console.log(page.evaluate( function() {return document.getElementById('TheAnswer').textContent;}));
           }
         else
           {
           console.log('Element not defined');
           }
         }
  page.render('after.png');
  phantom.exit();

  });

});

我希望这是您忘记分号的事情之一，但我就是看不到。非常感谢任何帮助!

编辑 #1: 添加脚本输出以供引用。

C:\Temp\WebAutomation\PhantomJS\scripts>phantomjs interact.js
X = 151
Y = 442
Time before: 1407875912197   [edit #2 - change before/after labels to match code]
Time after: 1407875915197
Element not defined
C:\Temp\WebAutomation\PhantomJS\scripts>

最佳答案

好的。我想我明白了。我将 PhantomJS 和我的脚本定向到一个网站，在那里我可以监控后端的数据。令我惊讶的是，按钮被点击了。我只是看不到结果。

由 this post from Vinjay Boyapati 提供，问题似乎更多地与页面处理程序和排序有关。似乎在 PhantomJS 中处理页面转换的最佳方法是启动页面循环(单击提交按钮、链接等)并退出该 JS 评估函数。检查 PhantomJS 以确保页面已完全加载且稳定后，调用另一个 page.evaluate 并查找浏览器取回提交结果时您期望找到的任何内容。这是我从 Vinjay 的帖子中复制/修改的代码:

编辑:需要特别注意的一件事。对于每个需要 jQuery 的 page.Evaluates()，我添加了 page.injectJs("jquery1-11-1min.js"); 行。否则我会得到“$ is undefined”作为页面错误。

var page = require('webpage').create();
var loadInProgress = false;
var testindex = 0;

// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
page.onConsoleMessage = function(msg) {
    console.log(msg);
};

page.onAlert = function(msg) {
    console.log('alert!!> ' + msg);
};

page.onLoadStarted = function() {
    loadInProgress = true;
    console.log("load started");
};

page.onLoadFinished = function(status) {
    loadInProgress = false;
    if (status !== 'success') {
        console.log('Unable to access network');
        phantom.exit();
    } else {
        console.log("load finished");
    }
};

var steps = [
    function() {
        page.open('http://www.MadeUpURL.com');
    },

    function() {
        page.injectJs("jquery1-11-1min.js");
        page.evaluate(function() {
            document.getElementById('Address').value = '302 E Buchtel Avenue'; //University of Akron if you're wondering
            document.getElementById('City').value = 'Akron';
            document.getElementById('State').selectedIndex = 36;
            document.getElementById('ZipCode').value = '44325';
            console.log('JQ: ' + $().jquery);
            $('#btnSearch').click();
            console.log('Clicked');
        });
    },
    function() {
        console.log('Answers:');
        page.injectJs("jquery1-11-1min.js");
        page.render('AnswerPage.png');
        page.evaluate(function() {
            console.log('The Answer: ' + document.getElementById('TheAnswer').innerHTML);
            $('#buttonOnAnswerPage').click(); // This isn't really necessary unless you need to navigate deeper
            console.log('Sub button clicked');
        });
    },
    function() {
        console.log('More Answers:'); // This function is for navigating deeper than the first-level form submission
        page.render('MoreAnswersPage.png');
        page.evaluate(function() {
            console.log('More Stuff: ' + document.body.innerHTML);
        });
    },
    function() {
        console.log('Exiting');
    }
];

interval = setInterval(function() {
    if (!loadInProgress && typeof steps[testindex] == "function") {
        console.log("step " + (testindex + 1));
        steps[testindex]();
        testindex++;
    }
    if (typeof steps[testindex] != "function") {
        console.log("test complete!");
        phantom.exit();
    }
}, 50);

关于javascript - PhantomJS 并单击表单按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25288307/

javascriptPhantomJS3439getElementByIdjqueryformsautomated-tests

有关javascript - PhantomJS 并单击表单按钮的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  3. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  6. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St

  7. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 用于 Rails 的 HAML 表单 - 2

    我目前正在尝试将ERB布局转换为HAML。这是我不断收到的错误:index.html.haml:18:syntaxerror,unexpected')'));}\n#{_hamlout.format_...这是HAML页面:.row-fluid.span6%h2TodoList.span6%h2{:style=>"text-align:right;"}document.write(today)%hr.divider.row-fluid.span6%h2.small_headNewTask=render:partial=>'layouts/form_errors',:locals=>{:

  10. ruby-on-rails - 如何在 Rails 中为现有模型生成表单？ - 2

    为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。 最佳答案 这听起来可能很傻，但请听我说完……当我想开始清洁时，我自己也做过几次这样的事情。以下是一个脚本，它将读取您的模式并生成必要的生成命令来重现它:require'rubygems'require'active_support/core_ext'schema=File.read('db/schema.rb')schema.scan(/create_table"(\w+)",.*?\n(.*?)\nend/m).eachdo|name

随机推荐